twitter-bootstrap
Boutons
Recherche…
Syntaxe
- Classes: .btn-default | .btn-primary | .btn-success | .btn-info | .btn-warning | .btn-danger | .btn-link;
- Tailles: .btn-lg | .btn-md | .btn-sm | .btn-xs;
- Etat: actif | disséqué.
Classes de boutons
Bootstrap fournit plusieurs classes pour les boutons de style et les fait ressortir.
Les boutons d'amorçage peuvent être créés en ajoutant la classe .btn à un élément.
| Classe Bootstrap | Rôle (couleur) |
|---|---|
.btn-default | Bouton standard (blanc) |
.btn-primary | Fournit un poids visuel supplémentaire et identifie l'action principale (bleu) |
.btn-success | Utilisé pour indiquer une action réussie (vert) |
.btn-info | Bouton contextuel pour fournir des informations (bleu clair) |
.btn-warning | Indique que la prudence doit être appliquée par l'utilisateur (jaune) |
.btn-danger | Indique une action dangereuse ou négative (rouge) |
.btn-link | Faites en sorte que votre bouton ressemble à une balise d'ancrage. |
Taille des boutons
Vous pouvez également créer différentes tailles de boutons avec les classes de .btn-size
| Classe Bootstrap | Résultat |
|---|---|
.btn-lg | Crée un bouton de plus grande taille |
.btn-sm | Crée un bouton de taille plus petite |
.btn-xs | Crée un petit bouton supplémentaire |
.btn-block | Les boutons deviennent des éléments de niveau bloc et couvrent toute la largeur de leur parent |
Activer le bouton
La classe active fera apparaître un bouton pressé.
<button type="button" class="btn btn-primary active">Active Primary</button>
Désactiver un bouton
L'ajout de la classe disabled à un bouton rendra le bouton non cliquable et affichera un curseur interdit lors du survol.
<button type="button" class="btn btn-primary disabled">Disabled Primary</button>
Rendez les boutons horizontalement ensemble
Plusieurs boutons peuvent être rendus horizontalement avec la classe .btn-group . Enveloppez simplement vos boutons dans un élément container et attribuez à cet élément la classe btn-group.
<div class="btn-group">
<button type="button" class="btn btn-primary">Apples</button>
<button type="button" class="btn btn-primary">Oranges</button>
<button type="button" class="btn btn-primary">Pineapples</button>
</div>
Rendu des boutons verticalement
Appliquer la .btn-group-vertical à l'élément conteneur
<div class="btn-group-vertical">
<button type="button" class="btn btn-primary">Apples</button>
<button type="button" class="btn btn-primary">Oranges</button>
<button type="button" class="btn btn-primary">Pineapples</button>
</div>
Faire groupe de boutons prendre toute la largeur
Les boutons enveloppés dans un élément .btn-group ne prennent que la largeur requise. Pour que le groupe .btn-group-justified toute la largeur de l'écran, utilisez .btn-group-justified .
<div class="btn-group btn-group-justified">
<a href="#" class="btn btn-primary">Apples</a>
<a href="#" class="btn btn-primary">Oranges</a>
<a href="#" class="btn btn-primary">Pineapples</a>
</div>