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 <address> mise en forme avec <br>.
SARL e-monsite
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

  1. Lorem ipsum dolor sit amet
  2. Consectetur adipiscing elit
  3. 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>&lt;code&gt;</code></p>

Bloc

Utiliser <pre> pour une ou plusieurs lignes de code.
<pre>Utiliser <code>&lt;pre&gt;</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 @twitter
<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 @twitter
<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 @twitter
<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 @twitter 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

Age

28

City

Paris
2
Jacob
Thornton
@fat
25
New-York
3
Larry
the Bird
@twitter
18
San Francisco
<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.

Légende
Exemple de texte contextuel.
<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>
Type File
<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.
.00
<form>
	<div class="control-group control-type-text">
	    <div class="controls">
	        <div class="input-group">
	            <div class="input-group-addon">&euro;</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

Statique

email@exemple.com

<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>
Type File
 
<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.

Choix de cases à cocher requis
Choix de bouton radio requis
<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>.

Link  

<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.

  Par défaut

<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.

 Par défaut

<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.

  • 140x140
  • 140x140
  • 140x140
<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