Le Tutoriel de Bootstrap Button

Bootstrap Button
Outline buttons
La taille de Button
Le statut active & disabled

1. Bootstrap Button

Bootstrap a construit dans certaines classes Css pour créer un Button, avec quelques styles pour différents buts contextuels, y compris la classe principale: .btn, et quelques classes supplémentaires pour définir la couleur, la taille, le statut ...

Simple Button

<button class="btn">Simple Button</button>

Il existe plusieurs classes Css supplémentaires pour définir la couleur du Button ou afficher le Button en tant que Link. Vous pouvez l'utiliser dans différents contextes.

btn-primary
btn-secondary
btn-success
btn-danger
btn-warning
btn-info
btn-light
btn-dark
btn-link

button-example.html

<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8">
      <title>Button Example</title>
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
   </head>
   <body>

      <div class="container mt-3">
         <button class="btn btn-primary">Primary</button>
         <button class="btn btn-secondary">Secondary</button>
         <button class="btn btn-success">Success</button>
         <button class="btn btn-danger">Danger</button>
         <button class="btn btn-warning">Warning</button>
         <button class="btn btn-info">Info</button>
         <button class="btn btn-light">Light</button>
         <button class="btn btn-dark">Dark</button>
         <button class="btn btn-link">Link</button>
      </div>

      <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
   </body>
</html>

Des classes .btn, .btn-* sont conçues pour des étiquettes (tag) <button>, mais vous pouvez également les utiliser pour des étiquettes <a>, <input>, <div>, <span>, même si elles peuvent être légèrement différentes pour les différents navigateurs.

Remarque : Si vous voulez créer un Button avec les autres étiquettes à part de <button>, vous devriez utiliser l'attribut role="button". Cet attribut (attribute) est utile pour l'appareil tel que Screen Reader (le dispositif de lecture d'écran pour les aveugle).

<a class="btn btn-primary m-1" href="#" role="button">Button (A tag)</a>
<button class="btn btn-primary m-1" type="submit">Button (Button tag)</button>
<div class="btn btn-primary m-1" role="button">Button (Div tag)</div>
<span class="btn btn-primary m-1" role="button">Button (Span tag)</span>

2. Outline buttons

Dans le Bootstrap, Button a la couleur d'arrière-plan par défaut. Si vous voulez avoir un simple Button sans couleur d'arrière-plan, veuillez utiliser les classes .btn-outline- *.

outline buttons

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

3. La taille de Button

Par défaut, les Button dans le Bootstrap obtiennent une taille médiaire (Medium). Utilisez la classe .btn-sm si vous voulez avoir un Button de taille plus petite. Utilisez la classe .btn-lg si vous voulez obtenir un Button de taille plus grande.

<button class="btn btn-sm">Small Size .btn-sm</button>
<button class="btn btn-md">Medium Size .btn-md (Default)</button>
<button class="btn">(Default)</button>
<button class="btn btn-lg">Large Size .btn-lg</button>

La classe .btn-block permet la longueur de Button à remplir (fill) la largeur de l'élément parent.

<button class="btn btn-primary btn-block">.btn-block</button>
<button class="btn btn-block btn-warning">.btn-block</button>

4. Le statut active & disabled

.active

Utilisez la classe .active pour qu'un Button ait le statut comme s'il était actif (active). Pour Bootstrap un Button qui est "active" aura une couleur plus sombre que celui dans un état normal.

Vous pouvez voir la figure suivante pour trouver la différence entre un Button en état actif et celui en état normal :

.active

<button class="btn btn-primary active">.btn-primary .active</button>
<button class="btn btn-primary">.btn-primary</button>
<br>
<button class="btn btn-outline-primary active">.btn-outline-primary .active</button>
<button class="btn btn-outline-primary">.btn-outline-primary</button>
<br>
<button class="btn btn-success active">.btn-succes .active</button>
<button class="btn btn-success">.btn-succes</button>
<br>
<button class="btn btn-outline-success active">.btn-outline-success .active</button>
<button class="btn btn-outline-success">.btn-outline-success</button>

.disabled

Lorsqu'un utilisateur utilise la classe .disabled pour désactiver un Button, cet utilisateur ne peut pas intéagir avec ce Button.