Bootstrap Boutons
Ce chapitre expliquera comment utiliser les boutons Bootstrap à travers des exemples. Tout élément avec la classe.btnhéritera de l'apparence par défaut des boutons gris arrondis. Cependant, Bootstrap fournit quelques options pour définir les styles de boutons, comme indiqué dans le tableau ci-dessous :
Les styles suivants peuvent être utilisés sur les éléments <a>, <button> ou <input> :
| Classe |
Description |
Exemple |
| .btn |
Ajouter des styles de base aux boutons |
Essayez-le |
| .btn-default |
Bouton par défaut/standard |
Essayez-le |
| .btn-primary |
Style de bouton principal (non actif) |
Essayez-le |
| .btn-success |
Indique une action réussie |
Essayez-le |
| .btn-info |
Ce style peut être utilisé pour les boutons qui affichent des informations |
Essayez-le |
| .btn-warning |
Indique un bouton qui nécessite une manipulation prudente |
Essayez-le |
| .btn-danger |
Indique qu'un bouton déclenche une action dangereuse |
Essayez-le |
| .btn-link |
Faire ressembler le bouton à un lien (tout en conservant le comportement de bouton) |
Essayez-le |
| .btn-lg |
Créer un grand bouton |
Essayez-le |
| .btn-sm |
Créer un petit bouton |
Essayez-le |
| .btn-xs |
Créer un bouton extra petit |
Essayez-le |
| .btn-block |
Bouton de niveau bloc (étiré sur 100% de la largeur de l'élément parent) |
Essayez-le |
| .active |
Le bouton est cliqué |
Essayez-le |
| .disabled |
Bouton désactivé |
Essayez-le |
Les exemples suivants illustrent toutes les classes de boutons ci-dessus :
Exemple
<button type="button" class="btn btn-default">Bouton par défaut</button>
<button type="button" class="btn btn-primary">Bouton principal</button>
<button type="button" class="btn btn-success">Bouton de succès</button>
<button type="button" class="btn btn-info">Bouton d'information</button>
<button type="button" class="btn btn-warning">Bouton d'avertissement</button>
<button type="button" class="btn btn-danger">Bouton de danger</button>
<button type="button" class="btn btn-link">Bouton lien</button>
Essayez-le »
Le résultat est le suivant :
Le tableau suivant répertorie les classes permettant d'obtenir des boutons de différentes tailles :
| Classe | Description |
|---|
| .btn-lg | Cela fera paraître le bouton plus grand. |
| .btn-sm | Cela fera paraître le bouton plus petit. |
| .btn-xs | Cela donnera au bouton un aspect extra petit. |
| .btn-block | Cela crée un bouton de niveau bloc qui s'étend sur toute la largeur de l'élément parent. |
L'exemple suivant illustre toutes les classes de bouton ci-dessus :
Exemple
<p>
<button type="button" class="btn btn-primary btn-lg">Grand bouton primaire</button>
<button type="button" class="btn btn-default btn-lg">Grand bouton</button>
</p>
<p>
<button type="button" class="btn btn-primary">Bouton primaire de taille par défaut</button>
<button type="button" class="btn btn-default">Bouton de taille par défaut</button>
</p>
<p>
<button type="button" class="btn btn-primary btn-sm">Petit bouton primaire</button>
<button type="button" class="btn btn-default btn-sm">Petit bouton</button>
</p>
<p>
<button type="button" class="btn btn-primary btn-xs">Bouton primaire très petit</button>
<button type="button" class="btn btn-default btn-xs">Bouton très petit</button>
</p>
<p>
<button type="button" class="btn btn-primary btn-lg btn-block">Bouton primaire de niveau bloc</button>
<button type="button" class="btn btn-default btn-lg btn-block">Bouton de niveau bloc</button>
</p>
Essayez-le »
Le résultat est le suivant :
Bootstrap fournit des classes pour les états des boutons tels que active et disabled, qui seront expliquées en détail ci-dessous.
État actif
Lorsqu'un bouton est actif, il apparaîtra enfoncé (fond plus sombre, bordure plus sombre et ombre).
Le tableau suivant répertorie les classes qui font apparaître les éléments bouton et les éléments ancre comme actifs :
| Élément | Classe |
|---|
| Élément bouton | Ajoutez la classe.activepour montrer qu'il est actif. |
| Élément ancre | Ajoutez la classe .activeau bouton <a> pour montrer qu'il est actif. |
L'exemple suivant le démontre :
Exemple
<p>
<button type="button" class="btn btn-default btn-lg ">Bouton par défaut</button>
<button type="button" class="btn btn-default btn-lg active">Bouton actif</button>
</p>
<p>
<button type="button" class="btn btn-primary btn-lg ">Bouton primaire</button>
<button type="button" class="btn btn-primary btn-lg active">Bouton primaire actif</button>
</p>
Essayez-le vous-même »
Le résultat est le suivant :
État désactivé
Lorsque vous désactivez un bouton, sa couleur s'estompe de 50% et il perd son dégradé.
Le tableau suivant répertorie les classes qui font apparaître les éléments button et les éléments anchor comme désactivés :
| Élément | Classe |
|---|
| Élément bouton | Ajoutezdisabled en tant qu'attributau bouton <button>. |
| Élément ancre | Ajoutezdisabled en tant que classeau bouton <a>. |
L'exemple suivant le démontre :
Exemple
<p>
<button type="button" class="btn btn-default btn-lg">Bouton par défaut</button>
<button type="button" class="btn btn-default btn-lg" disabled="disabled">Bouton désactivé</bouton>
</p>
<p>
<button type="button" class="btn btn-primary btn-lg ">Bouton primaire</bouton>
<bouton type="button" class="btn btn-primary btn-lg" disabled="disabled">Bouton primaire désactivé</bouton>
</p>
<p>
<a href="#" class="btn btn-default btn-lg" role="button">Lien</a>
<a href="#" class="btn btn-default btn-lg disabled" role="button">Lien désactivé</a>
</p>
<p>
<a href="#" class="btn btn-primary btn-lg" role="button">Lien principal</a>
<a href="#" class="btn btn-primary btn-lg disabled" role="button">Lien principal désactivé</a>
</p>
Essayez-le vous-même »
Le résultat est le suivant :
Vous pouvez utiliser les classes de bouton sur les éléments <a>, <button> ou <input>. Cependant, il est recommandé d'utiliser les classes de bouton sur les éléments <button> pour éviter les incohérences entre navigateurs.
L'exemple suivant le démontre :
Exemple
<a class="btn btn-default" href="#" role="button">Lien</a>
<button class="btn btn-default" type="submit">Bouton</button>
<input class="btn btn-default" type="button" value="Saisie">
<input class="btn btn-default" type="submit" value="Envoyer">
Essayez-le vous-même »
Le résultat est le suivant :
Groupes de boutons
Utilisez .btn-group directement dans un div pour créer un groupe de boutons :
Exemple
<div class="btn-group">
<button type="button" class="btn btn-primary">Apple</button>
<button type="button" class="btn btn-primary">Samsung</button>
<button type="button" class="btn btn-primary">Sony</button>
</div>
Essayez-le vous-même »
Utilisez .btn-group-lg|sm|xs pour contrôler la taille du groupe de boutons :
Exemple
<div class="btn-group btn-group-lg">
<button type="button" class="btn btn-primary">Apple</button>
<button type="button" class="btn btn-primary">Samsung</button>
<button type="button" class="btn btn-primary">Sony</button>
</div>
Essayez-le vous-même »
Pour créer des boutons empilés verticalement, utilisez la classe .btn-group-vertical :
Exemple
<div class="btn-group-vertical">
<button type="button" class="btn btn-primary">Apple</button>
<button type="button" class="btn btn-primary">Samsung</button>
<button type="button" class="btn btn-primary">Sony</button>
</div>
Essayez-le vous-même »
Groupes de boutons responsives
Vous pouvez créer des groupes de boutons justifiés avec la classe .btn-group-justified.
L'exemple suivant utilise une balise a pour démontrer :
Exemple
<div class="btn-group btn-group-justified">
<a href="#" class="btn btn-primary">Apple</a>
<a href="#" class="btn btn-primary">Samsung</a>
<a href="#" class="btn btn-primary">Sony</a>
</div>
Essayez-le vous-même »
Remarque :S'il s'agit d'un<button>élément, vous devez utiliser sur la couche externe.btn-groupclass pour envelopper :
Exemple
<div class="btn-group btn-group-justified">
<div class="btn-group">
<button type="button" class="btn btn-primary">Apple</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-primary">Samsung</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-primary">Sony</button>
</div>
</div>
Essayez-le vous-même »
Groupes de boutons avec menus déroulants
Les boutons au sein d'un groupe de boutons peuvent avoir des menus déroulants, comme dans l'exemple suivant :
Exemple
<div class="btn-group">
<button type="button" class="btn btn-primary">Apple</button>
<button type="button" class="btn btn-primary">Samsung</button>
<div class="btn-group">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
Sony <span class="caret"></span></button>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Tablette</a></li>
<li><a href="#">Smartphone</a></li>
</ul>
</div>
</div>
Essayez-le vous-même »
Boutons divisés
Exemple
<div class="btn-group">
<button type="button" class="btn btn-primary">Sony</button>
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Tablette</a></li>
<li><a href="#">Smartphone</a></li>
</ul>
</div>
Essayez-le vous-même »
Autres extensions
