Le framework Bootstrap 3 a été développé dans le but de faciliter la création et l’intégration des sites web. Les boutons est l’un des composants les plus utilisés dans la création des sites web (couramment dans les formulaires). Bootstrap 3 mis à la dispositions de ses utilisateurs, une bibliothèques complète pour créer des boutons élégants et personnalisable, totalement compatibles avec les navigateurs les plus courants.
Créer un bouton avec la classe .btn
La classe .btn, s’emploie indépendamment de la balise utilisée. L’exemple ci-dessous, montre les différentes méthodes prises en charge par Bootstrap 3 pour créer un bouton.
|
1 2 3 4 5 6 7 |
<!-- www.opentuto.com --> <!-- Lien hypertext sous form d'un bouton --> <a class="btn btn-default" href="http://www.opentuto.com">Page d'accueil du site</a> <button class="btn btn-default" type="submit">Balise button</button> <input class="btn btn-default" type="button" value="Balise input de type boutton, type input"> <input class="btn btn-default" type="submit" value="Balise input de type submit, type submit"> |
Il est recommandé de n’utiliser les boutons obtenus grave à la balise <input> que dans les formulaires.
Les boutons s’affichent de la manière suivante :
bouton Bootstrap3 avec la classe .btn
Créer un bouton inactifs
Dans certains sites web dynamiques, il est souvent nécessaire d’attendre un événement ou une action (ex: chargement des fichiers .js, remplir les champs d’un formulaire) avant d’offrir la possibilité de cliquer sur un bouton.
Dans ce cas, il est nécessaire de désactiver un Bouton. Bootstrap 3, grâce à la classe .disabled vous permet créer un bouton désactive
|
1 |
<button class="btn btn-default disabled" type="submit">Bouton désactivé - classe .disabled</button> |
Il est egalement possible de d’utiliser le HTML via l’attribut disabled=”disabled” de la balise <boutton>:
|
1 |
<button class="btn btn-default" disabled="disabled" type="submit">Bouton désactivé - attribut disabled</button> |
Les boutons désactivés s’affichent à l’écran de la manière suivante :
Bouton Bootstrap 3 inactifs
Choisissez la taille d’un bouton
Bootstrap 3 offre au développeur la possibilité de créer des boutons de tailles différentes en couplant la classe .btn avec les classes suivantes:
Exemple d’utilisation :
|
1 2 3 4 |
<button type="button" class="btn btn-default btn-lg">Grand</button> <button type="button" class="btn btn-default">normal</button> <button type="button" class="btn btn-default btn-sm">Petit</button> <button type="button" class="btn btn-default btn-xs">Très petit</button> |
Résultat du code :
Tailles d’un bouton Bootstrap3
Dans cette Introduction aux boutons Bootstrap 3, nous avons découvrt la création des boutons et boutons désactivés sans se soucie à la compatibilités entre les navigateurs.
Advertisement