Découvrez comment vous pouvez utiliser les dernières fonctionnalités de Bootstrap, y compris les détails des modifications importantes apportées aux contrôles de formulaire.

Bootstrap est un framework frontal 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 intéressantes et des améliorations qui vous permettent de créer des sites Web et des applications époustouflants, réactifs et riches en fonctionnalités.

Basculement en mode sombre

L'un des remarquables Ajouts de Bootstrap 5.3.0 est une bascule pour 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 diverses conditions d'éclairage.

Pour utiliser cette fonction, ajoutez simplement le data-bs-toggle="mode sombre" attribut à n'importe quel bouton ou élément de lien.

instagram viewer

Voici un exemple :

<boutontaper="bouton"classe="btn btn-primaire"data-bs-toggle="mode sombre">
Basculer en mode sombre
bouton>

Utilitaires d'échelle de police

Bootstrap 5.3.0 introduit un ensemble d'utilitaires d'échelle de police qui vous permettent d'ajuster rapidement la taille de votre texte en fonction d'échelles prédéfinies, sans avoir à choisissez 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 votre site Web ou votre application.

Voici quelques exemples d'utilisation des utilitaires de mise à l'échelle des polices :

<pclasse="fs-1">Il s'agit de la plus grande taille de policep>
<pclasse="fs-2">Ceci est une taille de police légèrement plus petitep>
<pclasse="fs-3">Ceci est une taille de police moyennep>
<pclasse="fs-4">Ceci est une petite taille de policep>
<pclasse="fs-5">Il s'agit de la plus petite taille de policep>

Utilitaires de gouttière

Un autre nouvel ajout dans Bootstrap 5.3.0 est l'introduction d'utilitaires de gouttière. Ces utilitaires facilitent l'ajout de gouttières entre les colonnes de votre mise en page de grille Bootstrap sans avoir à écrire de CSS personnalisé.

Voici un exemple d'utilisation des utilitaires de gouttière :

<divclasse="ligne gx-3">
<divclasse="col">Colonne 1div>
<divclasse="col">Colonne 2div>
div>

Cet exemple utilise le gx-3 class pour ajouter une gouttière de 3 unités (ou 1.5rem) entre les deux colonnes.

Contrôles de formulaire mis à jour

Le contrôles de formulaire dans 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 mis à jour pour les cases à cocher, les boutons radio et les cases de sélection, ainsi que des commentaires de validation améliorés.

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. La nouvelle conception présente des zones de frappe plus grandes et des indicateurs de mise au point améliorés, ce qui vous permet d'interagir plus facilement avec ces entrées.

Voici un exemple d'utilisation des nouveaux styles de case à cocher :

<divclasse="vérification de formulaire">
<saisirclasse="formulaire-vérification-entrée"taper="case à cocher"valeur=""identifiant="vérifier1">
<étiqueterclasse="formulaire-vérifier-étiquette"pour="vérifier1">Case à cocher par défautétiqueter>
div>

Et voici un exemple d'utilisation des nouveaux styles de boutons radio :

<divclasse="vérification de formulaire">
<saisirclasse="formulaire-vérification-entrée"taper="radio"nom="exempleRadios"identifiant="radio1"valeur="Option 1">
<étiqueterclasse="formulaire-vérifier-étiquette"pour="radio1"> Option 1 étiqueter>
div>

Remarquez comment ce balisage utilise le .form-check-input classe pour styliser l'élément d'entrée lui-même, et la .form-check-label classe pour styliser l'étiquette.

Sélectionnez les boîtes

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 convivialité. Les nouveaux styles de zone de sélection comportent des zones d'accès plus grandes et des indicateurs de mise au point améliorés, ce qui vous permet d'interagir plus facilement avec ces entrées.

Voici un exemple d'utilisation des nouveaux styles de zone de sélection :

<sélectionnerclasse="formulaire-select"label-aria="Exemple de sélection par défaut">
<optionchoisi>Ouvrir ce menu de sélectionoption>
<optionvaleur="1">Unoption>
<optionvaleur="2">Deuxoption>
<optionvaleur="3">Troisoption>
sélectionner>

Remarquez comment vous pouvez utiliser le .form-select classe pour styliser la boîte de sélection elle-même.

Commentaires de validation

Bootstrap 5.3.0 introduit également de nouveaux styles de rétroaction de validation pour les contrôles de formulaire. Ces styles facilitent la fourniture de commentaires visuels 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 :

<divclasse="groupe de formulaires">
<étiqueterpour="exempleInputPassword1">Mot de passeétiqueter>
<saisirtaper="mot de passe"classe="le contrôle de formulaire est invalide"identifiant="exempleInputPassword1"espace réservé="Mot de passe"requis>
<divclasse="Commentaires invalides"> Veuillez fournir un mot de passe valide. div>
div>

Remarquez comment le .est invalide classe indique que le champ de saisie n'est pas valide et que .invalid-feedback classe affiche un message à l'utilisateur.

Avec 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.

Améliorations intéressantes dans Bootstrap 5.3.0

Bootstrap 5.3.0 est une mise à jour importante du framework CSS populaire qui apporte plusieurs nouvelles fonctionnalités et améliorations à la table. De la bascule en mode sombre aux utilitaires d'échelle de police et aux utilitaires de gouttière, de nombreux nouveaux outils sont à votre disposition pour vous aider à créer de meilleurs sites Web et applications.