Bootstrap 4 : Buttons

Vous pouvez créer, pour vos applications, de magnifiques boutons avec Bootstrap 4. Il existe différents styles pour illustrer l'action du button.

De façon classique, pour créer un button, il suffit d'utiliser la balise <button> avec la class .btn. A cela, vous pouvez ajouter une class contextuelle .btn-*. Généralement on ajoute aussi un attribut type pour signifier explicitement qu'il s'agit d'un type button mais ce n'est pas nécessaire à tous les coups.

Les boutons usuels :   

         

<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-info">Info</button>								
<button type="button" class="btn btn-warning">Warning</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-light">Light</button>
<button type="button" class="btn btn-dark">Dark</button>
<button type="button" class="btn btn-link">Link</button>

 

D'autres balises comme button

Vous pouvez également appliquer les class de button sur d'autres balises. En fonction du navigateur, le style peut sensiblement être différent mais généralement, vous retrouverez les mêmes styles.

Un lien 

<a class="btn btn-primary" href="#" role="button">Un lien</a>
<button class="btn btn-info" type="submit">Un simple Button</button>
<input class="btn btn-secondary" type="button" value="Un input button">
<input class="btn btn-primary" type="submit" value="Un input submit">

Vous avez remarqué que le couple de class .btn et .btn-* est suffisant pour appliquer un style de button. Au niveau du lien, l'attribut role est important lorsque votre lien n'a pas pour rôle de conduire vers une autre page ou une partie de la page actuelle. Cet attribut renseigne juste que ce lien a en réalité un rôle de button. Il peut par exemple s'agir d'un lien qui déclenche une fonctionnalité avec un script javascript.

 

Taille

Vous pouvez jouer sur les tailles des buttons aisément : 

  

<button type="button" class="btn btn-info btn-sm">Petit</button>
<button type="button" class="btn btn-info btn-lg">Large</button>
<button type="button" class="btn btn-info">Par défaut</button>

 

Button moins encombrant avec bordure

Il existe aussi d'autres styles moins encombrant de couleurs pour les buttons. Il suffit de remplacer les class de contexte .btn-*  par d'autres class de contexte .btn-outline-*

       

<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-info">Info</button>								
<button type="button" class="btn btn-outline-warning">Warning</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-light">Light</button>
<button type="button" class="btn btn-outline-dark">Dark</button>

 

Button activé / désactivé

En fonction de certaines situations, vous pourriez avoir besoin de désactiver un button et donc de rendre par exemple certaines actions impossibles. Visuellement cet état peut être représenté avec l'attribut disabled qui rend l'apparence moins marquée. Dans le même cadre, vous pouvez spécifier aussi qu'un button est actif avec la class active et l'apparence est plus marquée. Regardons ci-dessous ces deux états : 

 

<button type="button" class="btn btn-primary active">Button actif</button>
<button type="button" class="btn btn-primary" disabled>Button inactif</button>

Si vous voulez appliquer l'état inactif sur un lien se comportant comme un button, il faut utiliser la class disabled au lieu de l'attribut:

Lien actif Lien inactif

<a href="#" class="btn btn-primary active" role="button">Lien actif</a>
<a href="#" class="btn btn-primary disabled" role="button">Lien inactif</a>

Button block

Il est possible d'avoir un button block c'est-à-dire un button qui occupe toute la largeur disponible comme ci-dessous :

<button type="button" class="btn btn-primary btn-block">Button block</button>

 

Buttons checkbox et radio

On peut appliquer aussi le style button sur des éléments checkbox et radio d'un formulaire. Il suffit de les entourer d'un conteneur avec les class .btn-groug et .btn-group-toggle et l'attribut data-toggle avec pour valeur buttons :

Checkbox

Choisissez votre saison :

 

<h5>Choisissez votre saison :</h5>
<div class="btn-group btn-group-toggle" data-toggle="buttons">
    <label class="btn btn-secondary">
        <input type="checkbox" name="saison"> Printemps
    </label>
    <label class="btn btn-secondary active">
        <input type="checkbox" name="saison" checked> Hiver
    </label>
    <label class="btn btn-secondary">
        <input type="checkbox" name="saison"> Automne
    </label>
    <label class="btn btn-secondary">
        <input type="checkbox" name="saison"> Eté
    </label>
</div>

Radio

Choisissez votre fruit :

 

<h5>Choisissez votre fruit :</h5>
<div class="btn-group btn-group-toggle" data-toggle="buttons">
    <label class="btn btn-secondary">
        <input type="radio" name="fruits" id="banane"> Banane
    </label>
    <label class="btn btn-secondary active">
        <input type="radio" name="fruits" id="orange" checked> Orange
    </label>
    <label class="btn btn-secondary">
        <input type="radio" name="fruits" id="mangue"> Mangue
    </label>
</div>

Partager :
comments powered by Disqus

Suivez-moi sur Twitter

Copyright © 2010-2019 Lookman Design, tous droits réservés .