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 :
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 :
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 :
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.
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 :
Exemple : dans l’exemple de code pratique ci-dessous, nous avons montré comment créer des boutons de contour dans Bootstrap :
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 :
L’exemple de code pratique suivant montre comment utiliser différentes classes de taille de bouton d’amorçage :
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 :
Dans Bootstrap 4, vous pouvez rendre un bouton actif (comme s’il était cliqué) ou inactif (non cliquable), comme les deux boutons suivants :
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.
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 :
Dans l’exemple de code pratique suivant, nous avons montré comment utiliser la classe spinner Spinrer dans un bouton bootstrap et sa sortie :
Dans un EHPAD, chaque candidature révèle une manière d’être autant qu’un savoir-faire. Derrière la lettre…
Télécharger des modèles et exemples Word de lettres de motivation pour mutation interne ⬇️ Au…
Télécharger des modèles et exemples de lettres de motivation pour promotion interne ⬇️ Rédiger une…
Dans beaucoup d’organisations, la production semble avancer sans difficulté. Les ordres circulent, les équipes exécutent,…
À mesure que les systèmes industriels gagnent en complexité, une évidence s’impose avec une clarté…
Le simulateur Kanban flux tiré ⬇️ en ligne permet de traduire les paramètres clés d’un…
This website uses cookies.