Guide de styles - Bases

Ce guide de styles présente les bases du style du Lab.

Rich Text Editor

Cette section contient des informations à propos de ce qui est permis de faire dans les éditeurs WYSIWYG. Toutes informations de style ne figurant pas dans cette section n'est pas officiellement supporté par les développeurs.

Liens

Bouton primaire

Hyperlien avec la présentation du bouton principal, ajouter la classe rte-btn-primary à l'hyperlien :
Hyperliens

Lien d'action

Hyperlien avec la présentation des liens d'action, ajouter la classe rte-link-action à l'hyperlien :
Hyperliens

Ici se termine les informations concertant les Rich Text Editor.


Titre de niveau 1

Titre de niveau 2

Titre de niveau 3

Titre de niveau 4

Titre de niveau 5
Titre de niveau 6

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin malesuada vehicula sem vitae congue. Cras dapibus quam hendrerit justo tristique pellentesque. Donec sem orci, pharetra a auctor quis, consequat vel libero.

Aliquam arcu diam, ullamcorper sed ipsum non, lobortis finibus turpis. Sed euismod nulla a euismod aliquam. Nunc sagittis ante vitae hendrerit consectetur. Curabitur nec ullamcorper dui, posuere pharetra ligula. Donec blandit, lacus quis mollis luctus.

In egestas dignissim venenatis. Proin consequat eros vitae pellentesque eleifend. Integer id commodo dui. Curabitur aliquam tempus turpis.

  • Maecenas feugiat tortor vitae mauris consequat commodo.
  • Fusce ut dignissim dui.
  • In ac posuere orci, ut dictum lorem.
  • Sed quis orci eget velit commodo sollicitudin.
  • Cras efficitur felis eu sodales egestas.
  1. Maecenas feugiat tortor vitae mauris consequat commodo.
  2. Fusce ut dignissim dui.
  3. In ac posuere orci, ut dictum lorem.
  4. Sed quis orci eget velit commodo sollicitudin.
  5. Cras efficitur felis eu sodales egestas.

Alignements

.text-left

.text-center

.text-right

Transformations

.text-lowercase

.text-uppercase

.text-capitalize

Tailles

.text-sm

.text-lg

Graisses

.text-100

.text-200

.text-300

.text-400

.text-500

.text-600

.text-700

.text-800

.text-900

Couleurs

.text-primary

.text-success

.text-info

.text-warning

.text-danger

Exemple de contenu [H1]

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ac auctor justo, et efficitur massa. Phasellus convallis, risus quis tristique commodo, massa leo eleifend turpis, dictum tincidunt sem dui sit amet nibh.

Nunc sagittis in nunc vitae vulputate. Duis at vestibulum lorem. Suspendisse a ultricies massa. Mauris eros arcu, placerat a lobortis id, tincidunt quis erat. Aenean sodales mauris non nisi dapibus cursus. Sed sed nisl non arcu maximus rhoncus. Praesent auctor placerat posuere. Nunc tortor est, sollicitudin at justo a, laoreet facilisis neque.

Aenean viverra consectetur laoreet [H2]

Morbi tincidunt congue urna et laoreet. Cras mollis lectus ut mi eleifend, ut blandit orci aliquet. Duis in quam tortor. Phasellus congue purus arcu, id scelerisque ante aliquam viverra. Aliquam erat volutpat. Etiam eu sem vitae quam cursus suscipit. Sed ultrices dolor eget massa finibus, non blandit odio rhoncus. Ut eget augue erat. Nunc sit amet diam sollicitudin, tristique diam ac, tincidunt felis. Maecenas id ligula vulputate, ultrices arcu nec, lacinia nunc.

Duis nec nisi nec urna vestibulum [H3]

Phasellus nec ante porta, mattis eros ac, imperdiet arcu. Donec sit amet congue ipsum, ut accumsan diam. Vivamus blandit facilisis turpis, sit amet convallis diam. Nullam tristique nulla nec felis faucibus cursus.

  • Quisque mauris eros, tempor quis turpis at, bibendum pharetra nisl.
  • Sed lectus nulla, semper vel consectetur dapibus, dignissim sed quam.
  • Integer luctus efficitur placerat. Nulla venenatis magna massa, in volutpat orci consectetur at.

Praesent eget erat dapibus [H4]

  1. Quisque mauris eros, tempor quis turpis at, bibendum pharetra nisl.
  2. Sed lectus nulla, semper vel consectetur dapibus, dignissim sed quam.
  3. Integer luctus efficitur placerat. Nulla venenatis magna massa, in volutpat orci consectetur at.
Aenean tincidunt, magna at dapibus egestas [H5]
  1. Quisque mauris eros, tempor quis turpis at, bibendum pharetra nisl.
  2. Sed lectus nulla, semper vel consectetur dapibus, dignissim sed quam.
  3. Integer luctus efficitur placerat. Nulla venenatis magna massa, in volutpat orci consectetur at.
Integer luctus efficitur placerat [H6]

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed pulvinar felis nec enim commodo, eu rhoncus ligula tincidunt. Aliquam lectus purus, congue dapibus convallis suscipit, rutrum sit amet elit. Ut cursus mi interdum tortor auctor, sit amet congue tellus efficitur.

Hyperlinks

Les styles pour les hyperliens sont dans le module webstrap/type.

Styles

Défaut

Style d'hyperlien dans les textes courant :
Hyperliens

Lien appel à l'action

Hyperlien servant d'appel à l'action, ajouter la classe link-cta :
Hyperliens

Lien de retour

Hyperlien servant de retour, ajouter la classe link-return :
Hyperliens

Boutons

Styles

Retour à la ligne

Ajouter la classe .btn-multiline pour permettre le retour à la ligne.

Icônes

Les classes d'icônes ne sont pas compatible avec tout les boutons. S'il devrait y avoir de nouveau besoin, il faudra modifier webstrap/buttons.

Ajouter la classe btn-arrow-prefix pour ajouter une flèche blanche au début du libellé.

États

Taille

Formulaire

Il est important d'encapsuler les balises des libellés et des champs dans un conteneur ayant la classe .form-group.
Cela permet un bon espacement vertical entre les lignes du formulaire, surtout lorsque disposé dans une grille.
Se référer à l'exemple de disposition.

Champs

Désactivé

Tailles

Lecture uniquement

L'attribut readonly est supporté par Bootstrap, mais est rarement utilisé, voire jamais. Aucune documentation n'a été produite pour cette fonctionnalité.

Inline

Par défaut, tout les champs utilisant la classe .form-control sont affichés en block.

Cela empêche l'utilisation de l'attribut size sur les champs, et cols sur les champs multilignes. Il est possible d'ajouter la classe .form-control-inline à un champ utilisant la classe .form-control pour obtenir un affichage inline.

Balisage HTML

Exemple de bonne pratique pour le balisage HTML des champs de formulaire. Des classes supplémentaires peuvent être appliquées pour changer la présentation, ce n'est que la base.

Input, select, textarea

<div class="form-group">
    <label class="control-label" for="ID">Libellé</label>
    [input,select,textarea class="form-control" id="ID" ...]
</div>

Checkbox

<div class="form-group">
    <div class="checkbox"> 
        <label>
            <input type="checkbox" name="" value="">
            Libellé
        </label>
    </div>
    <div class="checkbox"> 
        <label>
            <input type="checkbox" name="" value="">
            Libellé
        </label>
    </div>
</div>

Radio

<div class="form-group">
    <div class="radio"> 
        <label> 
            <input type="radio" name="radio" value=""> 
            Libellé
        </label> 
    </div> 
    <div class="radio"> 
        <label> 
            <input type="radio" name="radio" value=""> 
            Libellé
        </label> 
    </div> 
</div>

Example de disposition

5, rang Saint-Antoine
, C.P. 672
Saint-Irénée (Québec)
G0T 1V0 Canada

T. 418 452-8111
F. 418 452-3503

info@domaineforget.com

Une réalisation de Sigmund.ca