Toutes les classes

accordeon

La grille

Les containers

Container classique
<div class="container">
Container sur toute la largeur
<div class="container-fluid">

Une rangée

<div class="row">

Les colonnes

Petit écran (smartphone)
<div class="col-xs-*">
Ecran réduit (tablette)
<div class="col-sm-*">
Ecran moyen
<div class="col-md-*">
Grand écran
<div class="col-lg-*">
Saut de colonnes
<div class="col-*-offset-*">
Décaler une colonne vers la droite
<div class="col-*-push-*">
Décaler une colonne vers la gauche :
<div class="col-*-pull-*">

La mise en page

En-tête

<div class="page-header">

Pousser les éléments

A droite
<div class="pull-right">
A gauche
<div class="pull-left">

Centrer du texte et un contenu dans la grille

Texte
<div class="text-center">
Contenu
<div class="block-center">

Réaliser un fond esthétique

<div class="well">
Le jumbotron
<div class="jumbotron">
Le jumbotron en pleine largeur
<div class="jumbotron"> <div class="container">

Les classes responsives

Remettre les éléments dans le flux


<div class="clearfix visible-*">

Visibilité et disparition d'éléments

Visibilité des éléments
<div class="visible-xs">
<div class="visible-sm">
<div class="visible-md">
<div class="visible-lg">
Eléments cachés
<div class="hidden-xs">
<div class="hidden-sm">
<div class="hidden-md">
<div class="hidden-lg">

Les listes

Suppression des puces


<div class="list-unstyled">

Liste en ligne

<div class="list-inline">

Liste groupée

<ul class="list-group">
<li class="list-group-item">Item1</li>
<li class="list-group-item">Item2</li>
</ul>
Liste colorée
<ul class="list-group">
<li class="list-group-item list-group-item-info"></li>
<li class="list-group-item list-group-item-warning"></li>
<li class="list-group-item list-group-item-success"></li>
<li class="list-group-item list-group-item-danger"></li>
</ul>
Liste avec un en-tête et du texte
<ul class="list-group">
<h3 class="list-group-item-heading">Titre</h3>
<p class="list-group-item-text">texte.....</p>
</ul>

Les descriptions

Description horizontale

<ul class="dl-horizontal">

Les tableaux

Tableau de base

<table class="table">

Avec bordures et coins arrondis

<table class="table table-bordered">

Fond gris sur les lignes impairs

<table class="table table-striped">

Réduction verticale du tableau

<table class="table table-condensed">

Tableau responsive

<div class="col-xs-10 table-responsive">
<table class="table table-bordered table-striped
table-condensed">

Tableau coloré

<tbody>
<tr class="success">
<tr class="warning">
<tr class="active">
<tr class="danger">

Les formulaires

Contrôle sur toute la largeur

<form class="col-md-4">
<legend>Titre</legend>
Text : <input type="texte" class="form-control">

Espacement entre contrôles

<form class="col-md-4">
<legend>Titre</legend>
<div class="form-group">
<input type="text" class="form-control">
</div>
<div class="form-group">
<textarea type="textarea" class="form-control"></textarea>
</div>

Les cases à cocher et les zones d'option

Les zones d'option
<label for="fruit" class="radio">
<input type="radio" value="fruit" id="fruit">Fruit
</label>
Les cases à cocher
<div class="checkbox">
<label>
<input type="checkbox">Se souvenir de moi
</label>
</div>

Styliser le formulaire

<form class="well">
Dimensionner la classe "well"
<form class="well-sm"> <form class="well-lg">

Texte d'aide

<textarea id="textarea" class="form-control"></textarea>
<p class="help-block">Vous pouvez agrandir...</p>

Formulaire en ligne et horizontal

En ligne
<form class="form-inline">
Horizontal
<form class="form-horizontal">

Label invisible

<label class="sr-only" for="text">Texte</label>

Accoler une information ou un bouton à un contrôle

Une information
<div class="input-group">
<span class="input-group-addon">$</span>
<input type="text" class="form-control" value="1000">
</div>
Un bouton
<div class="input-group">
<input type="text" class="form-control" value="100">
<span class="input-group-btn">
<button type="button" class="btn btn-default">Envoyer</button>
</span>
</div>

Hauteur des contrôles

<input type="text" class="form-control input-sm" value="petit">
<input type="text" class="form-control input-lg" value="grand">

Stylisation des contrôles selon l'état

<div class="form-group has-error">
<div class="form-group has-warning">
<div class="form-group has-success">
Label pour le contrôle
<label class="control-label" for="idError">Erreur</label>
Icônes dans le contôle
<div class="form-group has-error has-feedback">
<label class="control-label" for="idError">Erreur</label>
<input type="text" class="form-control" for="iderror">
<span class="glyphicon glyphicon-remove form-control-feedback">
</span>

Les boutons

Boutons colorés

<button type="button" class="btn btn-default">
<button type="button" class="btn btn-success">
<button type="button" class="btn btn-info">
<button type="button" class="btn btn-warning">
<button type="button" class="btn btn-danger">
<button type="button" class="btn btn-primary">
<button type="button" class="btn btn-link">

Dimension des boutons

<button type="button" class="btn-danger btn-lg">Gros</button>
<button type="button" class="btn-danger btn-sm">Petit</button>
<button type="button" class="btn-info btn-xs">minus</button>
Dimensions en fonction de la dimensons de son contenant
<button type="button" class="btn-danger btn-block">bloc</button>

Boutons groupés

<div class="btn-group">
<a class="btn btn-info" href="#">1</a>
<a class="btn btn-link" href="#">2</a>
<a class="btn btn-danger" href="#">3</a>
Groupement vertical
<div class="btn-group-vertical">
Dimensions des boutons groupés
<div class="btn-group-vertical btn-group-lg">
<div class="btn-group btn-group-sm">
<div class="btn-group btn-group-xs">
Boutons justifiés dans son contenant
<div class="btn-group btn-group-justified">

Boutons bascule

<a class="btn btn-default" data-toggle="button">Bouton bascule

Boutons checkbox et radio

Checkbox
<div class="btn-group" data-toggle="button">
<label class="btn btn-info">
<input type="checkbox">Un</label>
<label class="btn btn-info">
<input type="checkbox">Deux</label>
</div>
Radio
<input type="radio">

Les images et les icônes

Les images

A coins arrondis
<img src="image.png" class="img-rounded">
Circulaire
<img src="image.png" class="img-circle">
Avec un liseré blanc
<img src="image.png" class="img-thumbnail">
Responsive
<img src="image.png" class="img-responsive">

Les icônes

Les icônes de glyphicons
<span class="glyphicons glyphicons-home"></span> Trouver votre glyphicon
Un icône dans un bouton
<div class="btn-group">
<a class="btn btn-warning" href="#">
<span class="glyphicons glyphicons-play"></span></a>

Les barres de navigation

Barre de base et barre avec un fond noir

Barre de base
<div class="navbar navbar-default">
<ul class="nav navbar-nav">
<li>.........</li>
Barre avec un fond noir
<div class="navbar navbar-inverse">

Item actif et désactivé

Item actif
<li class="active">
Item désactivé
<li class="disabled">

Titre dans la barre

<div class="navbar navbar-default">
<div class="navbar-header">
<a class="navbar-brand" href="#">Mon titre</a>
</div>

Une barre fixe ou statique

Barre fixée
<div class="navbar navbar-default navbar-fixed-top">en haut
<div class="navbar navbar-default navbar-fixed-bottom">en bas
Barre statique
<div class="navbar navbar-default navbar-static-top">en haut
<div class="navbar navbar-default navbar-fixed-bottom">en bas

Bouton et texte dans une barre

<div class="navbar-header">
<a class="navbar-brand">Mon titre</a></div>
<p class="navbar-text">cliquez ici : </p>
<button type="submit" class="btn btn-default navbar-btn">
Ouvrir</button>

Bouton responsive

<nav class="navbar-default">
<div class="navbar-header">
<button type="button" class="navbar-toggle"
data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Titre</a>
</div>
<div class="collapse navbar-collapse">
<ul>....

Les boutons de pagination

Bouton simple et esthétique

Bouton simple
<ul class="pagination">
<li>.........</li>>
</ul>
Bouton esthétique
<ul class="pager">
<li><a href="#">Précedent</a></li>
<li><a href="#">Suivant</a></li>
</ul>

Boutons éloignés l'un de l'autre

<ul class="pager">
<li class="Previous"><a href="#">Précédent</a></li>
<li class="next"><a href="#">Suivant</a></li>
</ul>

Dimension des boutons

<ul class="pagination pagination-large">Gros boutons
<ul class="pagination pagination-small">Petits boutons

Aide à la navigation

<ul class="breadcrumb">
<li class="active">Titre1</li>
<li><a href="#">Titre2</a></li>

Les éléments esthétiques

Des libellés colorés

<p><span class="label label-default">Gris</span></p>
<p><span class="label label-success">vert</span></p>
<p><span class="label label-danger">rouge</span></p>
<p><span class="label label-warning">orange</span></p>

Les badges

Un badge simple
<span class="badge">Badge</span>
Un badge avec le texte coloré
<span class="badge text-danger">01</span>
<button class="btn btn-danger">Message<span class="badge text-danger">
01</span></button>

Les panneaux

Panneau simple

<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Titre</h3>
</div>
<div class="panel-body">Contenu</div>
<div class= "panel-footer">Pied de panneau</div>

Panneau coloré

<div class="panel panel-primary">
<div class="panel panel-info">
<div class="panel panel-success">
<div class="panel panel-warning">
<div class="panel panel-danger">

Les medias

Insertion d'un média

<div class="media col-sm-10">
<div class="pull-right">
<iframe src="http//www.youtube.com/video"></iframe>
<div class="media-body">
<h4 class="media-heading">Un titre</h4>
vidéo sur les chiens</div>
</div>

Liste de médias

<ul class="media-list">
<li class="media">
<a href="#" class="pull-right">
<img class="media-object" src="image.png"></a>
<div class="media-body">
<h4 class="media-heading">Titre</h4>
<p>Lorem ipsum.......</p>
<div class="media">
<a href="#" class="pull-left">
<img class="media-object" src="image2.png"></a>
<div class="media-body">
<h4 class="media-heading">Titre</h4>
<p>Lorem ipsum.......</p>
.............</ul>

Les alertes

Alerte de base

<div class="alert alert-success">
C'est Ok !>
</div>
<div class="alert alert-danger">
Mot de passe incorrect
</div>
<div class="alert alert-info">
Informations
</div>
<div class="alert alert-warning">
Attention
</div>

Bloc d'alerte

<div class="alert alert-info">
<h3>Texte</h3>
ed si ille hac tam eximia fortuna propter utilitatem
</div>

Lien et bouton de fermeture dans une alerte

Lien
<div class="alert alert-info">
Un<a href="#" class="alert-link">lien</a>

Un bouton pour fermer

<div class="alert alert-warning alert-dismissable">
<button type="button" class="close" data-dismiss="alert">
</button>Attention lisez avant de cliquer
</div>

Les barres de progression

Barre de base et rayée

De base
<div class="progress">
<div class="progress-bar">
</div>
Rayée
<div class="progress progress-striped">
<div class="progress-bar">
</div>

Barre colorée

<div class="progress">
<div class="progress-bar progress-bar-danger">
<div class="progress-bar progress-bar-warning">
<div class="progress-bar progress-bar-info">
<div class="progress-bar progress-bar-success">

Les onglets

Onglet simple et stylisé

Onglet simple
<ul class="nav nav-tabs">
<li class="active"><a href="#accueil" data-toggle="tab">
Accueil</a></li>
<li><a href="#boutique" data-toggle="tab">Boutique</a></li>
<li><a href="#infos" data-toggle="tab">Informations</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="accueil">lorem ipsum.....</div>
<div class="tab-pane" id="boutique">lorem ipsum.....</div>
Onglet stylisé
<ul class="nav nav-pills">

Effet progressif

<div class="tab-content">
<div class="tab-pane fade active in" id="#">Texte</div>
<div class="tab-pane fade" id="#">Texte</div>
</div>

Onglets empilés et justifiés

Empiler les onglets
<ul class="nav nav-pills nav-stacked">
Onglets justifiés
<ul class="nav nav-pills nav-justified">

Le menu déroulant

Dans la barre de navigation et dans un bouton

Dans la barre de navigation
<nav class="navbar navbar-default">
<ul class="nav navbar-nav">
<li><a href="#">Accueil</a></li>
<li class="dropdown">
<a data-toggle="dropdown" href="#">Boutique</a>
<ul class="dropdown-menu">
<li><a href="#">Vêtements</a></li>
<li><a href="#">Chaussures</a></li>
</ul>.....
Dans un bouton
<div class="btn-group">
<button class="btn btn-default dropdown-toggle" data-toggle="dropdown">Action</button>
<ul class="dropdown-menu">
<li>...........</li>
Déroulant au-dessus d'un bouton
<div class="btn-group dropup">
<button class="btn btn-default dropdown-toggle"data-toggle="dropdown">
Action</button><span class="caret"></span></button>
<ul class="dropdown-menu">
<li class="dropdown-header">Titre1</li>
<li><a href="#">Sous-titre</a></li>
<li class="divider"></li>
<ul class="nav nav-tabs">
<li class="dropdown"><a class="dropdown-toggle" data-toggle=
"dropdown" href="#">Accueil</li>
<li><a href="#" data-toggle="tab">Boutique></li>

Fenêtre modale

Sur fond gris et avec un pied de page

Sur fond gris
<button data-toggle="modal" href="#" class="btn btn-primary">
Inscriptions</button>
<div class="modal" id="#">
<div clas="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<ul class="dropdown-menu">
<button type="button" class="close" data-dismiss="modal">X</button> <h4 class="modal-title">Inscriptions</h4>
</div>
<div class="modal-body">Lorem ipsum.................</div>
Avec un pied de page
<div class="modal-body">
Lorem ipsum.......... </div>
<div class="modal-footer">
<button class="btn btn-info" data-dismiss="modal">Fermer</button></div>

Effet de transition

<div class="modal fade" id="#">

Sans arrière-plan

<button data-toggle="modal" data-backdrop="false" href="#" class="btn btn-primary">Inscription</button>

Largeur de la fenêtre modale

<div class="modal-dialog modal-lg">
<div class="modal-dialog modal-sm">

Le caroussel

Le caroussel simple

<div class="carousel slide">
<div class="carousel-inner">
<div class="item active"><img src="image.png" alt=""></div>
<div class="item"><img src="image2.png" alt="">
</div>
Initialiser le caroussel avec jQuery
<script>
$(function (){
$('.carousel').carousel();
});
</script>

Titre dans le caroussel

<div class="carousel-inner">
<div class="item active"><img src="image.png" alt="#">
<h1 class="carousel-caption">Titre</h1></div>

Indicateur d'image

<div class="carousel slide" id="carousel">
<ol class="carousel-indicators">
<li data-target="#carousel" data-slide-to="0" class="active"></li>
<li data-target="#carousel" data-slide-to="1"></li>
</ol>

Les boutons de défilement

<div class="item"><img src="image.png" alt="">
<a class="left carousel-control" href="#caroussel"data-slide="prev">
<span class="icon-prev"></span></a>
<a class="right carousel-control" href="#caroussel"data-slide="prev">
<span class="icon-next"></span></a>

L'effet accordéon

Panneau en accordéon

<div class="panel panel-default">
<h4>Titre</h4>
<div class="panel-heading">
<a class="accordion-toggle" href="#item" data-toggle="collapse">
Accordéon</a>
</div>
<div id="item" class="panel panel-collapse">
<div class="panel-body">Effets accordéon</div>

Afficher une zone dans le panneau

<div id="item" class="panem panel-collapse in">
Afficher une zone à la fois
<div id="accordeon" class="panel-group">
<h3>Titre</h3>
<div class="panel panel-default"></div>
<div class="panel-heading">
<h3 class="panel-title">
<a class="accordion-toggle" href="#item"data-parent="#accordeon" data-toggle="collapse">
Accordéon</a>

Délimiter les blocs du panneau

<div class="panel-group">
<h3>Titre</h3>
<div class="panel panel-default"></div>
<div class="panel-heading">
<h3 class="panel-title">
<a class="accordion-toggle" href="#item" data-toggle="collapse">
Accordéon</a>

Effet accordéon sur une liste groupée

<div class="panel panel-info"></div>
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" href="#menu">Titre</a></h4>
<ul id="menu" class="list-group collapse in">
<li class="list-group-item"><a href="#">Articles</a></li>
<li class="list-group-item"><a href="#">Infos</a></li>