Les boutons classiques

Le dossier à télécharger pour ces exemples est nommé 09-Boutons-01.

1. Les boutons simples BOUTONS:Simples

Pour ce premier exemple, nous allons insérer trois boutons avec les trois éléments utilisables avec la classe .btn : <a>, <input> et <button>.

Voici le code utilisé dans cet exemple :

<a class="btn btn-primary" href="#" role="button">Elément 
&lt;a&gt;</a> 
<button class="btn btn-primary" type="submit">Elément 
&lt;button&gt;</button> 
<input class="btn btn-primary" type="button" value="Elément 
input"> 

Voici l’affichage obtenu :

images/C09-001.png

Les trois éléments utilisent la classe .btn pour avoir la fonctionnalité de bouton et la classe .btn-primary pour obtenir l’aspect standard des boutons Bootstrap.

2. Les boutons colorés BOUTONS:Colorés

Vous pouvez ajouter les classes .btn-couleur pour colorer les boutons. Le suffixe couleur indique la couleur à appliquer. Les valeurs de couleur sont celles que nous avons vues de nombreuse fois précédemment.

Voici le code utilisé dans cet exemple :

<button type="button" class="btn btn-primary">Primary</button> 
<button type="button" class="btn btn-secondary">Secondary</button> 
<button type="button" class="btn btn-success">Success</button> ...
Pour consulter la suite, découvrez le livre suivant :
couv_OW24BOO.png
60-signet.svg
En version papier
20-ecran_lettre.svg
En version numérique
41-logo_abonnement.svg
En illimité avec l'abonnement ENI
130-boutique.svg
Sur la boutique officielle ENI
Précédent
L'objectif
Suivant
Les boutons radio