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">