BootStrap 5.1 est disponible
jeu, 05/08/2021 - 10:48
Après la sortie de la v5, la première mise à jour mineure est disponible depuis quelques heures. Le plus gros concerne des correctifs et des améliorations. Quelques nouveautés sont annoncées. Par exemple, on peut utiliser un support expérimental du CSS Grid, du offcanvas dans le navbar, de nouvelles aides, etc.
CSS Grid va remplacement la grille utilisé jusqu’à présent dansBootStrap. Il faut désactiver la grille par défaut et activer la CSS Grid dans les paramètres. Autre nouveauté ergonomique, il est possible d’utiliser l’horizontal collapse. Le principe est simple : on affichage ou on masque un texte dans un effet horizontal.
Exemple :
<button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseWidthExample" aria-expanded="false" aria-controls="collapseWidthExample">
Toggle width collapse
</button>
<div style="min-height: 120px;">
<div class="collapse collapse-horizontal" id="collapseWidthExample">
<div class="card card-body" style="width: 300px;">
This is some placeholder content for a horizontal collapse. It's hidden by default and shown when triggered.
</div>
</div>
</div>
Cette version introduit aussi des nouvelles variables. Nous trouvons <body>, variables RGB.
Exemple Bobdy :
body {
margin: 0;
font-family: var(--bs-body-font-family);
font-size: var(--bs-body-font-size);
font-weight: var(--bs-body-font-weight);
line-height: var(--bs-body-line-height);
color: var(--bs-body-color);
text-align: var(--bs-body-text-align);
background-color: var(--bs-body-bg);
-webkit-text-size-adjust: 100%;
-webkit-tap-highlight-color: transparent;
}
Une évolution très intéressantes !
Pour découvrir toutes les nouveautés :
