Non classétutoriel Bootstrap

Tutoriel Bootstrap 4: Comment travailler avec le bouton ?

Bienvenue dans ce nouveau tutoriel  tutoriel Bootstrap

Le framework Bootstrap 4 a plusieurs styles et couleurs de boutons différents, chacun pouvant être utilisé dans un but spécifique. Par exemple, un bouton est adapté à l’opération de vérification et l’autre bouton est destiné à avertir l’utilisateur du danger.
Dans la figure ci-dessous, nous avons montré différents types de boutons Bootstrap 4 avec différentes apparences :

Bootstrap

Exemple : Dans l’exemple de code pratique ci-dessous, nous avons montré comment créer différents types de boutons Bootstrap 4 avec sa sortie :

Bootstrap

Vous pouvez appliquer des classes Button spéciales dans Bootstrap aux balises de lien , aux boutons et aux zones de saisie
. Dans l’exemple de code pratique ci-dessous, il est montré comment faire cela dans différentes balises dans sa sortie :

Bootstrap

Astuces : Pourquoi met-on # dans la propriété adresse de certains liens (href) ?
S’il n’y a pas d’adresse spécifique pour un lien et que vous ne voulez pas que l’utilisateur voie l’erreur de page introuvable (Erreur 404) en cliquant dessus, vous pouvez mettre un caractère # dans l’adresse ou la propriété href du lien. Dans les modèles de conception plus professionnels, il est préférable de diriger ces liens vers la page de recherche du site.

Tutoriel sur la création de boutons de contour incolores dans Bootstrap 4 :


En plus des boutons colorés que nous avons mentionnés dans la section précédente, Bootstrap 4 a également introduit huit modèles de boutons incolores avec des bordures et du texte coloré, que vous pouvez voir dans la figure ci-dessous :

Bootstrap

Exemple : dans l’exemple de code pratique ci-dessous, nous avons montré comment créer des boutons de contour dans Bootstrap :

Bootstrap

Comment déterminer la taille du Boutton

En utilisant 3 classes .btn-lg (gros bouton), .btn (taille normale) et btn-sm (petit bouton), vous pouvez déterminer la taille des boutons dans Bootstrap 4, comme indiqué ci-dessous :

Bootstrap

L’exemple de code pratique suivant montre comment utiliser différentes classes de taille de bouton d’amorçage :

Bootstrap

Comment créer un bouton pleine largeur

Si vous ajoutez la classe .btn-block, le bouton sera affiché en pleine largeur et occupera toute la largeur de son élément ou de sa page englobante. Nous avons montré comment utiliser cette classe et sa sortie dans l’exemple de code pratique ci-dessous :

Bootstrap
Bootstrap

Comment créer un bouton actif/inactif dans Bootstrap 4 :


Dans Bootstrap 4, vous pouvez rendre un bouton actif (comme s’il était cliqué) ou inactif (non cliquable), comme les deux boutons suivants :

Bootstrap

La classe .active affiche le bouton souhaité comme actif (comme s’il avait été cliqué) et la classe .disabled le désactive afin que l’utilisateur ne puisse pas cliquer dessus.
Faites attention que la balise ne supporte pas l’attribut disabled en HTML, utilisez donc la classe disabled. Dans celui-ci, il ne montrera que le lien comme inactif et en pratique, il sera cliquable.

Comment créer des boutons rotatifs


Dans Bootstrap 4, vous pouvez ajouter des icônes de spinner (Spinrer) à un bouton, pour plus d’informations, allez à Travailler avec des spinners dans Bootstrap 4.
La figure suivante montre les types de boutons Bootstrap 4 avec un bouton rotatif :

Bootstrap

Dans l’exemple de code pratique suivant, nous avons montré comment utiliser la classe spinner Spinrer dans un bouton bootstrap et sa sortie :

Autres articles

Les Types de Connecteurs : Une Classification...
Les connecteurs sont des mots ou des expressions qui assurent...
Read more
Exercices Corrigés : Exécution d’un Projet
Ces exercices permettent de mettre en œuvre le plan, surveiller...
Read more
Lettre d’Intention d’Achat : Exemples dans Word
La lettre d'intention d'achat est un document officiel utilisé dans...
Read more

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *