Cet article vous indiquera :
- Comment faire des boutons dans Bootstrap ?
- Comment créer des boutons de contour dans Bootstrap ?
- Comment ajuster la taille des boutons Bootstrap ?
- Comment créer un bouton au niveau du bloc dans Bootstrap ?
- Comment créer des boutons d'état actifs dans Bootstrap ?
- Comment créer des boutons d'état désactivés dans Bootstrap ?
Comment faire des boutons dans Bootstrap ?
Le Bootstrap ' btn ” La classe est utilisée pour créer des boutons. Pour ajouter des boutons stylés, vous pouvez utiliser le ' btn ' classe avec la classe de couleur, comme ' btn-succès ” pour créer un bouton vert.
En HTML, le '
Pour un concept clair, consultez l'exemple ci-dessous.
Exemple
Dans le fichier HTML, suivez les étapes pour créer des boutons à l'aide de différentes balises :
- Ajouter '
' et ' « éléments et affectez-les » btn ' et ' btn-primaire ' Des classes. - Ensuite, ajoutez un '
« tag avec le type » bouton ”. Attribuez-lui le ' btn ' et ' btn-succès ” pour styliser les deux premiers boutons en bleu et le troisième en vert :
< un classer = 'btn btn-primaire' href = '#' > Ouvrir < / un >
< contribution taper = 'bouton' classer = 'btn btn-succès' évaluer = 'Rechercher' >
Sortir
Comment créer des boutons de contour dans Bootstrap ?
Pour ajouter des contours de bouton, le Bootstrap ' btn-outline-* ” la classe est utilisée. Dans sa syntaxe, ' * ” représente ici la couleur du contour. Par exemple, ' btn-outline-danger ' place le contour rouge, ' btn-contour-primaire ” définit le contour bleu, et plus encore.
Analysez le code ci-dessous :
< bouton taper = 'bouton' classer = 'btn btn-contour-primaire' >Suivant< / bouton >< bouton taper = 'bouton' classer = 'btn btn-contour-danger' >Annuler< / bouton >
< bouton taper = 'bouton' classer = 'btn btn-contour-succès' >Succès< / bouton >
On peut remarquer que le « Suivant ” a un contour bleu, le bouton “ Annuler ” avec un contour rouge et le bouton “ Succès Le bouton ” a été stylé avec un contour vert :
Comment ajuster la taille des boutons Bootstrap ?
Certaines classes Bootstrap sont appliquées pour ajuster la taille des boutons, telles que :
- ' btn-lg ” la classe est appliquée pour créer un gros bouton. Cette classe peut augmenter la taille de la police et le rembourrage.
- ' btn-md ” crée un bouton de taille moyenne.
- ' btn-sm ” crée un petit bouton.
Exemple
Maintenant, nous allons créer trois boutons avec des tailles différentes et des noms explicites :
< bouton taper = 'bouton' classer = 'btn btn-secondaire btn-lg' >Grand< / bouton >< bouton taper = 'bouton' classer = 'btn btn-avertissement btn-md' >moyen< / bouton >
< bouton taper = 'bouton' classer = 'btn btn-danger btn-sm' >Petit< / bouton >
Sortir
Comment créer un bouton au niveau du bloc dans Bootstrap ?
Les boutons au niveau du bloc sont ceux qui contiennent la taille pleine largeur. Pour créer les boutons au niveau du bloc, le ' bloc btn ” la classe est utilisée comme suit
< bouton taper = 'bouton' classer = 'btn btn-warning btn-block' > bouton < / bouton >< bouton taper = 'bouton' classer = 'btn btn-secondaire btn-bloc' >bouton< / bouton >
Sortir
Comment créer des boutons d'état actifs dans Bootstrap ?
Les boutons d'état actif font référence aux boutons qui sont actuellement actifs. Ces boutons sont légèrement plus foncés que la normale. Pour créer de tels boutons, le Bootstrap ' actif ” la classe est utilisée.
Exemple
Le code ci-dessous crée deux boutons. Le premier est à l'état normal tandis que l'autre est appliqué avec le ' actif ' classer:
< bouton taper = 'bouton' classer = 'btn btn-succès' >Succès< / bouton >< bouton taper = 'bouton' classer = 'btn btn-succès actif' >Succès< / bouton >
Sortir
Comment créer des boutons d'état désactivés dans Bootstrap ?
Les boutons d'état désactivés font référence aux boutons non cliquables et inutilisables. Dans Bootstrap, le ' désactivé ” est utilisée pour créer un bouton d'état désactivé. Les ' désactivé ” L'attribut peut également être utilisé à cette fin.
Exemple
Découvrez l'exemple fourni ci-dessous :
- Le premier bouton n'est pas dans un état désactivé.
- La seconde utilise le ' désactivé ” pour créer un bouton d'état désactivé.
- Le troisième utilise le ' désactivé ' attribut:
< bouton taper = 'bouton' classer = 'btn btn-succès désactivé' >Succès< / bouton >
< bouton taper = 'bouton' classer = 'btn btn-succès' désactivé>Succès< / bouton >
Sortir
Nous avons couvert différents aspects liés aux boutons Bootstrap et à leur style en CSS.
Conclusion
Les ' btn ” La classe est utilisée pour créer des boutons Bootstrap avec un design simple. Pour créer des boutons de couleur et de contour, le ' btn-* ' et ' btn-outline-* ' les classes sont utilisées là où le ' * ” symbolise n'importe quelle classe de couleur. Par exemple, ' btn-avertissement ' crée un bouton jaune, ' btn-contour-avertissement ” crée un bouton entouré de jaune, et bien d'autres. Pour rendre les boutons actifs ou désactivés, les classes « actif » et « désactivé » sont respectivement appliquées. Cet article a fourni un guide complet sur les boutons Bootstrap.