Composant
Bootstrap permet de mettre en forme ce qu'il appelle des composants. Ce qui correspond à des barres de navigation, des zones d'alerte, des formulaires, des boutons...
Méthode : Alerte
Une alerte est la mise en valeur d'une zone de texte. On utilise la classe alert pour la définir et le mot alert suivi du code couleur pour la préciser.
<div class="container">
<div class="alert alert-primary">alert alert-primary</div>
<div class="alert alert-secondary">alert alert-secondary</div>
<div class="alert alert-success">alert alert-success</div>
</div>
Pour colorer les liens internes aux alertes, il faut ajouter la classe alert-link aux ancres.
<div class="container">
<div class="alert alert-primary">Ceci est un lien : <a href="#" class="alert-link">Je suis un lien</a>. La couleur s'adapte.</div>
<div class="alert alert-danger">Ceci est un lien : <a href="#" class="alert-link">Je suis un lien</a>. La couleur s'adapte.</div>
<div class="alert alert-success">Ceci est un lien : <a href="#" class="alert-link">Je suis un lien</a>. La couleur s'adapte.</div>
</div>
Méthode : Badge
Un badge permet de mettre en valeur un morceau de texte dans un phrase.
badge badge-primary : badge de couleur primaire
badge badge-pill badge-danger : le badge a une forme de pillule
En mettant un badge à une ancre, son survol et son focus sont gérés.
<div class="container">
<div>Voici un badge : <span class="badge badge-primary">badge-primary</span></div>
<div>Voici un badge pillule : <span class="badge badge-pill badge-warning">badge-pill</span></div>
<div>Voici un badge ancre : <a href="#" class="badge badge-info">badge ancre</a></div>
</div>
Modifiez la largeur de votre navigateur.
Méthode : Bouton
La classe btn peut être utilisée sur les éléments button, input, et a.
btn btn-primary : bouton de couleur primaire
btn btn-outline-primary : la couleur est appliquée au texte et aux bordures
btn btn-lg btn-primary : gros bouton
btn btn-sm btn-primary : petit bouton
btn btn-block btn-primary : occupe toute la largeur de son parent
<div class="container">
<a class="btn btn-primary" href="#" role="button">Lien</a>
<button class="btn btn-primary" type="submit">Button</button>
<input class="btn btn-primary" type="submit" value="Input">
<button type="button" class="btn btn-outline-primary">btn-outline</button>
<button type="button" class="btn btn-primary btn-lg">Gros button</button>
<button type="button" class="btn btn-primary btn-sm">Petit button</button>
</div>
Regroupement de bouton
btn-group
<div class="container">
<div class="btn-group">
<a class="btn btn-primary" href="#" role="button">Lien</a>
<button class="btn btn-primary" type="submit">Button</button>
<input class="btn btn-primary" type="submit" value="Input">
<button type="button" class="btn btn-outline-primary">btn-outline</button>
<button type="button" class="btn btn-primary btn-lg">Gros button</button>
<button type="button" class="btn btn-primary btn-sm">Petit button</button>
</div>
</div>
Méthode : Fiche
Une card permet de mettre en forme une fiche signalétique.
badge badge-primary : badge de couleur primaire
badge badge-pill badge-danger : le badge a une forme de pillule
En mettant un badge à une ancre, son survol et son focus sont gérés.
<div class="container">
<div>Voici un badge : <span class="badge badge-primary">badge-primary</span></div>
<div>Voici un badge pillule : <span class="badge badge-pill badge-warning">badge-pill</span></div>
<div>Voici un badge ancre : <a href="#" class="badge badge-info">badge ancre</a></div>
</div>
Modifiez la largeur de votre navigateur.