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>
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 désigné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-nowrap
classe au bouton. Dans Sass, vous pouvez $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).
Lors de l'utilisation de classes de boutons sur <a>
des éléments qui sont utilisés pour déclencher des fonctionnalités dans 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-lg
ou .btn-sm
pour 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'disabled
attribut, 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.
<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>
Mise en garde sur la fonctionnalité de lien
La .disabled
classe utilise pointer-events: none
pour essayer de désactiver la fonctionnalité de lien de <a>
s, mais cette propriété CSS n'est pas encore normalisée. 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é.
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 responsive 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.
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>
<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 | La 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()
})
Toupet
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%;
Mélanges
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);
}
}