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 :
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.
Hyperlien avec la présentation du bouton principal, ajouter la classe rte-btn-primary à l'hyperlien :
Hyperliens
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.
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-100
.text-200
.text-300
.text-400
.text-500
.text-600
.text-700
.text-800
.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.
Style d'hyperlien dans les textes courant :
Hyperliens
Hyperlien servant d'appel à l'action, ajouter la classe link-cta :
Hyperliens
Hyperlien servant de retour, ajouter la classe link-return :
Hyperliens
Ajouter la classe .btn-multiline pour permettre le retour à la ligne.
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é.
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" 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>