Bootstrap est un framework front-end populaire qui a révolutionné le développement web. Avec sa dernière version, Bootstrap 5.3.0, le framework a introduit une multitude de nouvelles fonctionnalités et d’améliorations qui vous permettent de créer des sites web et des applications époustouflants, réactifs et riches en fonctionnalités.
Bascule en mode sombre
L’un des ajouts remarquables de Bootstrap 5.3.0 est une bascule pour le mode sombre. Cette bascule permet aux utilisateurs de votre site web de basculer sans effort entre les modes clair et sombre, facilitant ainsi l’utilisation transparente de votre site web ou de votre application dans différentes conditions d’éclairage.
Pour utiliser cette fonctionnalité, il suffit d’ajouter l’option data-bs-toggle= »dark-mode » à tout élément de type bouton ou lien.
Voici un exemple :
<button type="button" class="btn btn-primary" data-bs-toggle="dark-mode">
Toggle Dark Mode
</button>
Utilitaires de mise à l’échelle des polices
Bootstrap 5.3.0 introduit un ensemble d’utilitaires d’échelle de police qui vous permettent d’ajuster rapidement la taille de votre texte sur la base d’échelles prédéfinies, sans avoir à choisir vous-même des valeurs de police spécifiques.
Vous pouvez utiliser ces utilitaires en combinaison avec d’autres classes de typographie Bootstrap pour obtenir une typographie évolutive et cohérente sur l’ensemble de votre site Web ou de votre application.
Voici quelques exemples d’utilisation des utilitaires de mise à l’échelle des polices :
<p class="fs-1">This is the largest font size</p>
<p class="fs-2">This is a slightly smaller font size</p>
<p class="fs-3">This is a medium font size</p>
<p class="fs-4">This is a small font size</p>
<p class="fs-5">This is the smallest font size</p>
Utilitaires de gouttière
Une autre nouveauté de Bootstrap 5.3.0 est l’introduction d’utilitaires de gouttière. Ces utilitaires permettent d’ajouter facilement des gouttières entre les colonnes de votre grille Bootstrap sans avoir à écrire de CSS personnalisé.
Voici un exemple d’utilisation des utilitaires de gouttière :
<div class="row gx-3">
<div class="col">Column 1</div>
<div class="col">Column 2</div>
</div>
Cet exemple utilise l’utilitaire gx-3 pour ajouter une gouttière de 3 unités (ou 1.5rem) entre les deux colonnes.
Mise à jour des contrôles de formulaires
Les contrôles de formulaire de Bootstrap ont été mis à jour dans la version 5.3.0 pour améliorer la cohérence et la convivialité. Les nouveaux contrôles de formulaire incluent des styles actualisés pour les cases à cocher, les boutons radio et les boîtes de sélection, ainsi qu’un retour d’information amélioré sur la validation.
Cases à cocher et boutons radio
Bootstrap 5.3.0 introduit de nouveaux styles pour les cases à cocher et les boutons radio qui les rendent plus faciles à utiliser et plus accessibles. Le nouveau design présente des zones d’impact plus larges et des indicateurs de focus améliorés, ce qui facilite l’interaction avec ces entrées.
Voici un exemple d’utilisation des nouveaux styles de cases à cocher :
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="check1">
<label class="form-check-label" for="check1">Default checkbox</label>
</div>
Et voici un exemple d’utilisation des nouveaux styles de boutons radio :
<div class="form-check">
<input class="form-check-input" type="radio" name="exampleRadios" id="radio1" value="option1">
<label class="form-check-label" for="radio1"> Option 1 </label>
</div>
Remarquez que ce balisage utilise la balise .form-check-input pour styliser l’élément de saisie lui-même, et la classe .form-check-label pour styliser l’étiquette.
Boîtes de sélection
Les boîtes de sélection ont également été mises à jour dans Bootstrap 5.3.0 avec de nouveaux styles pour une meilleure cohérence et une plus grande facilité d’utilisation. Les nouveaux styles de boîtes de sélection présentent des zones d’impact plus larges et des indicateurs de mise au point améliorés, ce qui facilite l’interaction avec ces entrées.
Voici un exemple d’utilisation des nouveaux styles de boîtes de sélection :
<select class="form-select" aria-label="Default select example">
<option selected>Open this select menu</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
Remarquez que vous pouvez utiliser le style .form-select pour styliser la boîte de sélection elle-même.
Retour d’information sur la validation
Bootstrap 5.3.0 introduit également de nouveaux styles de retour de validation pour les contrôles de formulaire. Ces styles permettent de fournir plus facilement un retour visuel aux utilisateurs de votre site web lorsqu’ils remplissent un formulaire de manière incorrecte.
Voici un exemple d’utilisation des nouveaux styles de validation :
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control is-invalid" id="exampleInputPassword1" placeholder="Password" required>
<div class="invalid-feedback"> Please provide a valid password. </div>
</div>
Remarquez que le style .is-invalid indique que le champ de saisie n’est pas valide, et la classe .invalid-feedback La classe affiche un message à l’intention de l’utilisateur.
Grâce à ces nouveaux styles, il est plus facile que jamais de créer des formulaires accessibles et cohérents pour votre site web ou votre application.
Des améliorations passionnantes dans Bootstrap 5.3.0
Bootstrap 5.3.0 est une mise à jour importante du célèbre framework CSS qui apporte plusieurs nouvelles fonctionnalités et améliorations. De la bascule en mode sombre aux utilitaires d’échelle de police et de gouttière, de nombreux nouveaux outils sont à votre disposition pour vous aider à créer de meilleurs sites Web et applications.