devstory

Le Tutoriel de Bootstrap Button

Suivez-nous sur notre fanpage pour recevoir des notifications chaque fois qu'il y a de nouveaux articles. Facebook

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.
.disabled

<button class="btn btn-primary disabled">.btn-primary .disabled</button>
<button class="btn btn-primary">.btn-primary</button>
<br>
<button class="btn btn-outline-primary disabled">.btn-outline-primary .disabled</button>
<button class="btn btn-outline-primary">.btn-outline-primary</button>
<br>
<button class="btn btn-success disabled">.btn-succes .disabled</button>
<button class="btn btn-success">.btn-succes</button>
<br>
<button class="btn btn-outline-success disabled">.btn-outline-success .disabled</button>
<button class="btn btn-outline-success">.btn-outline-success</button>
Peut-être que vous êtes intéressé

Voici des leçons en ligne à part du site web o7planning que nous recommandons. La liste comprend des leçons en ligne et celles en promo.