Bootstrap Twitter: les boutons

La grille Badges et Labels

Bootstrap Twitter propose une série de boutons déjà designés. Pour créer un bouton, il faut ajouter la class "btn" à l'élément. Un bouton peut être créé à partir de l'élément a, div, button, span, etc.

Boutons BOOTSTRAP twitter

	<button class="btn btn-default">Défaut</button>
	<button class="btn btn-primary">Primary</button>
	<button class="btn btn-success">Success</button>
	<button class="btn btn-info">Info</button>
	<button class="btn btn-warning">Warning</button>
	<button class="btn btn-danger">Danger</button>

Largeur boutons

Il existe différentes tailles de bouton: xs, sm et lg.

	<button class="btn btn-primary">Défaut</button>
	<button class="btn btn-primary btn-xs">bouton xs</button>
	<button class="btn btn-primary btn-sm">bouton sm</button>
	<button class="btn btn-primary btn-lg">bouton lg</button>

Bouton Block

Pour créer un bouton qui s'affiche en block:

Bouton actif

	<button class="btn btn-primary">Défaut</button>
	<button class="btn btn-primary active">Actif</button>

Bouton désactivé

	<button class="btn btn-primary">Défaut</button>
	<button class="btn btn-primary disabled">Désactivé</button>

Regrouper des boutons

	<div class="btn-group">
	<button type="button" class="btn btn-default">Gauche</button>
	<button type="button" class="btn btn-default">Milieu</button>
	<button type="button" class="btn btn-default">Droite</button>
	</div>

Il est possible de changer la taille des boutons de ce groupement à l'aide des class btn-group-xs, btn-group-sm et btn-group-lg :

	<div class="btn-group btn-group-xs">
	<button type="button" class="btn btn-default">Gauche</button>
	<button type="button" class="btn btn-default">Milieu</button>
	<button type="button" class="btn btn-default">Droite</button>
	</div>

	<div class="btn-group btn-group-sm">
	<button type="button" class="btn btn-default">Gauche</button>
	<button type="button" class="btn btn-default">Milieu</button>
	<button type="button" class="btn btn-default">Droite</button>
	</div>

	<div class="btn-group btn-group-lg">
	<button type="button" class="btn btn-default">Gauche</button>
	<button type="button" class="btn btn-default">Milieu</button>
	<button type="button" class="btn btn-default">Droite</button>
	</div>

Regrouper des boutons verticalement

	<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>

Boutons multi choix

	<div class="btn-group">
	<button type="button"
	class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
	Action <span class="caret"></span>
	</button>
	<ul class="dropdown-menu" role="menu">
	<li><a href="#">Nouveau</a></li>
	<li><a href="#">Editer</a></li>
	<li class="divider"></li>
	<li><a href="#">Supprimer</a></li>
	</ul>
	</div>

Il est également possible de changer la taille de ce select grâce aux classes btn-xs, btn-sm et btn-lg:

	<div class="btn-group">
	<button type="button"
	class="btn btn-primary btn-xs dropdown-toggle" data-toggle="dropdown">
	Action <span class="caret"></span>
	</button>
	<ul class="dropdown-menu" role="menu">
	<li><a href="#">Nouveau</a></li>
	<li><a href="#">Editer</a></li>
	<li class="divider"></li>
	<li><a href="#">Supprimer</a></li>
	</ul>
	</div>

Boutons multi choix 2

	<div class="btn-group">
	<button type="button" class="btn btn-danger">Action</button>
	<button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown">
	<span class="caret"></span>
	<span class="sr-only">Toggle Dropdown</span>
	</button>
	<ul class="dropdown-menu" role="menu">
	<li><a href="#">Nouveau</a></li>
	<li><a href="#">Editer</a></li>
	<li class="divider"></li>
	<li><a href="#">Supprimer</a></li>
	</ul>
	</div>