<a class="btn btn-primary" href="#" role="button">
Lien
</a>
<button class="btn btn-secondary" type="Submit">
Button
</button>
<input class="btn btn-danger" type="button" value="Input">
<input class="btn btn-success" type="submit" value="Submit">
<!-- Les types de boutons-->
<div class="container">
<div class="row bloc">
<a href="#" class="btn" role="button">Un lien</a>
<button class="btn" type="submit">Bouton</button>
<input type="button" class="btn" value="Input"/>
<div class="dropdown">
<button class="btn btn-default dropdown-toggle"
type="button" id="dropdownMenu1"
data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Dropdown
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
<li><a href="#">Action1</a></li>
<li><a href="#">Action 2</a></li>
<li><a href="#">Action 3</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
</div>
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondaire</button>
<button type="button" class="btn btn-success">Succes</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-danger">Danger</button>
btn-lg
: pour les grands boutonsbtn-sm
: pour les moyens boutonsbtn-sm
: pour les petits boutons.btn-xs
: Bootstrap 4 a abandonné le .btn-xs pour les petits boutons supplémentaires.btn-block
: pour ceux qui couvrent toute la largeur d’un parent ..disabled
.disabled
HTML standard ..btn-outline-
.<button type="button" class="btn btn-outline-primary">Primary</button>
<button type="button" class="btn btn-outline-secondary">Secondaire</button>
<button type="button" class="btn btn-outline-success">Succes</button>
<button type="button" class="btn btn-outline-info">Info</button>
<button type="button" class="btn btn-outline-warning">Warning</button>
<button type="button" class="btn btn-outline-danger">Danger</button>
Les différents types de boutons
L’aspect par défaut est un gris avec le fond blanc. Il existe d’autres possibilité plus
colorées :
<button type ="button" class ="btn btn-primary "> Bouton standard </button>
<button type ="button" class ="btn btn-success ">Réussite </button>
<button type ="button" class ="btn btn-info "> Information </button>
<button type ="button" class ="btn btn-warning "> Avertissement </button>
<button type ="button" class ="btn btn-danger "> Danger </button >
<button type ="button" class ="btn btn-link "> Lien </button>
Ce qui donne :
Cette fois-ci nous allons utiliser une classe très sympa et voyons ce que cela nous donne. C'est juste magnifique
C'est la classe btn-outline. Voilà, vous pouvez déjà déviner son action? Bien sûr que oui.
<button type ="button" class ="btn btn-outline-primary "> Bouton standard </button>
<button type ="button" class ="btn btn-outline-success ">Réussite </button>
<button type ="button" class ="btn btn-outline-info "> Information </button>
<button type ="button" class ="btn btn-outline-warning "> Avertissement </button>
<button type ="button" class ="btn btn-outline-danger "> Danger </button >
<button type ="button" class ="btn btn-outline-link "> Lien </button>
Ce qui donne :
<button type="button" class="btn btn-primary btn-lg">Bouto gros</button>
<button type="button" class="btn btn-primary">Bouton standard</button>
<button type="button" class="btn btn-primary btn-sm">Bouton petit</button>
<button type="button" class="btn btn-primary btn-xs">Bouton très petit</button>
Ce qui donne :
La classe btn-block règle la dimension du bouton sur la dimension de son contenant.
Voici un exemple :
<div class="row">
<div class="col-sm-3">
<button type=" button" class="btn btn-primary btn-block">Bouton block</button>
</div>
<div class="col-sm-6">
<button type="button" class="btn btn-success btn-block">Bouton block</button>
</div>
<div class="col-sm-3">
<button type="button" class="btn btn-danger btn-block">Bouton block</button>
</div>
</div>
Ce qui donne :