Composants Bootstrap pour l'interface utilisateur

  1. Icônes Glyphicons

Les icônes ne doivent pas être utilisées directement avec d'autres composants. Il faut les placer dans un élément <span> dédié, sans texte ni enfant.

<button class="btn btn-default" aria-label="Aligner à gauche">
  <span class="glyphicon glyphicon-align-left" aria-hidden="true"></span>
</button>

<button class="btn btn-default btn-lg">
  <span class="glyphicon glyphicon-star" aria-hidden="true"></span> Étoile
</button>

<div class="alert alert-danger" role="alert">
  <span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span>
  <span class="sr-only">Erreur :</span>
  Saisissez une adresse e-mail valide
</div>
  1. Menus déroulants

2.1 Utilisation de base

<div class="dropdown">
  <button class="btn btn-default dropdown-toggle" id="menu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
    Menu
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" aria-labelledby="menu1">
    <li><a href="#">Action</a></li>
    <li><a href="#">Autre action</a></li>
    <li><a href="#">Quelque chose d'autre</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Lien séparé</a></li>
  </ul>
</div>

Ajoutez .dropup au parent pour ouvrir vers le haut.

2.2 Alignement

Utilisez .dropdown-menu-right pour aligner à droite.

2.3 Titres et séparateurs

Ajoutez .dropdown-header pour les titres et .divider pour les séparateurs.

2.4 Éléments désactivés

Ajoutez .disabled au <li> pour désactiver un élément.

  1. Groupes de boutons

3.1 Usage simple

<div class="btn-group" role="group" aria-label="...">
  <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>
</div>

3.2 Barre d'outils

Encapsulez plusieurs .btn-group dans .btn-toolbar.

3.3 Tailles

Utilisez .btn-group-lg, .btn-group-sm, .btn-group-xs.

3.4 Groupes imbriqués avec menu déroulant

<div class="btn-group">
  <button class="btn btn-default">1</button>
  <button class="btn btn-default">2</button>
  <div class="btn-group">
    <button class="btn btn-default dropdown-toggle" data-toggle="dropdown">
      Menu <span class="caret"></span>
    </button>
    <ul class="dropdown-menu">
      <li><a href="#">Lien</a></li>
    </ul>
  </div>
</div>

3.5 Disposition verticale

Utilisez .btn-group-vertical.

3.6 Boutons justifiés

Pour les <a>, utilisez .btn-group-justified. Pour les <button>, encapsulez chaque bouton dans un .btn-group.

  1. Boutons avec menu déroulant

4.1 Bouton unique

<div class="btn-group">
  <button class="btn btn-default dropdown-toggle" data-toggle="dropdown">
    Action <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    <li><a href="#">Action</a></li>
  </ul>
</div>

4.2 Bouton partagé

<div class="btn-group">
  <button class="btn btn-danger">Action</button>
  <button class="btn btn-danger dropdown-toggle" data-toggle="dropdown">
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">...</ul>
</div>

4.3 Tailles

Ajoutez .btn-lg, .btn-sm, .btn-xs au bouton.

4.4 Menu vers le haut

Ajoutez .dropup au .btn-group.

  1. Groupes d'entrée (Input groups)

5.1 Usage de base

<div class="input-group">
  <span class="input-group-addon">@</span>
  <input type="text" class="form-control" placeholder="Utilisateur">
</div>

<div class="input-group">
  <input type="text" class="form-control" placeholder="Destinataire">
  <span class="input-group-addon">@exemple.com</span>
</div>

<div class="input-group">
  <span class="input-group-addon">$</span>
  <input type="text" class="form-control">
  <span class="input-group-addon">.00</span>
</div>

5.2 Tailles

Utilisez .input-group-lg, .input-group-sm.

5.3 Cases à cocher et boutons radio

<div class="input-group">
  <span class="input-group-addon">
    <input type="checkbox">
  </span>
  <input type="text" class="form-control">
</div>

5.4 Boutons comme addon

Utilisez .input-group-btn.

5.5 Menus déroulants comme addon

Placez un .dropdown dans .input-group-btn.

  1. Onglets de navigation

6.1 Onglets classiques

<ul class="nav nav-tabs">
  <li class="active"><a href="#">Accueil</a></li>
  <li><a href="#">Profil</a></li>
  <li><a href="#">Messages</a></li>
</ul>

6.2 Onglets en pilules

Utilisez .nav-pills. Ajoutez .nav-stacked pour la verticale.

6.3 Justifiés

Ajoutez .nav-justified.

6.4 Éléments désactivés

Ajoutez .disabled au <li>.

6.5 Avec menu déroulant

<ul class="nav nav-tabs">
  <li class="dropdown">
    <a class="dropdown-toggle" data-toggle="dropdown" href="#">
      Menu <span class="caret"></span>
    </a>
    <ul class="dropdown-menu">...</ul>
  </li>
</ul>
  1. Barre de navigation (Navbar)

7.1 Structure de base

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navcollapse">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Marque</a>
    </div>
    <div class="collapse navbar-collapse" id="navcollapse">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Lien</a></li>
      </ul>
    </div>
  </div>
</nav>

7.2 Logo

Remplacez le texte par une image dans .navbar-brand.

7.3 Formulaire

Utilisez .navbar-form.

7.4 Bouton simple

Ajoutez .navbar-btn.

7.5 Texte

Utilisez .navbar-text.

7.6 Liens non-navigation

Utilisez .navbar-link.

7.7 Alignement

Utilisez .navbar-left et .navbar-right.

7.8 Fixation

.navbar-fixed-top, .navbar-fixed-bottom, .navbar-static-top.

7.9 Inverse

Utilisez .navbar-inverse.

  1. Fil d'Ariane
<ol class="breadcrumb">
  <li><a href="#">Accueil</a></li>
  <li><a href="#">Bibliothèque</a></li>
  <li class="active">Données</li>
</ol>
  1. Pagination

9.1 Pagination classique

<nav aria-label="Navigation">
  <ul class="pagination">
    <li><a href="#" aria-label="Précédent"><span aria-hidden="true">&laquo;</span></a></li>
    <li><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#" aria-label="Suivant"><span aria-hidden="true">&raquo;</span></a></li>
  </ul>
</nav>

Ajoutez .disabled et .active aux <li>. Utilisez .pagination-lg ou .pagination-sm pour les tailles.

9.2 Navigateur de pages

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

Ajoutez .previous et .next pour aligner. .disabled pour désactiver.

  1. Étiquettes (Labels)
<h3>Exemple <span class="label label-default">Nouveau</span></h3>
<span class="label label-primary">Principal</span>
<span class="label label-success">Succès</span>
  1. Badges
<a href="#">Boîte de réception <span class="badge">42</span></a>
<button class="btn btn-primary">Messages <span class="badge">4</span></button>
  1. Jumbotron
<div class="jumbotron">
  <h1>Bonjour le monde !</h1>
  <p>Contenu</p>
  <p><a class="btn btn-primary btn-lg" href="#">En savoir plus</a></p>
</div>
  1. En-tête de page (Page header)
<div class="page-header">
  <h1>Titre <small>Sous-titre</small></h1>
</div>
  1. Vignettes (Thumbnails)

14.1 Simple

<div class="row">
  <div class="col-xs-6 col-md-3">
    <a class="thumbnail" href="#">
      <img src="..." alt="...">
    </a>
  </div>
</div>

14.2 Avec contenu

<div class="thumbnail">
  <img src="..." alt="...">
  <div class="caption">
    <h3>Légende</h3>
    <p>Description</p>
    <a class="btn btn-primary" href="#">Bouton</a>
  </div>
</div>
  1. Alertes
<div class="alert alert-success" role="alert">Succès</div>
<div class="alert alert-info" role="alert">Info</div>
<div class="alert alert-warning" role="alert">Attention</div>
<div class="alert alert-danger" role="alert">Danger</div>

Ajoutez .alert-dismissible et un bouton de fermeture.

Utilisez .alert-link dans les liens.

  1. Barres de progression
<div class="progress">
  <div class="progress-bar" style="width:60%;" role="progressbar"></div>
</div>

Ajoutez du texte à l'intérieur. Utilisez .progress-bar-success, .progress-bar-striped, .active pour animation. Superposez plusieurs barres.

  1. Objets média
<div class="media">
  <div class="media-left">
    <a href="#"><img class="media-object" src="..." alt="..."></a>
  </div>
  <div class="media-body">
    <h4 class="media-heading">Titre</h4>
    <p>Contenu</p>
  </div>
</div>

Alignez avec .media-middle, .media-bottom. Uitlisez .media-list pour les listes.

  1. Groupes de liste
<ul class="list-group">
  <li class="list-group-item">Élément 1</li>
  <li class="list-group-item">Élément 2</li>
</ul>

Ajoutez des badges. Utilisez <div> avec a ou button. .disabled pour désactiver. .list-group-item-* pour les couleurs.

  1. Panneaux
<div class="panel panel-default">
  <div class="panel-heading">Titre</div>
  <div class="panel-body">Contenu</div>
</div>

Ajoutez .panel-footer. Utilisez .panel-primary, etc. Intégrez des tableaux ou des listes.

  1. Contenu intégré réactif
<div class="embed-responsive embed-responsive-16by9">
  <iframe class="embed-responsive-item" src="..."></iframe>
</div>
  1. Wells
<div class="well">Contenu</div>
<div class="well well-lg">Grand</div>
<div class="well well-sm">Petit</div>

Étiquettes: Bootstrap Glyphicons Dropdowns Button Groups Navigation

Publié le 11 juin à 18h37

Étiquettes Populaires

©2026 L'Atelier Monstre