Base CSS
Typographie
Headings
Tous les titres,
<h1> à <h6>, ainsi que les classes .h1 à .h6.h1. Heading
h2. Heading
h3. Heading
h4. Heading
h5. Heading
h6. Heading
Mise en avant
Créer un paragraphe se démarquant via la classe
.lead.Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.
<p class="lead">Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.</p>
Alignements
Alignement horizontal d'éléments en ligne via les classes d'alignement.
Texte justifié à gauche.
Texte centré.
Texte justifié à droite.
Texte justifié.
Texte sans césure.
<p class="text-left">Texte justifié à gauche.</p>
<p class="text-center">Texte centré.</p>
<p class="text-right">Texte justifié à droite.</p>
<p class="text-justify">Texte justifié.</p>
<p class="text-nowrap">Texte sans césure.</p>
Classes contextuelles
Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.
Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.
Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.
Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.
Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.
<p class="text-muted">...</p>
<p class="text-warning">...</p>
<p class="text-error">...</p>
<p class="text-primary">...</p>
<p class="text-success">...</p>
Réseaux sociaux
Facebook Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.
Google + Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.
Instagram Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.
Pinterest Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.
Twitter Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.
Youtube Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.
<p class="text-facebook">...</p>
<p class="text-google-plus">...</p>
<p class="text-instagram">...</p>
<p class="text-pinterest">...</p>
<p class="text-twitter">...</p>
<p class="text-youtube">...</p>
Adresse
Presentation d'une adresse
SARL e-monsite<address> mise en forme avec <br>.19, rue Lamartine
80000 Amiens
Tél.: (33) 0102030405
<address>
<strong>SARL e-monsite</strong><br>
19, rue Lamartine<br>
80000 Amiens<br>
<abbr title="Téléphone">Tél.:</abbr> (33) 0102030405
</address>
Listes
Non ordonnée
- Lorem ipsum dolor sit amet
- Nulla volutpat aliquam velit
- Phasellus iaculis neque
- Purus sodales ultricies
- Faucibus porta lacus fringilla vel
- Aenean sit amet erat nunc
<ul>
<li>...</li>
<ul>Ordonnée
- Lorem ipsum dolor sit amet
- Consectetur adipiscing elit
- Integer molestie lorem at massa
<ol>
<li>...</li>
<ol>Non stylée
Supprimer le formatage par défaut via la classe
.list-unstyled.- Lorem ipsum dolor sit amet
- Consectetur adipiscing elit
- Phasellus iaculis neque
- Purus sodales ultricies
- Faucibus porta lacus fringilla vel
- Aenean sit amet erat nunc
<ul class="list-unstyled">
<li>...</li>
<ul>En ligne
Positionner les éléments sur une seule ligne via la classe
.list-inline.- Lorem ipsum
- Phasellus iaculis
- Nulla volutpat
<ul class="list-inline">
<li>...</li>
<ul>Description
- Description lists
- A description list is perfect for defining terms.
- Euismod
- Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
- Donec id elit non mi porta gravida at eget metus.
- Malesuada porta
- Etiam porta sem malesuada magna mollis euismod.
<dl>
<dt>...</dt>
<dd>...</dd>
<dl>Description horizontale
Placer le terme et sa définition face à face sur une seule ligne via la classe
.dl-horizontal.- Description lists
- A description list is perfect for defining terms.
- Euismod
- Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
<dl class="dl-horizontal">
<dt>...</dt>
<dd>...</dd>
<dl>Code
En ligne
Mettre la portion de code dans une balise <code>.
<p>Mettre la portion de code dans une balise <code><code></code></p>
Bloc
Utiliser <pre> pour une ou plusieurs lignes de code.
<pre>Utiliser <code><pre></code> pour une ou plusieurs lignes de code.</pre>Tableaux
Par défaut
Application d'un léger padding et de séparations horizontales via la classe
.table sur la balise <table>.| # | First Name | Last Name | Username |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry | the Bird |
<table class="table">
<thead>
<tr>
<th>...</th>
</tr>
</thead>
<tbody>
<tr>
<td>...</td>
</tr>
</tbody>
</table>
Avec lignes alternées
Appliquer
.table-striped pour un effet d'alternance du fond des lignes.| # | First Name | Last Name | Username |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry | the Bird |
<table class="table table-striped">
...
</table>
Avec bordures
Appliquer
.table-bordered pour ajouter une bordure extérieure.| # | First Name | Last Name | Username |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry | the Bird |
<table class="table table-bordered">
...
</table>
Tableau responsive
Insérer le tableau dans un conteneur disposant de la classe
.table-responsive.| # | First Name | Last Name | Username | City | Age |
|---|---|---|---|---|---|
| 1 | Mark | Otto | @mdo | Mexico | 32 |
| 2 | Jacob | Thornton | @fat | Paris | 28 |
| 3 | Larry | the Bird | London | 45 |
<div class="table-responsible">
<table class="table">
...
</table>
</div>
Avec Flexbox
Dans un conteneur .table-flex, reproduire des lignes .table-flex-row contenant x colonnes .table-flex-column. Insérer une entête en début de colonne via .table-flex-heading.
Définir l'affichage des colonnes sur tablettes et smartphones via les classes .hidden-tablet et/ou .hidden-phone.
#
1
First Name
Mark
Last Name
Otto
Username
@mdo
2
Jacob
Thornton
@fat
3
Larry
the Bird
@twitter
<div class="table-flex table-striped">
<div class="table-flex-row">
<div class="table-flex-column">
<div class="table-flex-heading">First Name</div>
<div class="table-flex-body">Mark</div>
</div>
...
</div>
...
</div>
Formulaires
Par défaut
Les éléments textuels de formulaire <input>, <textarea>, et <select> sont définis à width: 100%; par défaut.
Dans un conteneur .control-group, insérer le label puis un conteneur .controls contenant l'élément de formulaire.
Renseigner le type de champ via la classe .control-type-[elementType] ajoutée à .control-group.
<form>
<fieldset>
<legend>Légende</legend>
<div class="control-group control-type-text">
<label for="exampleForm">Type Text</label>
<div class="controls">
<input id="exampleForm" placeholder="Text" type="text">
<span class="help-block text-muted">Exemple de texte contextuel.</span>
</div>
</div>
<div class="control-group form-actions">
<div class="controls">
<input type="button" value="Valider" class="btn btn-primary">
</div>
</div>
</fieldset>
</form>
Formulaire en ligne
Ajouter la classe
.form-inline au formulaire pour un placement en ligne des éléments.
<form class="form-inline">
<div class="control-group control-type-text"><label for="exampleInputName2">Name</label>
<div class="controls">
<input id="exampleInputName2" placeholder="Jane Doe" type="text">
</div>
</div>
<div class="control-group control-type-email">
<label for="exampleInputEmail2">Email</label>
<div class="controls">
<input class="form-control" id="exampleInputEmail2" placeholder="jane.doe@example.com" type="email">
</div>
</div>
<div class="control-group control-type-checkbox">
<div class="controls">
<label class="checkbox">
<input type="checkbox"> Se souvenir de moi
</label>
</div>
</div>
<div class="control-group form-actions">
<div class="controls">
<button class="btn btn-primary" type="submit">Valider</button>
</div>
</div>
</form>
Formulaire horizontal
Alignement horizontal des labels et éléments via l'ajout de la classe
.form-horizontal au formulaire.
<form class="form-horizontal">
<div class="control-group control-type-text">
<label for="exampleInputName3">Name</label>
<div class="controls">
<input id="exampleInputName3" placeholder="Jane Doe" type="text">
</div>
</div>
<div class="control-group control-type-email">
<label for="exampleInputEmail3">Email</label>
<div class="controls">
<input class="form-control" id="exampleInputEmail3" placeholder="jane.doe@example.com" type="email">
</div>
</div>
<div class="control-group control-type-checkbox">
<div class="controls">
<label class="checkbox">
<input type="checkbox"> Se souvenir de moi
</label>
</div>
</div>
<div class="control-group form-actions">
<div class="controls">
<button class="btn btn-primary" type="submit">Valider</button>
</div>
</div>
</form>
Éléménts supportés
<form>
<div class="control-group control-type-password">
<label for="exampleInputPassword4">Type Password</label>
<div class="controls">
<input id="exampleInputPassword4" placeholder="Password" type="password">
</div>
</div>
</form>
<form>
<div class="control-group control-type-number">
<label for="exampleInputNumber4">Type Number</label>
<div class="controls">
<input id="exampleInputNumber4" placeholder="Number" type="number">
</div>
</div>
</form>
<form>
<div class="control-group control-type-email">
<label for="exampleInputEmail4">Type Email</label>
<div class="controls">
<input id="exampleInputEmail4" placeholder="Email" type="email">
</div>
</div>
</form>
<form>
<div class="control-group control-type-url">
<label for="exampleInputUrl4">Type Url</label>
<div class="controls">
<input id="exampleInputUrl4" placeholder="Url" type="url">
</div>
</div>
</form>
<form>
<div class="control-group control-type-date">
<label for="exampleInputDate4">Type Date</label>
<div class="controls">
<input id="exampleInputDate4" type="date">
</div>
</div>
</form>
<form>
<div class="control-group control-type-select">
<label for="exampleSelect4">Type Select</label>
<div class="controls">
<select id="exampleSelect4">
<option value="">Select</option>
<option value="1">1</option>
...
</select>
</div>
</div>
</form>
<form>
<div class="control-group control-type-textarea">
<label for="exampleTextarea4">Type Textarea</label>
<div class="controls">
<textarea id="exampleTextarea4" rows="3"></textarea>
</div>
</div>
</form>
<form>
<div class="control-group control-type-file">
<span class="as-label">Type File</span>
<div class="controls">
<label class="btn btn-default" for="exampleInputFile4">Choisissez un fichier</label>
<input id="exampleInputFile4" type="file">
</div>
</div>
</form>
Cases à cocher et boutons radio
<form>
<div class="control-group control-type-checkbox">
<div class="controls">
<label class="checkbox">
<input type="checkbox" name="optionsCheckbox2" value="1"> Option une
</label>
<label class="checkbox">
<input type="checkbox" name="optionsCheckbox2" value="2" disabled="disabled"> Option deux désactivée
</label>
</div>
</div>
<div class="control-group control-type-radio">
<div class="controls">
<label class="radio">
<input checked="checked" name="optionsRadios" type="radio" value="1"> Option une
</label>
<label class="radio">
<input name="optionsRadios" type="radio" value="2"> Option deux
</label>
<label class="radio">
<input name="optionsRadios" type="radio" value="3" disabled="disabled"> Option trois désactivée
</label>
</div>
</div>
</form>
Cases à cocher et boutons radio en ligne
Appliquer les classes
.checkbox-inline ou .radio-inline à une série de case à cocher ou de boutons radio.
<form>
<div class="control-group control-type-checkbox">
<div class="controls">
<label class="checkbox-inline">
<input name="inlineCheckbox" type="checkbox" value="1"> 1
</label>
<label class="checkbox-inline">
<input name="inlineCheckbox" type="checkbox" value="2"> 2
</label>
<label class="checkbox-inline">
<input id="inlineCheckbox" type="checkbox" value="3"> 3
</label>
</div>
</div>
<div class="control-group control-type-radio">
<div class="controls">
<label class="radio-inline">
<input name="inlineRadioOptions" type="radio" value="1"> 1
</label>
<label class="radio-inline">
<input name="inlineRadioOptions" type="radio" value="2"> 2
</label>
<label class="radio-inline">
<input name="inlineRadioOptions" type="radio" value="3"> 3
</label>
</div>
</div>
</form>
Extensions
Groupe d'éléments
Utiliser la classe
.input-group-addon dans un conteneur .input-group pour ajouter un préfixe ou suffixe à l'élément.
<form>
<div class="control-group control-type-text">
<div class="controls">
<div class="input-group">
<div class="input-group-addon">€</div>
<input placeholder="Montant" type="text">
<div class="input-group-addon">.00</div>
</div>
</div>
</div>
</form>
Formulaire de recherche
Utiliser la classe
.input-group-btn dans un conteneur .input-group pour ajouter un bouton à l'élément.
<form class="form-search">
<div class="control-group control-type-text">
<div class="controls">
<div class="input-group">
<div class="input-group-addon">
<i class="fa fa-search"></i>
</div>
<input placeholder="Votre recherche" type="text">
<div class="input-group-btn">
<button class="btn btn-primary" type="button">OK</button>
</div>
</div>
</div>
</div>
</form>
Contenu statique
<form>
<div class="control-group">
<span class="as-label">Statique</span>
<div class="controls">
<span class="form-control-static">email@exemple.com</span>
</div>
</div>
</form>
Aide contextuelle
Appliquer la classe .has-help à .control-group puis insérer l'icône .control-help à la suite de .controls.
Invoquer le plugin Tooltip via l'attribut data-toggle="tooltip" renseigné sur .control-help.
<form>
<div class="control-group control-type-text has-help">
<label for="exampleInputText8">Type Text</label>
<div class="controls">
<input id="exampleInputText8" placeholder="Text" type="text">
</div>
<span class="control-help" data-toggle="tooltip" data-container="body" data-content="Phasellus et orci id dolor..." data-classname="control-help-tooltip" data-position="left"></span>
</div>
</form>
<form>
<div class="control-group control-type-file has-help">
<span class="as-label">Type File</span>
<div class="controls">
<label class="btn btn-default" for="exampleInputFile5">Choisissez un fichier</label>
<input id="exampleInputFile5" type="file">
</div>
<span class="control-help" data-toggle="tooltip" data-container="body" data-content="Phasellus et orci id dolor..." data-classname="control-help-tooltip"></span>
</div>
</form>
<form>
<div class="control-group control-type-checkbox has-help">
<div class="controls">
<label class="checkbox-inline">
<input type="checkbox" value="option1"> 1
</label>
<label class="checkbox-inline">
<input type="checkbox" value="option2"> 2
</label>
<label class="checkbox-inline">
<input type="checkbox" value="option3"> 3
</label>
</div>
<span class="control-help" data-toggle="tooltip" data-container="body" data-content="Phasellus et orci id dolor..." data-classname="control-help-tooltip"></span>
</div>
</form>
États
État vide
javaScript évalue la valeur du champ et applique la classe .has-empty sur .control-group si la valeur de l'élément est nulle.
Lors de la perte du focus sur l'élément, la valeur de l'élément est de nouveau évaluée par javaScript.
<form>
<div class="control-group control-type-text">
<label for="inputFocused">Champ ciblé</label>
<div class="controls">
<input type="text" id="inputFocused">
</div>
</div>
</form>
État focus
javaScript applique la classe
.has-focus sur .control-group lors du focus sur l'élément.
<form>
<div class="control-group control-type-text">
<label for="inputFocused">Champ ciblé</label>
<div class="controls">
<input type="text" id="inputFocused">
</div>
</div>
</form>
État désactivé
javaScript applique la classe .has-disabled sur .control-group si l'élément est doté de l'attribut disabled.
<form>
<div class="control-group control-type-text has-disabled">
<label for="disabledInput">Champ désactivé</label>
<div class="controls">
<input disabled="disabled" id="disabledInput" value="valeur non éditable" type="text">
</div>
</div>
</form>
javaScript applique la classe .has-disabled sur .radio dans le cas d'un bouton radio.
<form>
<div class="control-group">
<div class="controls">
<label class="radio-inline has-disabled">
<input name="radios" disabled="disabled" type="radio" value="option1"> Option désactivée
</label>
<label class="radio-inline">
<input name="radios" type="radio" value="option2"> Option activée
</label>
</div>
</div>
</form>
javaScript applique la classe .has-disabled sur .checkbox dans le cas d'une case à cocher.
<form>
<div class="control-group">
<div class="controls">
<label class="checkbox-inline has-disabled">
<input name="checkboxes" disabled="disabled" type="checkbox" value="option1"> Option désactivée
</label>
<label class="checkbox-inline">
<input name="checkboxes" type="checkbox" value="option2"> Option activée
</label>
</div>
</div>
</form>
État lecture seule
L'élément de formulaire en lecture seule doit être doté de l'attribut readonly.
<form>
<div class="control-group control-type-text">
<label>Champ en lecture seule</label>
<div class="controls">
<input readonly="readonly" type="text" value="Champ en lecture seule">
</div>
</div>
</form>
État requis
Ajouter la classe .has-required sur .control-group pour ajouter le suffixe "*" au label.
Lors de la soumission du formulaire, grâce au plugin JavaScript Validate, javaScript évalue chaque champ contenu dans .has-required.
<form action="#">
<div class="control-group control-type-text has-required">
<label for="requiredInput">Champ requis</label>
<div class="controls">
<input id="requiredInput" placeholder="Champ requis" type="text">
</div>
</div>
<div class="control-group control-type-checkbox has-required">
<span class="as-label">Choix de cases à cocher requis</span>
<div class="controls">
<label class="checkbox">
<input name="requiredChekboxes" type="checkbox" value="1"> Cochez-moi
</label>
<label class="checkbox">
<input name="requiredChekboxes" type="checkbox" value="2"> Cochez-moi
</label>
</div>
</div>
<div class="control-group control-type-radio has-required">
<span class="as-label">Choix de bouton radio requis</span>
<div class="controls">
<label class="radio">
<input name="requiredRadios" type="radio" value="option1"> Option 1
</label>
<label class="radio">
<input name="requiredRadios" type="radio" value="option2"> Option 2
</label>
</div>
</div>
<div class="control-group form-actions">
<div class="controls">
<input class="btn btn-primary" type="submit" value="Valider">
</div>
</div>
</form>
État de validation
Lors de la soumission du formulaire, le plugin JavaScript Validate applique la classe .has-error sur .control-group.has-required, dans le cas où la valeur de l'élément est nulle.
Boutons
Balises
Appliquer la classe
.btn sur <a>, <button>, ou <input>.<p>
<a class="btn btn-default" href="#" role="button">Link</a>
<button class="btn btn-default" type="submit">Button</button>
<input class="btn btn-default" value="Input" type="submit">
</p>Ajouter une des classes disponibles pour créer un bouton stylisé.
<p>
<button class="btn btn-default" type="button">Défaut</button>
<button class="btn btn-primary" type="button">Primaire</button>
<button class="btn btn-info" type="button">Info</button>
<button class="btn btn-success" type="button">Succès</button>
<button class="btn btn-warning" type="button">Warning</button>
<button class="btn btn-error" type="button">Erreur</button>
<button class="btn btn-link" type="button">Lien</button>
</p>Tailles
Ajouter la classe .btn-large ou .btn-small pour agir sur la taille du bouton.
<p>
<button class="btn btn-default btn-small" type="button">Petite taille</button>
<button class="btn btn-default" type="button">Taille normale</button>
<button class="btn btn-default btn-large" type="button">Grande taille</button>
</p>Ajouter la classe .btn-block pour convertir le bouton en bloc.
<p>
<button class="btn btn-default btn-block" type="button">Bouton de type bloc</button>
</p>Arrondis
Ajouter la classe .btn-rounded ou .btn-circle pour arondir les angles des boutons.
<p>
<button class="btn btn-default btn-rounded" type="button">.btn-rounded</button>
<button class="btn btn-default btn-circle" type="button">.btn-circle</button>
</p>Groupe de boutons
Placer les boutons
.btn dans un conteneur .btn-group.<p class="btn-group">
<button type="button" class="btn btn-default">Gauche</button>
<button type="button" class="btn btn-default">Milieu</button>
<button type="button" class="btn btn-default">Droite</button>
</p>Taille
<p class="btn-group btn-group-small">...</p>
<p class="btn-group btn-group-large">...</p>Arrondi
<p class="btn-group btn-rounded">...</p>
<p class="btn-group btn-circle">...</p>État désactivé
Ajouter l'attribut disabled ou la classe .disabled sur un bouton .btn pour le désactiver.
<button class="btn btn-primary" disabled="disabled" type="button">Primaire</button>
<button class="btn btn-default" disabled="disabled" type="button">Par défaut</button>
<a href="#" class="btn btn-default disabled">Par défaut</a>État actif
Ajouter la classe .active sur <button> ,<input> ou <a> pour simuler l'état actif bouton.
<p>
<button class="btn btn-primary active" type="button">Primaire</button>
<a class="btn btn-default active" href="#">Par défaut</a>
</p>Images
Images responsives
Les images sont automatiquement responsives, disposant par défaut d'une largeur max-width: 100% et d'une hauteur height: auto.
Effets
Ajouter facilement un effet à partir d'une des classes disponibles.
<ul class="list-inline">
<li>
<img alt="140x140" class="img-rounded" src="…">
</li>
<li>
<img alt="140x140" class="img-circle" src="…">
</li>
<li>
<img alt="140x140" class=".img-polaroid" src="…">
</li>
</ul>Icônes
Nous recommandons d'utiliser un set d'icônes sous forme de police, ce qui vous permettra de les manipuler en CSS. Nous conseillons Font Awesome, qui dans sa version 4.6, propose plus de 600 icônes libres de droits. Une page de démonstration vous donne quelques exemples d'utilisation.
<p>
<i class="fa fa-user"></i>
</p>Extras
Afin de répondre aux besoins du framework, l'icône .fa-power-off a été customisée et l'icône .fa-power-on ajoutée au set existant de Font Awesome.
- .fa-power-off
- .fa-power-on
<ul class="list-inline">
<li>
<i class="fa fa-power-off"></i> .fa-power-off
</li>
<li>
<i class="fa fa-power-on"></i> .fa-power-on
</li>
</ul>Les classes .fa-10x, .fa-15x et .fa-20x ont également été créées afin d'agir plus facilement sur la taille des icônes.
.fa-lg
.fa-2x
.fa-3x
.fa-4x
.fa-5x
.fa-10x
.fa-15x
.fa-20x