Composants

Menus déroulants 

<ul class="dropdown-menu">
    <li><a href="#">Élément de menu</a></li>
    <li><a href="#">Élément de menu</a></li>
    <li><a href="#">Élément de menu</a></li>
</ul>
Insérer le menu déroulant dans un conteneur .dropdown ou tout autre élément disposant d'une position:relative.
<div class="dropdown">
	<!-- lien ou bouton de contrôle du menu déroulant -->
	<ul class="dropdown-menu">
        <li><a href="#">Élément de menu</a></li>
        <li><a href="#">Élément de menu</a></li>
        <li><a href="#">Élément de menu</a></li>
    </ul>
</div>

Contrôle du menu déroulant

Insérer un lien ou un bouton disposant de l'attribut data-toggle="dropdown" avant le menu déroulant.

<div class="dropdown">
    <button class="btn btn-default" data-toggle="dropdown" type="button">Menu déroulant</button>
	<ul class="dropdown-menu">
	    <li><a href="#">Élément de menu</a></li>
	    <li><a href="#">Élément de menu</a></li>
	    <li><a href="#">Élément de menu</a></li>
	</ul>
</div>

Désactiver un élément du menu

Ajouter la classe .disabled sur l'élément <li> contenant le lien à désactiver.
<ul class="dropdown-menu">
	<li class="disabled"><a href="#">Élément de menu</a></li>
	<li><a href="#">Élément de menu</a></li>
	<li><a href="#">Élément de menu</a></li>
</ul>

Navigation

Par défaut

Appliquer .nav sur une liste non ordonnée.
<ul class="nav">
    <li><a href="#">Accueil</a></li>
	<li><a href="#">Boutique</a></li>
	<li><a href="#">Compte</a></li>
</ul>

Sous-menu

<ul class="nav subnav-menu">
	<li><a href="#">Nouveautés</a></li>
	<li><a href="#">Promotions</a></li>
	<li><a href="#">Catalogue</a></li>
</ul>
Insérer le menu déroulant dans un élément <li> disposant de la classe .subnav.
<ul class="nav">
	<li class="subnav">
	    <!-- lien de contrôle du sous-menu -->
	    <ul class="nav subnav-menu">
	        <li><a href="#">Élément de menu</a></li>
	        <li><a href="#">Élément de menu</a></li>
	        <li><a href="#">Élément de menu</a></li>
	    </ul>
	</li>
</ul>

Contrôle du sous-menu

Insérer un lien disposant de l'attribut data-toggle="subnav" avant le sous-menu.

<ul class="nav">
	<li><a href="#">Accueil</a></li>
	<li class="subnav">
	    <a data-toggle="subnav" href="#boutique">Boutique</a>
	    <ul class="nav subnav-menu">
	        <li><a href="#">Nouveautés</a></li>
	        ...
	    </ul>
	</li>
    <li class="subnav">
	    <a data-toggle="subnav" href="#compte">Compte</a>
	    <ul class="nav subnav-menu">
	        <li><a href="#">Profil</a></li>
	        ...
	    </ul>
	</li>
</ul>

Sous-menu imbriqué

<ul class="nav">
	<li><a href="#">Accueil</a></li>
	<li class="subnav">
	    <a data-toggle="subnav" href="#boutique">Boutique</a>
	    <ul class="nav subnav-menu">
	        <li><a href="#">Nouveautés</a></li>
	        <li><a href="#">Promotions</a></li>
	        <li class="subnav">
	            <a data-toggle="subnav" href="#catalogue">Catalogue</a>
	            <ul class="nav subnav-menu">
	                <li><a href="#">Homme</a></li>
	                <li><a href="#">Femme</a></li>
	                <li><a href="#">Enfant</a></li>
	            </ul>
	        </li>
	    </ul>
	</li>
	<li class="subnav">
	    <a data-toggle="subnav" href="#compte">Compte</a>
	    <ul class="nav subnav-menu">
	        <li><a href="#">Profil</a></li>
	        <li><a href="#">Avatar</a></li>
	        <li><a href="#">E-mail</a></li>
	    </ul>
	</li>
</ul>

Onglets

Ajouter la classe .nav-tabs à une liste de navigation.
<ul class="nav nav-tabs">
	<li class="active"><a href="#">Accueil</a></li>
	<li><a href="#">Boutique</a></li>
	<li><a href="#">Compte</a></li>
	<li class="disabled"><a href="#">Désactivé</a></li>
</ul>

Barre de navigation

Ajouter la classe .navbar-nav à la barre de navigation puis l'insérer dans un conteneur .navbar.

L'affichage des sous-menus diffère en fonction de la résolution :

  • Au click sur le lien de contrôle du sous-menu si la résolution est inférieure 992px 
  • Au survol sur le lien de contrôle du sous-menu si la résolution est supérieure ou égale à 992px
<nav class="navbar">
	<ul class="nav navbar-nav">
	    ...
	</ul>
</nav>

Barre de navigation responsive

Insérer la barre de navigation dans un conteneur .collapse puis ajouter le bouton de contrôle de la barre de navigation, .navbar-toggle.

Insérer l'ensemble dans un conteneur .navbar.

<div class="navbar">
	<button data-toggle="collapse" data-target=".nav-collapse" class="btn btn-default navbar-toggle">
	    <i class="fa fa-bars fa-lg"></i>
	</button>
	<nav class="nav-collapse collapse">
	    <ul class="nav navbar-nav">
	        ...
	    </ul>
	</nav>
</div>

Contenu de la barre de navigation

Insérer le contenu de la barre de navigation et le bouton de contrôle dans un conteneur .navbar-header.

Titre du site
<div class="navbar">
	<div class="navbar-header">
	    <strong>Titre du site</strong>
	    <button data-toggle="collapse" data-target=".nav-collapse2" class="btn btn-default navbar-toggle">
	        <i class="fa fa-bars fa-lg"></i>
	    </button>
	</div>
	<nav class="nav-collapse2 collapse">
	    <ul class="nav navbar-nav">
	        ...
	    </ul>
	</nav>
</div>

Fil d'Ariane

Appliquer la classe .breadcrumb sur une liste ordonnée.
  1. Accueil
  2. Boutique
  3. Nouveautés
<ol class="breadcrumb">
	  <li><a href="#">Accueil</a></li>
	  <li><a href="#">Boutique</a></li>
	  <li>Nouveautés</li>
</ol>

Étapes de progression

Appliquer la classe .steps sur une liste ordonnée.
  1. Panier
  2. Commande
  3. Paiement
  4. Confirmation
<ol class="steps">
	<li><a href="#">Panier</a></li>
	<li><a href="#">Commande</a></li>
	<li class="active"><span>Paiement</span></li>
	<li><span>Confirmation</span></li>
</ol>

Badges

Déclinaisons  
Défaut <span class="badge">Défaut</span>
Info <span class="badge bg-info">Défaut</span>
Succès <span class="badge bg-success">Succès</span>
Attention <span class="badge bg-warning">Attention</span>
Erreur <span class="badge bg-error">Erreur</span>
Facebook <span class="badge bg-facebook">Défaut</span>
Google plus <span class="badge bg-google-plus">Attention</span>
Instagram <span class="badge bg-instagram">Erreur</span>
Pinterest <span class="badge bg-pinterest">Erreur</span>
Twitter <span class="badge bg-twitter">Succès</span>
Youtube <span class="badge bg-youtube">Succès</span>

Dans un élément texte

Fusce dapibus tellus ac cursus commodo 10

<p>Fusce dapibus tellus ac cursus commodo <span class="badge">10</span></p>

Dans un élément de navigation

<ul class="nav">
	<li><a href="#">Accueil</a></li>
	<li class="subnav">
	    <a data-toggle="subnav" href="#">Boutique <span class="badge">10</span></a>
	    <ul class="nav subnav-menu">
	        ...
	    </ul>
	</li>
	<li><a href="#">Compte <span class="badge">20</span></a></li>
</ul>

Barre de progression

60%
<div class="progress">
	   <div class="progress-bar" style="width:60%">60%</div>
</div>

Variantes

20%
<div class="progress">
	<div class="progress-bar bg-info" style="width:20%">20%</div>
</div>
40%
<div class="progress">
	<div class="progress-bar bg-success" style="width:40%">40%</div>
</div>
60%
<div class="progress">
	<div class="progress-bar bg-warning" style="width:60%">60%</div>
</div>
80%
<div class="progress">
	<div class="progress-bar bg-error" style="width:80%">80%</div>
</div>

Alertes

Primaire Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.
<div class="alert-primary">
	<strong>Primaire </strong> Fusce dapibus, tellus ac cursus commodo, <a href="#">tortor mauris</a> nibh.
</div>
Info Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.
<div class="alert-info">
	<strong>Info </strong> Fusce dapibus, tellus ac cursus commodo, <a href="#">tortor mauris</a> nibh.
</div>
Succès Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.
<div class="alert-success">
	<strong>Succès </strong> Fusce dapibus, tellus ac cursus commodo, <a href="#">tortor mauris</a> nibh.
</div>
Attention Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.
<div class="alert-warning">
	<strong>Attention </strong> Fusce dapibus, tellus ac cursus commodo, <a href="#">tortor mauris</a> nibh.
</div>
Erreur Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.
<div class="alert-error">
	<strong>Erreur </strong> Fusce dapibus, tellus ac cursus commodo, <a href="#">tortor mauris</a> nibh.
</div>

Réseaux sociaux

Facebook Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.
<div class="alert-facebook">
	<strong>facebook </strong> Fusce dapibus, tellus ac cursus commodo, <a href="#">tortor mauris</a> nibh.
</div>
Google plus  Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.
<div class="alert-google-plus">
	<strong>Google plus </strong> Fusce dapibus, tellus ac cursus commodo, <a href="#">tortor mauris</a> nibh.
</div>
Instagram  Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.
<div class="alert-instagram">
	<strong>Instagram </strong> Fusce dapibus, tellus ac cursus commodo, <a href="#">tortor mauris</a> nibh.
</div>
Pinterest  Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.
<div class="alert-pinterest">
	<strong>Pinterest </strong> Fusce dapibus, tellus ac cursus commodo, <a href="#">tortor mauris</a> nibh.
</div>
Twitter Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.
<div class="alert-twitter">
    <strong>Twitter </strong> Fusce dapibus, tellus ac cursus commodo, <a href="#">tortor mauris</a> nibh.
</div>
Youtube Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.
<div class="alert-youtube">
    <strong>Twitter </strong> Fusce dapibus, tellus ac cursus commodo, <a href="#">tortor mauris</a> nibh.
</div>

Panel

Mise en forme d'un contenu dans une boîte.

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

<div class="panel">
	<div class="panel-body">...</div>
</div>

Boîte avec entête.

Nulla vel metus scelerisque ante sollicitudin commodo

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

<div class="panel">
	<div class="panel-heading">...</div>
	<div class="panel-body">...</div>
</div>

Media

Facilite la mise en page de contenu disposant d'une image, d'un titre et d'un contenu, tel un billet de blog ou un listing de produits.

Insérer l'élément dans un conteneur .media-list.

<ul class="media-list">
	<li class="media">
	    <div class="media-object">
	        <img src="..." width="140" height="140">
        </div>
	    <div class="media-body">
    	    <p class="h4 media-heading">Titre de l'élément</p>
    	    <ul class="media-infos">
                <li>Publié le 10/04/2016</li>
                <li>Dans Voyages</li>
            </ul>
    	    <div class="media-content">
    	        ...
            </div>
        </div>
    </li>
	...
</ul>

Mode liste

Ajouter la classe .media-stacked à une liste d'éléments.

  • Img

    Titre de l'élément

    • Publié le 10/04/2016
    • Dans Voyages
    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
  • Img

    Titre de l'élément

    • Publié le 10/04/2016
    • Dans Voyages
    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
  • Img

    Titre de l'élément

    • Publié le 10/04/2016
    • Dans Voyages
    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
<ul class="media-list media-stacked">
	<li class="media">...</li>
	...
</ul>

Liste imbriquée

  • Img

    Titre de l'élément

    • Publié le 10/04/2016
    • Dans Voyages
    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
    • Img

      Titre de l'élément

      • Publié le 10/04/2016
      • Dans Voyages
      Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
  • Img

    Titre de l'élément

    • Publié le 10/04/2016
    • Dans Voyages
    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
<ul class="media-list media-stacked">
	<li class="media">
	    ...
	    <div class="media-body">
	        <ul class="media-list media-stacked">
	            ...
	        </ul>
	    </div>
	</li>
	...
</ul>

Mode vignettes

Ajouter la classe .media-thumbnails à une liste d'éléments.

  • Img

    Titre de l'élément

    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo.
  • Img

    Titre de l'élément

    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo.
  • Img

    Titre de l'élément

    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo.
  • Img

    Titre de l'élément

    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo.
  • Img

    Titre de l'élément

    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo.
<ul class="media-list media-thumbnails">
	<li class="media">...</li>
	...
</ul>

Mode Masonry

Ajouter la classe .media-masonry à une liste d'éléments. Les éléments s'affichent verticalement et sur deux colonnes dès 768px de large.

  • Titre de l'élément

    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Integer sit amet rutrum sapien. Duis fermentum quam varius erat elementum venenatis. Vestibulum vel mollis erat. Integer interdum accumsan ante, vel semper libero eleifend sit amet. Ut massa velit, viverra vel interdum eu, aliquet sed quam. Aliquam porttitor elementum risus ut sollicitudin.

  • Titre de l'élément

    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Integer sit amet rutrum sapien. Duis fermentum quam varius erat elementum venenatis. Vestibulum vel mollis erat.

  • Titre de l'élément

    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo.

  • Titre de l'élément

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla faucibus pretium scelerisque. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Integer sit amet rutrum sapien. Duis fermentum quam varius erat elementum venenatis. Vestibulum vel mollis erat. Integer interdum accumsan ante, vel semper libero eleifend sit amet. Ut massa velit, viverra vel interdum eu, aliquet sed quam. Aliquam porttitor elementum risus ut sollicitudin. Curabitur pretium euismod diam a congue.

  • Titre de l'élément

    Cras scelerisque nunc eu consequat sodales. Etiam ut rutrum quam. Maecenas non nisl id ipsum pretium ullamcorper. Donec ut est in ligula porta efficitur sed et eros. Duis et lacinia velit. Suspendisse in ante elementum, dignissim dui eget, iaculis mi. Vestibulum eleifend tempus venenatis.

  • Titre de l'élément

    Duis congue sodales nibh, vel egestas ante ornare ornare. Aenean elit mauris, dignissim sed eros egestas, sagittis accumsan diam. Praesent viverra dui quis justo imperdiet maximus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi dignissim dolor molestie consectetur aliquam.
<ul class="media-list media-masonry">
	<li class="media">...</li>
	...
</ul>

Vidéo

Tout élément <iframe>, <embed>, <video> ou <object> placé dans un conteneur .video-container sera redimensionné proportionnellement

<div class="video-container">
    <iframe src="..." frameborder="0" allowfullscreen></iframe>
</div>

Divers

Classes utiles

.pull-left

Insérer un élément flottant à gauche.

<span class="pull-left">...</span>

.pull-right

Insérer un élément flottant à droite.

<span class="pull-right">...</span>

.clearfix

Annuler l'éventuel dépassement vertical d'un élément flottant.

<div class="clearfix">
	<span class="pull-left">...</span>
</div>

.hide

Cacher un élément via display:none.

<span class="hide">...</span>