pinterest linkedin behance copy

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.

Sur cette page

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>
Donner du sens aux technologies d'assistance

L'utilisation de la couleur pour ajouter du sens ne fournit qu'une indication visuelle, qui ne sera pas transmise aux utilisateurs de technologies d'assistance, telles que les lecteurs d'écran. Assurez-vous que les informations indiquées par la couleur sont soit évidentes à partir du contenu lui-même (par exemple, le texte visible), soit incluses par des moyens alternatifs, tels que du texte supplémentaire masqué avec la .visually-hidden classe.

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 .text-nowrap classe au bouton. Dans Sass, vous pouvez set $btn-white-space: nowrap désactiver l'habillage du texte pour chaque bouton.

Balises de bouton

Les .btn classes 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.

Link 
<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>
Certains styles de boutons utilisent une couleur de premier plan relativement claire et ne doivent être utilisés que sur un arrière-plan sombre afin d'avoir un contraste suffisant.

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>

État désactivé

Rendez les boutons inactifs en ajoutant l' disabled attribut booléen à n'importe quel <button> élément. Les boutons désactivés se sont pointer-events: none appliqués à, empêchant le survol et les états actifs de se déclencher.

<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 disabled classe pour qu'elle apparaisse visuellement désactivée.
  • Certains styles adaptés à l'avenir sont inclus pour désactiver tous pointer-events les boutons d'ancrage.
  • Les boutons désactivés doivent inclure l' aria-disabled="true" attribut permettant d'indiquer l'état de l'élément aux technologies d'assistance.
Primary link Link 
<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>

La .disabled classe utilise pointer-events: none pour essayer de désactiver la fonctionnalité de lien de s, mais cette propriété CSS n'est pas encore normalisée. De plus, même dans les navigateurs prenant en charge <a>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 pointer-events: none, incluez également un aria-disabled="true" 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é.

Bloquer les boutons

Créez des piles réactives de "boutons de blocage" pleine largeur comme ceux de Bootstrap 4 avec un mélange de nos utilitaires d'affichage et d'écart. En utilisant des utilitaires au lieu de classes spécifiques aux boutons, nous avons un bien meilleur contrôle sur l'espacement, l'alignement et les comportements réactifs.

<div class="d-grid gap-2">
  <button class="btn btn-primary" type="button">Button</button>
  <button class="btn btn-primary" type="button">Button</button>
</div>

Ici, nous créons une variante réactive, en commençant par des boutons empilés verticalement jusqu'au point d' md arrêt, où .d-md-block remplace la .d-grid classe, annulant ainsi l' gap-2 utilité. Redimensionnez votre navigateur pour les voir changer. 

<div class="d-grid gap-2 d-md-block">
  <button class="btn btn-primary" type="button">Button</button>
  <button class="btn btn-primary" type="button">Button</button>
</div>

Vous pouvez ajuster la largeur de vos boutons de bloc avec des classes de largeur de colonne de grille. Par exemple, pour un "bouton bloc" demi-largeur, utilisez .col-6. Centrez-le également horizontalement avec .mx-auto.

<div class="d-grid gap-2 col-6 mx-auto">
  <button class="btn btn-primary" type="button">Button</button>
  <button class="btn btn-primary" type="button">Button</button>
</div>

Des utilitaires supplémentaires peuvent être utilisés pour ajuster l'alignement des boutons lorsqu'ils sont horizontaux. Ici, nous avons repris notre exemple réactif précédent et ajouté quelques utilitaires flexibles et un utilitaire de marge sur le bouton pour aligner à droite les boutons lorsqu'ils ne sont plus empilés.

<div class="d-grid gap-2 d-md-flex justify-content-md-end">
  <button class="btn btn-primary me-md-2" type="button">Button</button>
  <button class="btn btn-primary" type="button">Button</button>
</div>

Plug-in de bouton

Le plugin de bouton vous permet de créer de simples boutons à bascule marche/arrêt.

Visuellement, ces boutons bascule sont identiques aux checkbox toggle buttons à cocher . Cependant, ils sont véhiculés différemment par les technologies d'assistance : les bascules de cases à cocher seront annoncées par les lecteurs d'écran comme "cochées"/"non cochées" (car, malgré leur apparence, ce sont fondamentalement toujours des cases à cocher), alors que ces boutons bascules seront annoncés comme "bouton"/"bouton enfoncé". Le choix entre ces deux approches dépendra du type de bascule que vous créez et du fait que la bascule ait ou non un sens pour les utilisateurs lorsqu'elle est annoncée comme une case à cocher ou comme un bouton réel.

Basculer les états

Ajouter data-bs-toggle="button" pour basculer l'état d'un bouton active Si vous pré-basculez un bouton, vous devez ajouter manuellement la .active classe et aria-pressed="true" vous assurer qu'elle est transmise de manière appropriée aux technologies d'assistance.

<button type="button" class="btn btn-primary" data-bs-toggle="button" autocomplete="off">Toggle button</button>
<button type="button" class="btn btn-primary active" data-bs-toggle="button" autocomplete="off" aria-pressed="true">Active toggle button</button>
<button type="button" class="btn btn-primary" disabled data-bs-toggle="button" autocomplete="off">Disabled toggle button</button>
Toggle link Active toggle link Disabled toggle link 
<a href="#" class="btn btn-primary" role="button" data-bs-toggle="button">Toggle link</a>
<a href="#" class="btn btn-primary active" role="button" data-bs-toggle="button" aria-pressed="true">Active toggle link</a>
<a href="#" class="btn btn-primary disabled" tabindex="-1" aria-disabled="true" role="button" data-bs-toggle="button">Disabled toggle link</a>

Méthodes

Vous pouvez créer une instance de bouton avec le constructeur de bouton, par exemple :

var button = document.getElementById('myButton')
var bsButton = new bootstrap.Button(button)
Méthode Description
toggle Bascule l'état de poussée. Donne au bouton l'apparence qu'il a été activé.
dispose Détruit le bouton d'un élément. (Supprime les données stockées sur l'élément DOM)
getInstance Méthode statique qui permet d'obtenir l'instance du bouton associé à un élément DOM, vous pouvez l'utiliser comme ceci : bootstrap.Button.getInstance(element)
getOrCreateInstance Méthode statique qui renvoie une instance de bouton associée à un élément DOM ou en crée une nouvelle au cas où elle n'aurait pas été initialisée. Vous pouvez l'utiliser comme ceci bootstrap.Button.getOrCreateInstance(element)

Par exemple, pour basculer tous les boutons

var buttons = document.querySelectorAll('.btn')
buttons.forEach(function (button) {
  var button = new bootstrap.Button(button)
  button.toggle()
})

Sass

Variables

$btn-padding-y:               $input-btn-padding-y;
$btn-padding-x:               $input-btn-padding-x;
$btn-font-family:             $input-btn-font-family;
$btn-font-size:               $input-btn-font-size;
$btn-line-height:             $input-btn-line-height;
$btn-white-space:             null; // Set to `nowrap` to prevent text wrapping

$btn-padding-y-sm:            $input-btn-padding-y-sm;
$btn-padding-x-sm:            $input-btn-padding-x-sm;
$btn-font-size-sm:            $input-btn-font-size-sm;

$btn-padding-y-lg:            $input-btn-padding-y-lg;
$btn-padding-x-lg:            $input-btn-padding-x-lg;
$btn-font-size-lg:            $input-btn-font-size-lg;

$btn-border-width:            $input-btn-border-width;

$btn-font-weight:             $font-weight-normal;
$btn-box-shadow:              inset 0 1px 0 rgba($white, .15), 0 1px 1px rgba($black, .075);
$btn-focus-width:             $input-btn-focus-width;
$btn-focus-box-shadow:        $input-btn-focus-box-shadow;
$btn-disabled-opacity:        .65;
$btn-active-box-shadow:       inset 0 3px 5px rgba($black, .125);

$btn-link-color:              $link-color;
$btn-link-hover-color:        $link-hover-color;
$btn-link-disabled-color:     $gray-600;

// Allows for customizing button radius independently from global border radius
$btn-border-radius:           $border-radius;
$btn-border-radius-sm:        $border-radius-sm;
$btn-border-radius-lg:        $border-radius-lg;

$btn-transition:              color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;

$btn-hover-bg-shade-amount:       15%;
$btn-hover-bg-tint-amount:        15%;
$btn-hover-border-shade-amount:   20%;
$btn-hover-border-tint-amount:    10%;
$btn-active-bg-shade-amount:      20%;
$btn-active-bg-tint-amount:       20%;
$btn-active-border-shade-amount:  25%;
$btn-active-border-tint-amount:   10%;

Mixins

Il existe trois mixins pour les boutons : les mixins de variante de contour de bouton et de bouton (tous deux basés sur $theme-colors), plus un mixin de taille de bouton.

@mixin button-variant(
  $background,
  $border,
  $color: color-contrast($background),
  $hover-background: if($color == $color-contrast-light, shade-color($background, $btn-hover-bg-shade-amount), tint-color($background, $btn-hover-bg-tint-amount)),
  $hover-border: if($color == $color-contrast-light, shade-color($border, $btn-hover-border-shade-amount), tint-color($border, $btn-hover-border-tint-amount)),
  $hover-color: color-contrast($hover-background),
  $active-background: if($color == $color-contrast-light, shade-color($background, $btn-active-bg-shade-amount), tint-color($background, $btn-active-bg-tint-amount)),
  $active-border: if($color == $color-contrast-light, shade-color($border, $btn-active-border-shade-amount), tint-color($border, $btn-active-border-tint-amount)),
  $active-color: color-contrast($active-background),
  $disabled-background: $background,
  $disabled-border: $border,
  $disabled-color: color-contrast($disabled-background)
) {
  color: $color;
  @include gradient-bg($background);
  border-color: $border;
  @include box-shadow($btn-box-shadow);

  &:hover {
    color: $hover-color;
    @include gradient-bg($hover-background);
    border-color: $hover-border;
  }

  .btn-check:focus + &,
  &:focus {
    color: $hover-color;
    @include gradient-bg($hover-background);
    border-color: $hover-border;
    @if $enable-shadows {
      @include box-shadow($btn-box-shadow, 0 0 0 $btn-focus-width rgba(mix($color, $border, 15%), .5));
    } @else {
      // Avoid using mixin so we can pass custom focus shadow properly
      box-shadow: 0 0 0 $btn-focus-width rgba(mix($color, $border, 15%), .5);
    }
  }

  .btn-check:checked + &,
  .btn-check:active + &,
  &:active,
  &.active,
  .show > &.dropdown-toggle {
    color: $active-color;
    background-color: $active-background;
    // Remove CSS gradients if they're enabled
    background-image: if($enable-gradients, none, null);
    border-color: $active-border;

    &:focus {
      @if $enable-shadows {
        @include box-shadow($btn-active-box-shadow, 0 0 0 $btn-focus-width rgba(mix($color, $border, 15%), .5));
      } @else {
        // Avoid using mixin so we can pass custom focus shadow properly
        box-shadow: 0 0 0 $btn-focus-width rgba(mix($color, $border, 15%), .5);
      }
    }
  }

  &:disabled,
  &.disabled {
    color: $disabled-color;
    background-color: $disabled-background;
    // Remove CSS gradients if they're enabled
    background-image: if($enable-gradients, none, null);
    border-color: $disabled-border;
  }
}

@mixin button-outline-variant(
  $color,
  $color-hover: color-contrast($color),
  $active-background: $color,
  $active-border: $color,
  $active-color: color-contrast($active-background)
) {
  color: $color;
  border-color: $color;

  &:hover {
    color: $color-hover;
    background-color: $active-background;
    border-color: $active-border;
  }

  .btn-check:focus + &,
  &:focus {
    box-shadow: 0 0 0 $btn-focus-width rgba($color, .5);
  }

  .btn-check:checked + &,
  .btn-check:active + &,
  &:active,
  &.active,
  &.dropdown-toggle.show {
    color: $active-color;
    background-color: $active-background;
    border-color: $active-border;

    &:focus {
      @if $enable-shadows {
        @include box-shadow($btn-active-box-shadow, 0 0 0 $btn-focus-width rgba($color, .5));
      } @else {
        // Avoid using mixin so we can pass custom focus shadow properly
        box-shadow: 0 0 0 $btn-focus-width rgba($color, .5);
      }
    }
  }

  &:disabled,
  &.disabled {
    color: $color;
    background-color: transparent;
  }
}

@mixin button-size($padding-y, $padding-x, $font-size, $border-radius) {
  padding: $padding-y $padding-x;
  @include font-size($font-size);
  // Manually declare to provide an override to the browser default
  @include border-radius($border-radius, 0);
}

Boucles

Les variantes de bouton (pour les boutons réguliers et contours) utilisent leurs mixins respectifs avec notre $theme-colors carte pour générer les classes de modificateurs dans scss/_buttons.scss.

@each $color, $value in $theme-colors {
  .btn-#{$color} {
    @include button-variant($value, $value);
  }
}

@each $color, $value in $theme-colors {
  .btn-outline-#{$color} {
    @include button-outline-variant($value);
  }
}

© 2010-2024 QZYcodes by Quazerty.