Download WordPress Themes, Happy Birthday Wishes

Bootstrap Bouton

Il existe sept styles pour ajouter un bouton dans Bootstrap. Utilisez les classes suivantes pour obtenir les différents styles de bouton:

  • .btn-default
  • .btn-primaire
  • .btn-success
  • .btn-info
  • .btn-warning
  • .btn-danger
  • .btn-link

Exemple de bouton bootstrap.

<!DOCTYPE html>  
<html lang="en">  
  <head>  
     <title>Job</title>  
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/>  
  </head>  
  <body>  
    <h1>Button Example!</h1>  
  
<button class="btn btn-default">default</button>  
<button class="btn btn-primary">primary</button>  
<button class="btn btn-danger">danger</button>  
<button class="btn btn-success">success</button>  
<button class="btn btn-info">info</button>  
<button class="btn btn-warning">warning</button>  
<button class="btn btn-link">Link</button>  
  
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>  
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>  
  </body>  
</html>

Résultat :

Bootstrap - bouton

Il existe 3 types de nouveaux boutons ajoutés dans Bootstrap 4 ainsi que 7 boutons donnés dans Bootstrap 3.

Ces 3 boutons sont:

  • Secondary
  • Dark
  • Light

Les classes suivantes sont utilisées pour les spécifier respectivement:

<button type="button" class="btn btn-secondary">Secondary</button>  
<button type="button" class="btn btn-dark">Dark</button>  
<button type="button" class="btn btn-light">Light</button>

Exemple:

Voyons tous les boutons supportés dans Bootstrap 4.

<!DOCTYPE html>  
<html lang="en">  
<head>  
  <title>Bootstrap Exemple</title>  
  <meta charset="utf-8">  
  <meta name="viewport" content="width=device-width, initial-scale=1">  
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">  
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>  
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.6/umd/popper.min.js"></script>  
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>  
</head>  
<body>  
  
<div class="container">  
  <h2>Button Styles</h2>  
  <button type="button" class="btn">Basic</button>  
  <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-info">Info</button>  
  <button type="button" class="btn btn-warning">Warning</button>  
  <button type="button" class="btn btn-danger">Danger</button>  
  <button type="button" class="btn btn-dark">Dark</button>  
  <button type="button" class="btn btn-light">Light</button>  
  <button type="button" class="btn btn-link">Link</button>        
</div>  
  
</body>  
</html>

Résultat :

style-bouton-bootstrap

Taille du bouton Bootstrap

Dans Bootstrap, vous pouvez choisir un bouton en fonction de vos besoins. Il fournit quatre tailles de bouton.

Les classes suivantes définissent les différentes tailles:

  • .btn-lg
  • .btn-md
  • .btn-sm
  • .btn-xs

Exemple:

<!DOCTYPE html>  
<html lang="en">  
<head>  
  <title>Bootstrap Exemple</title>  
  <meta charset="utf-8">  
  <meta name="viewport" content="width=device-width, initial-scale=1">  
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">  
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>  
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>  
</head>  
<body>  
  
<div class="container">  
  <h2>Button Sizes</h2>  
  <button type="button" class="btn btn-primary btn-lg">Large</button>  
  <button type="button" class="btn btn-primary btn-md">Medium</button>      
  <button type="button" class="btn btn-primary btn-sm">Small</button>  
  <button type="button" class="btn btn-primary btn-xs">XSmall</button>  
</div>  
  
</body>  
</html>

Résultat :

Bootstrap - Taille des boutons

Boutons Bootstrap Actif / Inactif

Vous pouvez définir un bouton désactivé ou non cliquable.

La classe .active est utilisée pour faire apparaître un bouton enfoncé et la classe .disabled rend un bouton non cliquable:

Exemple:

<!DOCTYPE html>  
<html lang="en">  
<head>  
  <title>Bootstrap Example</title>  
  <meta charset="utf-8">  
  <meta name="viewport" content="width=device-width, initial-scale=1">  
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">  
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>  
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>  
</head>  
<body>  
  
<div class="container">  
  <h2>Button States</h2>  
  <button type="button" class="btn btn-primary">Primary Button</button>  
  <button type="button" class="btn btn-primary active">Active Primary</button>  
  <button type="button" class="btn btn-primary disabled">Disabled Primary</button>  
</div>  
  
</body>  
</html>

Résultat :

bootstrap-bouton-active

Boutons Contour / Bordures

Bootstrap 4 fournit huit boutons de contour / bordures:

Exemple

<!DOCTYPE html>  
<html lang="en">  
<head>  
  <title>Bootstrap Example</title>  
  <meta charset="utf-8">  
  <meta name="viewport" content="width=device-width, initial-scale=1">  
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">  
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>  
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.6/umd/popper.min.js"></script>  
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>  
</head>  
<body>  
  
<div class="container">  
  <h2>Button Outline/ Bordered Buttons</h2>  
  <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-info">Info</button>  
  <button type="button" class="btn btn-outline-warning">Warning</button>  
  <button type="button" class="btn btn-outline-danger">Danger</button>  
  <button type="button" class="btn btn-outline-dark">Dark</button>  
  <button type="button" class="btn btn-outline-light text-dark">Light</button>  
</div>  
  
</body>  
</html>

Résultat :

Bootstrap - contour et bordures