Boutons Bootstrap

Dans bootstrap, vous pourrez créer des boutons avec les balises : <a>, <button>, <input>.

Si vous utilisez la balise <a>, il faudra ajouter l'attribut : role="button".

D'après la documentation de Bootstrap, il serait préférable d'utiliser la balise <button> pour obtenir un meilleur rendu

Il y a de même un bug connu sur la hauteur de ligne sur les versions de Firefox <30. En savoir +


<a class="btn btn-default" href="#" role="button">Lien</a>

<button class="btn btn-default" type="submit">Button</button>

<input class="btn btn-default" type="button" value="Input">

<input class="btn btn-default" type="submit" value="Submit">

Lien

Des boutons de couleur

Correspondance des couleurs :

default : par défaut
primary : un peu comme vous voulez
success : une action réussie
info : passer une information
warning : il faut faire attention
danger : annonce un danger

Après, il n'y a pas d'obligation, vous pouvez bien entendu les utiliser comme bon vous semble.


    <button type="button" class="btn btn-default">Default</button>

    <button type="button" class="btn btn-primary">Primary</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-link">Link</button>

Exemple

Taille des boutons

Vous pouvez modifier la taille des boutons avec les classe .btn-lg, .btn-sm, .btn-xs.


    <button type="button" class="btn btn-lg btn-primary">Bouton Primary avec la classe .btn-lg</button>

    <button type="button" class="btn btn-sm btn-primary">Bouton Primary avec la classe .btn-sm</button>

    <button type="button" class="btn btn-xs btn-primary">Bouton Primary avec la classe .btn-xs</button>

Exemple

Si vous voulez un bouton qui prend la totalité de l'élément parent, il faut ajouter la classe .btn-block.


    <button type="button" class="btn btn-primary btn-lg btn-block">Bouton avec la classe .btn-block </button>

    <button type="button" class="btn btn-default btn-lg btn-block">Bouton avec la classe .btn-block </button>

Exemple

Statut activé

Sur un bouton

Les boutons apparaissent enfoncé avec un fond et une bordure plus sombre lorsqu'ils sont actifs

Pour les balises <button>, ca se fait via :active, par contre pour les balises <a>, ça se fait via la classe .active

pas besoin d'ajouter :active comme c'est une pseudo-classe, si vous voulez changer l'apparence, vous pouvez toujours ajouter la classe .active.


        <button type="button" class="btn btn-primary btn-lg active">Primary button </button>
        <button type="button" class="btn btn-default btn-lg active">Button </button>

Exemple

Sur un lien

Il suffit d'ajouter la classe .active sur le lien.


    <a href="#" class="btn btn-primary btn-lg active" role="button" title="Lien 1">Lien 1</a>

    <a href="#" class="btn btn-default btn-lg active" role="button" title="Lien 2">Lien 2</a>

Exemple

Lien 1 Lien 2

Etat désactivé

Sur un bouton

Il suffit d'appliquer la classe .disabled sur la balise button.

<button type="button" class="btn btn-lg btn-primary" disabled="disabled">Bouton désactivé</button>

Exemple

Sur un lien

Il suffit d'appliquer la classe .disabled sur la balise a.


    <a href="#" class="btn btn-primary btn-lg disabled" role="button" title="Lien">Lien</a>

Exemple

Lien