Guide de styles - Bases
Ce guide de styles pr�sente les bases du style du Lab.
Avertissement
Ce guide des bases de styles n'est pas un remplacement � la documentation officielle de Bootstrap 3.
Les objectifs de ce guide est de :
- offrir un aper�u des styles fondamentaux � l'�laboration d'un site;
- constater les impacts de la configuration de Bootstrap dans un ensemble;
- documenter des ajouts faits � Bootstrap;
- servir de support visuel pour le design et l'int�gration.
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.
- 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.
Emoji
🤓 🤐 🤑 😤 😴 🤖 🕵 🏃 👍 👎 💪 👆
Alignements
.text-left
.text-center
.text-right
Transformations
.text-lowercase
.text-uppercase
.text-capitalize
Tailles
.text-sm
.text-lg
Graisses
.text-300
.text-500
.text-700
.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]
- 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.
Aenean tincidunt, magna at dapibus egestas [H5]
- 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.
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.
Boutons
Styles
D�faut
Ombre port�e
Il est possible d'ajouter une ombre sous le bouton en ajoutant la classe "btn-shadow".
(Non recommand� pour "btn-link".)
Retour � la ligne
Ajouter la classe .btn-multiline pour permettre le retour � la ligne.
Couleurs invers�es
Il est possible d'inverser les couleurs en ajoutant la classe "btn-invert".
(Non recommand� pour "btn-link".)
�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 [required]" 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>
Popup
-
data-popup-ctrl-youtube est utilis� comme s�lecteur pour appliqu� le popup youtube. Celui-ci contient la valeur de l'ID du vid�o.
L'attribue href contient le lien vers youtube pour visionner la vid�o. Cela permet d'ouvrir facilement le lien dans un nouvel onglet. Il est �galement important d'ajouter l'attribue target=_blank puisqu'il s'agit d'un lien externe.
Le popup Youtube est bas� sur du code ASYNC.
Il est important d'utiliser la balise href en fallback.
Couleurs
#00aef0
#ffca00
#fff
#212121
#5cb85c
#5bc0de
#f0ad4e
#d9534f
Remplacer la couleur d'un ic�ne (PNG24)
Il est possible de changer la couleur d'un ic�ne (PNG transparent) � l'aide d'ImageProcessor avec la recette suivante :
?brightness=-100&replace=000,0f0&fuzziness=100
Le principe est de rendre l'image noir (brightness -100%), puis de
remplacer la couleur noir par la couleur d�sir�e.
Le param�tre "fuzziness" est requis pour r�duire les art�facts.
Si on doit faire un redimensionnement de l'image, appliquer les param�tres � la suite :
?brightness=-100&replace=000,0ff&fuzziness=100&mode=max&width=100&height=100
Le redimensionnement aura lieu apr�s le changement de couleur et les art�facts, d� au changement de couleur, ne seront plus perceptibles.
