Introduction aux boutons Bootstrap 3

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.

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

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

Il est egalement possible de d’utiliser le HTML via l’attribut disabled=”disabled” de la balise <boutton>:

Les boutons désactivés s’affichent à l’écran de la manière suivante :

Bouton Bootstrap 3 inactifs

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 :

Résultat du code :

Tailles d'un bouton Bootstrap3

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.

Laisser un commentaire