Boutons

Sur cette page:

Boutons contre liens
Utilisation de base
Couleurs/Styles
Appel à l'action
Taille
Largeur maximale
État d'activation
État de désactivation
Groupes de Bouton (Horizontale)
Groupes de Bouton (Verticale)
Barres à outils
Groupes d'entrée
Boutons bascule de données
Ressource

Boutons contre liens

Bouton: Un bouton effectuera une action sur la page actuelle sans déplacer le focus ou sans éloigner l'utilisateur
Lien: Un lien enverra l'utilisateur à un emplacement, dans la même page via un lien d'ancrage (`#`) ou vers une autre page sans envoyer de données.

N'utilisez pas le bouton de rôle sur une ancre, utilisez plutôt un élément de bouton.

Utilisation de base (Par défaut)

Exemple de travail

Échafaudage (par défaut):

Lien

Avec le style par défaut:

Lien

Code


	// Bouton par défaut:
	<button type="submit">
	Bouton
	</button>
	<input type="button" value="Entrer"/>
	<input type="submit" value="Soumettre"/>
	<a href="#">
	Link
	</a>

	// Bouton stylisé:
	<button class="btn btn-default" type="submit">
	Bouton
	</button>
	<input class="btn btn-default" type="button" value="Entrer"/>
	<input class="btn btn-default" type="submit" value="Soumettre"/>
	<a class="btn btn-default" href="#">
	Lien
	</a>

Couleurs/Styles

Les couleurs signifient diverses choses telles qu'un lien vers des informations d'avertissement (bouton de style attention). Le texte de ce bouton stylisé contiendra également un mot décrivant l'état comme "Avis d'avertissement".

Exemple de travail

Ancre <a> sous forme de bouton

Code sample


	// Défaut:
	<button type="button" class="btn btn-default">
	Défaut
	</button>

	// Primaire:
	<button type="button" class="btn btn-primary">
	Primaire
	</button>

	// Succès:
	<button type="button" class="btn btn-success">
	Succès
	</button>

	// Info:
	<button type="button" class="btn btn-info">
	Info
	</button>

	// Avertissement:
	<button type="button" class="btn btn-warning">
	Avertissement
	</button>

	// Danger:
	<button type="button" class="btn btn-danger">
	Danger
	</button>

	// Lien:
	<button type="button" class="btn btn-link">
	Lien
	</button>

	//Lien sous forme de bouton
	<a class="btn btn-default" href="#">
	Lien sous forme de bouton
	</a>

Supertâche (Appel à l'action)

Exemple de travail

Code


// Bouton Supertâche (Appel à l'action):
<button type="button" class="btn btn-call-to-action">Supertâche (Appel à l'action)</button>

Taille

Utilisez pour augmenter ou diminuer la taille d'un bouton.

Exemple de travail

Code


	// Très petit bouton:
	<button type="button" class="btn btn-default btn-xs">
	Très petit bouton
	</button>

	// Petit bouton:
	<button type="button" class="btn btn-default btn-sm">
	Petit bouton
	</button>

	// Bouton par défaut:
	<button type="button" class="btn btn-default">
	Bouton par défaut
	</button>

	// Gros bouton:
	<button type="button" class="btn btn-default btn-lg">
	Gros bouton
	</button>

Largeur maximale

Utilisez pour créer des boutons de blocage de niveau (ceux qui s'étend sur toute la largeur d'un contenant apparenté).

Exemple de travail

Code


// Bouton de blocage de niveau:
<button type="button" class="btn btn-default btn-block">Button</button>

État d'activation

Utilisez .active avec les éléments button et a si vous avez besoin qu'un bouton semble actif en tout temps (habituellement aux fins d'affichage et d'enseignement sur des boutons ou liens factices). Lorsqu'un utilisateur appuie sur un bouton, il semble être actif (avec une ombre interne, ainsi qu'un arrière-plan et une bordure plus foncés). Pour les éléments button et a, ils sont stylisés automatiquement dans CSS au moyen de :active.

Exemple de travail

Lien

Code


// Bouton actif:
<button type="button" class="btn btn-default active">Bouton</button>

// Lien actif:
<a class="btn btn-default active" href="#" role="button">
Lien
</a>

État de désactivation

Utilisez pour désactiver des boutons et des liens (non cliquable) et donne une apparence décolorée.

Exemple de travail

Lien

Code


// Bouton désactivé:
<button type="button" class="btn btn-default disabled">Bouton</button>

// Lien désactivé:
<a class="btn btn-default disabled" href="#" role="button">
Lien
</a>

Groupes de Bouton (Horizontale)

Regroupez une série de boutons sur une seule ligne avec la classe btn-group.

Exemple de travail

Par défaut:

Gros:

Petit:

Très petit:

Justifié (lien):

Gauche Centré Droite

Justifié (boutons):

Code

// Par défaut:
<div class="btn-group">
	<button type="button" class="btn btn-default">...</button>
</div>

// Gros:
<div class="btn-group btn-group-lg">...
</div>

// Petit:
<div class="btn-group btn-group-sm">...
</div>

// Très petit:
<div class="btn-group btn-group-xs">...
</div>

// Justifié (lien):
<div class="btn-group btn-group-justified">
<a class="btn btn-default" href="#" role="button">...
</a>
</div>

// Justifié (boutons):
<div class="btn-group btn-group-justified">
<div class="btn-group">
	<button type="button" class=" btn btn-default">...
	</button>
</div>...
</div>

Groupes de Bouton (Verticale)

Faites apparaître un ensemble de boutons empilés verticalement plutôt qu'horizontalement avec la classe btn-group-vertical.

Exemple de travail

Code

// Groupes de Bouton (Verticale):
<div class="btn-group-vertical">
	<button type="button" class="btn btn-default">
	Haut
	</button>
	<button type="button" class="btn btn-default">
	Milieu
	</button>
	<button type="button" class="btn btn-default">
	Bas
	</button>
</div>

Barres à outils

Utilisez pour afficher plusieurs groupes de boutons ensemble sur une seule ligne. Notez que l'utilisation de cette fonctionnalité nécessite certaines exigences supplémentaires afin de se conformer aux WCAG.

Example de Travail

Code sample

// Barres à outils:
<div class="btn-toolbar" role="toolbar" aria-label="Barres à outils avec groupes de boutons">
	<div class="btn-group" role="group" aria-label="Premier groupe">
		<button type="button" class="btn btn-default">
		1
		</button>
		<button type="button" class="btn btn-default">
		2
		</button>
		<button type="button" class="btn btn-default">
		3
		</button>
		<button type="button" class="btn btn-default">
		4
		</button>
	</div>

	<div class="btn-group" role="group" aria-label="Deuxieme groupe">
		<button type="button" class="btn btn-default">
		5
		</button>
		<button type="button" class="btn btn-default">
		6
		</button>
		<button type="button" class="btn btn-default">
		7
		</button>
	</div>

	<div class="btn-group" role="group" aria-label="Deuxieme groupe">
		<button type="button" class="btn btn-default">
		8
		</button>
	</div>
</div>

Groupes d'entrée

Étendez facilement les contrôles de formulaire en ajoutant des boutons ou des groupes de boutons de chaque côté des entrées textuelles avec les classes input-group et input-group-btn.

Exemple de travail

Code

// Groupes d'entrée:
<div class="input-group mb-3">
	<div class="input-group-btn">
		<button class="btn btn-default" type="button">Button</button>
	</div>
	<input type="text" class="form-control">
</div>

<div class="input-group mb-3">
	<input type="text" class="form-control">
	<div class="input-group-btn">
		<button class="btn btn-default" type="button">Bouton</button>
	</div>
</div>

Boutons de basculement de données

Actuellement, cette fonctionnalité n'est pas fonctionnelle car nous n'implémentons pas le JavaScript de Bootstrap.

Les styles .button de Bootstrap peuvent être appliqués à d'autres éléments, tels que les label, pour fournir un basculement de case à cocher ou de bouton radio. Ajoutez data-toggle="buttons" à un .btn-group contenant ces boutons modifiés pour activer leur comportement de basculement via JavaScript et ajoutez .btn-group-toggle pour styliser les input dans vos boutons. Plus d’informations peuvent être trouvées ici : Composants d'amorçage

Nous travaillons actuellement à l'ajout de fonctionnalités similaires à l'avenir. Plus d'informations peuvent être trouvées dans cette pull request sur GitHub.

Ressource

Guidage du système de conception sur les boutons

Détails de la page

Date de modification :: 2023-09-01