Outils
Comme on a pu le voir précédemment Bootstrap construit ses classes en concaténant les informations (col-lg-3 : colonne large 3emplacements).
Nous présentons ici une partie de ces éléments.
Méthode : Niveau d'information
Bootstrap définie différents niveaux d'information. Il les fait correspondre à un code couleur.
primary, secondary, success, danger, warning, info, light, dark, white, transparent
Ces niveaux d'information sont utilisés dans différents composants.
<div class="container">
<span class="bg-primary">Primary</span>
<span class="bg-secondary">Secondary</span>
<span class="bg-success">Success</span>
<span class="bg-danger">Danger</span>
<span class="bg-warning">Warning</span>
<span class="bg-info">Info</span>
<span class="bg-light">Light</span>
<span class="bg-dark text-light">Dark</span>
<span class="bg-white">White</span>
<span class="bg-transparent">Transparent</span>
</div>
bg : arrière plan
text : texte
Méthode : Margin, Padding
Types :
m : margin, p : padding
Positions :
t :top, b :bottom, l :left : r :right, x : left et right, y : top et bottom.
Tailles :
0 : supprime, 1 : 0,25 fois largeur de l'espace, 2 : 0,5 fois, 3 : 1 fois, 4 : 1,5 fois, 5 : 3 fois, auto
Exemples:
mt-2, px-3...
<div class="container">
<div class="my-3 bg-primary">Primary</div>
<div class="p-5 bg-secondary">Secondary</div>
<div class="m-4 py-4 bg-success">Success</div>
</div>
Méthode : Display
Pour choisir le display de l’élément.
none, inline, inline-block, block, table, table-cell, table-row, flex, inline-flex
d-inline, d-block...
<div class="container">
<span class="d-block bg-primary">Primary</span>
<span class="d-block bg-secondary">Secondary</span>
<span class="d-block bg-success">Success</span>
</div>
Méthode : Bordure
Position :
border, border-top, border-right, border-bottom, border-left
Couleur :
border-primary...
Arrondie :
rounded, rounded-top,..., rounded-circle, rounded-pill
Taille de l'arrondie :
rounded-lg, rounded-sm
<div class="container">
<span class="border border-dark p-2">border</span>
<span class="border border-dark rounded-circle p-2">circle</span>
</div>
p permet d'ajouter du padding
Méthode : Ombre
shadow-none, shadow-sm, shadow, shadow-lg
<div class="container">
<div class="shadow-none border my-2">No shadow</div>
<div class="shadow-sm border my-2">Small shadow</div>
<div class="shadow border my-2">Regular shadow</div>
<div class="shadow-lg border my-2">Larger shadow</div>
</div>
Méthode : Dimension
Largeur :
w-25, w-50, w-75, w-100, w-auto (25%, 50%...), mw-100 (max-width = 100%)
Hauteur :
h-25, h-50, h-75, h-100, h-auto (25%, 50%...), mh-100 (max-height = 100%)
<div style="height: 100px" class="container border">
<div class="bg-primary border d-inline-block h-25">25%</div>
<div class="bg-primary border d-inline-block h-50">50%</div>
<div class="bg-primary border d-inline-block h-75">75%</div>
</div>
<div class="container border">
<div class="bg-primary border w-25">25%</div>
<div class="bg-primary border w-50">50%</div>
<div class="bg-primary border w-75">75%</div>
</div>
Méthode : Texte
Alignement :
text-left, text-center, text-right
Débordement :
text-truncate
Casse :
text-lowercase, text-uppercase, text-capitalize
Gras :
font-weight-bold, font-weight-bolder, font-weight-normal, font-weight-light, font-weight-lighter
Italique :
font-italic
Decoration :
text-decoration-none (supprime le soulignement des ancres)
<div class="container">
<div class="text-right border">Aligné à droite</div>
<div class="text-center border">Centré</div>
<div class="text-truncate w-50 border">Quand le texte est trop long, il est tronqué</div>
<div class="text-lowercase border">Le texte est en MINUSCULE</div>
<div class="text-uppercase border">Le texte est en majuscule</div>
<div class="text-capitalize border">La première lettre de chaque mot est en majuscule</div>
<div class="font-weight-bold border">Le texte est en gras</div>
<div class="font-italic border">Le texte est en italique</div>
</div>