Boutons

Utilisez les styles de boutons personnalisés de Bootstrap pour les actions dans les formulaires, les boîtes de dialogue, etc., avec la prise en charge de plusieurs tailles, états, etc.

Exemples

Bootstrap comprend plusieurs styles de boutons prédéfinis, chacun servant son propre objectif sémantique, avec quelques extras ajoutés pour plus de contrôle.

<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-dark">Dark</button>

<button type="button" class="btn btn-link">Link</button>

Désactiver l'habillage du texte

Si vous ne voulez pas que le texte du bouton soit renvoyé à la ligne, vous pouvez ajouter la .text-nowrapclasse au bouton. Dans Sass, vous pouvez $btn-white-space: nowrapdésactiver l'habillage du texte pour chaque bouton.

Balises de bouton

Les .btnclasses sont conçues pour être utilisées avec l' <button>élément. Cependant, vous pouvez également utiliser ces classes sur des éléments <a>ou <input>(bien que certains navigateurs puissent appliquer un rendu légèrement différent).

Lorsque vous utilisez des classes de boutons sur <a>des éléments qui sont utilisés pour déclencher des fonctionnalités sur la page (comme la réduction du contenu), plutôt que de créer des liens vers de nouvelles pages ou sections de la page actuelle, ces liens doivent recevoir un role="button"pour transmettre de manière appropriée leur objectif aux technologies d'assistance telles que lecteurs d'écran.

<a class="btn btn-primary" href="#" role="button">Link</a>
<button class="btn btn-primary" type="submit">Button</button>
<input class="btn btn-primary" type="button" value="Input">
<input class="btn btn-primary" type="submit" value="Submit">
<input class="btn btn-primary" type="reset" value="Reset">

Boutons de contour

Vous avez besoin d'un bouton, mais pas des couleurs d'arrière-plan lourdes qu'ils apportent ? Remplacez les classes de modificateur par défaut par .btn-outline-*celles qui suppriment toutes les images et couleurs d'arrière-plan sur n'importe quel bouton.

<button type="button" class="btn btn-outline-primary">Primary</button>
<button type="button" class="btn btn-outline-secondary">Secondary</button>
<button type="button" class="btn btn-outline-success">Success</button>
<button type="button" class="btn btn-outline-danger">Danger</button>
<button type="button" class="btn btn-outline-warning">Warning</button>
<button type="button" class="btn btn-outline-info">Info</button>
<button type="button" class="btn btn-outline-light">Light</button>
<button type="button" class="btn btn-outline-dark">Dark</button>

Tailles

Envie de boutons plus grands ou plus petits ? Ajoutez .btn-lgou .btn-smpour des tailles supplémentaires.

<button type="button" class="btn btn-primary btn-lg">Large button</button>
<button type="button" class="btn btn-secondary btn-lg">Large button</button>

<button type="button" class="btn btn-primary btn-sm">Small button</button>
<button type="button" class="btn btn-secondary btn-sm">Small button</button>

Créez des boutons au niveau du bloc (ceux qui s'étendent sur toute la largeur d'un parent) en ajoutant .btn-block.

<button type="button" class="btn btn-primary btn-lg btn-block">Block level button</button>
<button type="button" class="btn btn-secondary btn-lg btn-block">Block level button</button>

État actif

Les boutons apparaîtront enfoncés lorsqu'ils sont actifs avec un arrière-plan plus sombre, une bordure plus sombre et, lorsque les ombres sont activées, une ombre incrustée. Il n'est pas nécessaire d'ajouter une classe à <button>s car ils utilisent une pseudo-classe . Cependant, vous pouvez toujours forcer la même apparence active avec .active(et inclure l' aria-pressed=“true”attribut) si vous devez répliquer l'état par programmation.

<a href="#" class="btn btn-primary btn-lg active" role="button" aria-pressed="true">Primary link</a>
<a href="#" class="btn btn-secondary btn-lg active" role="button" aria-pressed="true">Link</a>

État désactivé

Rendez les boutons inactifs en ajoutant l' disabledattribut booléen à n'importe quel <button>élément.

<button type="button" class="btn btn-lg btn-primary" disabled>Primary button</button>
<button type="button" class="btn btn-secondary btn-lg" disabled>Button</button>

Les boutons désactivés utilisant l' <a>élément se comportent un peu différemment :

• <a>s ne prennent pas en charge l' disabledattribut, vous devez donc ajouter la .disabledclasse pour qu'elle apparaisse visuellement désactivée.
• Certains styles adaptés à l'avenir sont inclus pour désactiver tous pointer-eventsles boutons d'ancrage. Dans les navigateurs qui prennent en charge cette propriété, vous ne verrez pas du tout le curseur désactivé.
• Les boutons désactivés utilisant <a>doivent inclure l' aria-disabled="true"attribut pour indiquer l'état de l'élément aux technologies d'assistance.
• Les boutons désactivés utilisant <a> ne doivent pas inclure l' hrefattribut.

<a class="btn btn-primary btn-lg disabled" role="button" aria-disabled="true">Primary link</a>
<a class="btn btn-secondary btn-lg disabled" role="button" aria-disabled="true">Link</a>

Mise en garde sur la fonctionnalité de lien

Pour couvrir les cas où vous devez conserver l' hrefattribut sur un lien désactivé, la .disabledclasse utilise pointer-events: nonepour essayer de désactiver la fonctionnalité de lien de <a>s. Notez que cette propriété CSS n'est pas encore normalisée pour HTML, mais tous les navigateurs modernes la prennent en charge. De plus, même dans les navigateurs prenant en charge pointer-events: none, la navigation au clavier reste inchangée, ce qui signifie que les utilisateurs de clavier voyants et les utilisateurs de technologies d'assistance pourront toujours activer ces liens. Donc, pour être sûr, en plus de aria-disabled="true", incluez également un tabindex="-1"attribut sur ces liens pour les empêcher de recevoir le focus du clavier et utilisez un JavaScript personnalisé pour désactiver complètement leur fonctionnalité.

<a href="#" class="btn btn-primary btn-lg disabled" tabindex="-1" role="button" aria-disabled="true">Primary link</a>
<a href="#" class="btn btn-secondary btn-lg disabled" tabindex="-1" role="button" aria-disabled="true">Link</a>

Plug-in de bouton

Faites-en plus avec les boutons. Contrôlez les états des boutons ou créez des groupes de boutons pour plus de composants comme les barres d'outils.

Basculer les états

Ajouter data-toggle="button"pour basculer l'état d'un bouton active. Si vous pré-basculez un bouton, vous devez ajouter manuellement la .activeclasse et aria-pressed="true" le fichier <button>.

<button type="button" class="btn btn-primary" data-toggle="button" aria-pressed="false">
  Single toggle
</button>

Case à cocher et boutons radio

Les styles de Bootstrap .buttonpeuvent être appliqués à d'autres éléments, tels que <label>s, pour fournir une case à cocher ou un bouton de style radio. Ajoutez data-toggle="buttons"à un .btn-groupcontenant ces boutons modifiés pour activer leur comportement de basculement via JavaScript et ajoutez .btn-group-toggleau style le <input>s dans vos boutons. Notez que vous pouvez créer des boutons alimentés par une seule entrée ou des groupes d'entre eux.

L'état coché de ces boutons n'est mis à jour que via clickun événement sur le bouton. Si vous utilisez une autre méthode pour mettre à jour l'entrée, par exemple, avec <input type="reset">ou en appliquant manuellement la propriété de l'entrée, vous checkeddevrez activer manuellement..active<label>

Notez que les boutons pré-cochés nécessitent que vous ajoutiez manuellement la .activeclasse au fichier <label>.

<div class="btn-group-toggle" data-toggle="buttons">
  <label class="btn btn-secondary active">
    <input type="checkbox" checked> Checked
  </label>
</div>

<div class="btn-group btn-group-toggle" data-toggle="buttons">
  <label class="btn btn-secondary active">
    <input type="radio" name="options" id="option1" checked> Active
  </label>
  <label class="btn btn-secondary">
    <input type="radio" name="options" id="option2"> Radio
  </label>
  <label class="btn btn-secondary">
    <input type="radio" name="options" id="option3"> Radio
  </label>
</div>

Méthodes