Bootstrap - Boutons
Ce chapitre couvre l'âge d'utilisation du bouton Bootstrap avec des exemples. Tout ce qui reçoit une classe de.btnhéritera de l'aspect par défaut d'un bouton gris aux coins arrondis. Cependant, Bootstrap fournit certaines options de style des boutons, qui sont résumées dans le tableau suivant -
| N ° Sr. | Classe et description |
|---|---|
| 1 | btn Bouton par défaut / standard. |
| 2 | btn-primary Fournit un poids visuel supplémentaire et identifie l'action principale dans un ensemble de boutons. |
| 3 | btn-success Indique une action réussie ou positive. |
| 4 | btn-info Bouton contextuel pour les messages d'alerte d'information. |
| 5 | btn-warning Indique que des précautions doivent être prises avec cette action. |
| 6 | btn-danger Indique une action dangereuse ou potentiellement négative. |
| sept | btn-link Désaccentuez un bouton en le faisant ressembler à un lien tout en conservant le comportement du bouton. |
L'exemple suivant montre toutes les classes de boutons ci-dessus -
<!-- Standard button -->
<button type = "button" class = "btn btn-default">Default Button</button>
<!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
<button type = "button" class = "btn btn-primary">Primary Button</button>
<!-- Indicates a successful or positive action -->
<button type = "button" class = "btn btn-success">Success Button</button>
<!-- Contextual button for informational alert messages -->
<button type = "button" class = "btn btn-info">Info Button</button>
<!-- Indicates caution should be taken with this action -->
<button type = "button" class = "btn btn-warning">Warning Button</button>
<!-- Indicates a dangerous or potentially negative action -->
<button type = "button" class = "btn btn-danger">Danger Button</button>
<!-- Deemphasize a button by making it look like a link while maintaining button behavior -->
<button type = "button" class = "btn btn-link">Link Button</button>Taille du bouton
Le tableau suivant résume les classes utilisées pour obtenir des boutons de différentes tailles -
| N ° Sr. | Classe et description |
|---|---|
| 1 | .btn-lg Cela rend la taille du bouton grande. |
| 2 | .btn-sm Cela rend la taille du bouton petite. |
| 3 | .btn-xs Cela rend la taille du bouton très petite. |
| 4 | .btn-block Cela crée des boutons de niveau de bloc, ceux qui couvrent toute la largeur d'un parent. |
L'exemple suivant illustre ceci -
<p>
<button type = "button" class = "btn btn-primary btn-lg">
Large Primary button
</button>
<button type = "button" class = "btn btn-default btn-lg">
Large button
</button>
</p>
<p>
<button type = "button" class = "btn btn-primary">
Default size Primary button
</button>
<button type = "button" class = "btn btn-default">
Default size button
</button>
</p>
<p>
<button type = "button" class = "btn btn-primary btn-sm">
Small Primary button
</button>
<button type = "button" class = "btn btn-default btn-sm">
Small button
</button>
</p>
<p>
<button type = "button" class = "btn btn-primary btn-xs">
Extra small Primary button
</button>
<button type = "button" class = "btn btn-default btn-xs">
Extra small button
</button>
</p>
<p>
<button type = "button" class = "btn btn-primary btn-lg btn-block">
Block level Primary button
</button>
<button type = "button" class = "btn btn-default btn-lg btn-block">
Block level button
</button>
</p>État du bouton
Bootstrap fournit des classes qui vous permettent de changer l'état des boutons en tant qu'actifs, désactivés, etc. dont chacune est abordée dans les sections suivantes.
État actif
Les boutons apparaîtront enfoncés (avec un arrière-plan plus sombre, une bordure plus sombre et une ombre en médaillon) lorsqu'ils sont actifs. Le tableau suivant résume les classes utilisées pour rendre les éléments de bouton et les éléments d'ancrage actifs -
| Élément | Classe |
|---|---|
| Élément Button | Utilisation .active class pour montrer qu'il est activé. |
| Élément d'ancrage | Utilisation .active classe aux boutons <a> pour montrer qu'il est activé. |
L'exemple suivant illustre ceci -
<p>
<button type = "button" class = "btn btn-default btn-lg ">
Default Button
</button>
<button type = "button" class = "btn btn-default btn-lg active">
Active Button
</button>
</p>
<p>
<button type = "button" class = "btn btn-primary btn-lg">
Primary button
</button>
<button type = "button" class = "btn btn-primary btn-lg active">
Active Primary button
</button>
</p>État désactivé
Lorsque vous désactivez un bouton, sa couleur s'estompe de 50% et perd le dégradé.
Le tableau suivant résume les classes utilisées pour désactiver l'élément bouton et l'élément d'ancrage -
| Élément | Classe |
|---|---|
| Élément Button | Ajouter le disabled attribuer aux boutons <button>. |
| Élément d'ancrage | Ajouter le disabled classe aux boutons <a>. Note- Cette classe ne changera que l'apparence de <a>, pas sa fonctionnalité. Vous devez utiliser JavaScript personnalisé pour désactiver les liens ici. |
L'exemple suivant illustre ceci -
<p>
<button type = "button" class = "btn btn-default btn-lg">
Default Button
</button>
<button type = "button" class = "btn btn-default btn-lg" disabled = "disabled">
Disabled Button
</button>
</p>
<p>
<button type = "button" class = "btn btn-primary btn-lg">
Primary button
</button>
<button type = "button" class = "btn btn-primary btn-lg" disabled = "disabled">
Disabled Primary button
</button>
</p>
<p>
<a href = "#" class = "btn btn-default btn-lg" role = "button">
Link
</a>
<a href = "#" class = "btn btn-default btn-lg disabled" role = "button">
Disabled Link
</a>
</p>
<p>
<a href = "#" class = "btn btn-primary btn-lg" role = "button">
Primary link
</a>
<a href = "#" class = "btn btn-primary btn-lg disabled" role = "button">
Disabled Primary link
</a>
</p>Balises de bouton
Vous pouvez utiliser des classes de boutons avec l'élément <a>, <button> ou <input>. Mais il est recommandé de l'utiliser avec les éléments <button> principalement pour éviter les problèmes d'incohérence entre navigateurs.
L'exemple suivant illustre ceci -
<a class = "btn btn-default" href = "#" role = "button">Link</a>
<button class = "btn btn-default" type = "submit">Button</button>
<input class = "btn btn-default" type = "button" value = "Input">
<input class = "btn btn-default" type = "submit" value = "Submit">