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 :
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.
🤓 🤐 🤑 😤 😴 🤖 🕵 🏃 👍 👎 💪 👆
.text-left
.text-center
.text-right
.text-lowercase
.text-uppercase
.text-capitalize
.text-sm
.text-lg
.text-300
.text-500
.text-700
.text-900
.text-primary
.text-success
.text-info
.text-warning
.text-danger
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.
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.
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.
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.
Les styles pour les hyperliens sont dans le module webstrap/type
.
Il est possible d'ajouter une ombre sous le bouton en ajoutant la classe "btn-shadow".
(Non recommand� pour "btn-link".)
Ajouter la classe .btn-multiline pour permettre le retour � la ligne.
Il est possible d'inverser les couleurs en ajoutant la classe "btn-invert".
(Non recommand� pour "btn-link".)
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.
L'attribut readonly est support� par Bootstrap, mais est rarement utilis�, voire jamais. Aucune documentation n'a �t� produite pour cette fonctionnalit�.
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.
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.
<div class="form-group"> <label class="control-label [required]" for="ID">Libell�</label> [input,select,textarea class="form-control" id="ID" ...] </div>
<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>
<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>
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.
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.