Nouveautés de Bootstrap 5

Bootstrap est l’une des bibliothèques CSS les plus populaires. Elle permet aux développeurs d’utiliser facilement de belles styles et composants et de créer des sites web réactifs. L’utilisation de Bootstrap peut économiser du temps aux développeurs, surtout avec des composants qui sont utilisés dans presque tous les projets.

Bootstrap 5 (la version majeure actuelle, sortie en mai 2021) a apporté avec elle des tonnes de changements et d’améliorations, y compris l’ajout de nouveaux composants, de nouvelles classes, de nouveaux styles pour les anciens composants, une mise à jour de la prise en charge des navigateurs, la suppression de certains anciens composants, et bien plus encore.

Dans cet article, nous aborderons ce qui a changé dans Bootstrap 5, ce qui a été abandonné, et, plus intéressant encore, ce qui est nouveau.

Quand utiliser Bootstrap (et quand ne pas le faire)

Bootstrap se présente comme « le framework le plus populaire au monde pour la construction de sites réactifs et adaptés aux mobiles », et avec 152k étoiles sur GitHub, je ne pense pas que cette affirmation soit exagérée. Surtout pour les débutants, Bootstrap est un excellent moyen de commencer à créer des sites web modernes et propres. Il facilite la réalisation de conceptions complexes et adaptées aux mobiles et fournit de nombreux composants dont vous aurez probablement besoin sur plusieurs projets.

Bootstrap a une courbe d’apprentissage peu élevée et convient bien aux sites web statiques qui n’ont pas besoin d’une étape de construction, car vous pouvez simplement référencer la bibliothèque à partir du CDN de Bootstrap. Ceci est à l’opposé de certaines autres bibliothèques CSS populaires qui peuvent être optimisées pour une utilisation avec un bundler ou un gestionnaire de tâches.

Vous devriez également être conscient, cependant, que Bootstrap n’est pas une solution miracle. Pour les novices, Bootstrap facilite la production de balisage confus et compliqué. Il s’agit également d’une bibliothèque relativement lourde en termes d’octets (bien que cela s’améliore avec chaque version), il se pourrait donc qu’il ne soit pas le meilleur choix si vous n’utilisez que l’une ou deux de ses fonctionnalités. Comme pour toute abstraction, cela aidera considérablement si vous avez une bonne compréhension de la technologie sous-jacente et pouvez prendre une décision éclairée sur le moment d’en faire usage.

Mise à niveau de Bootstrap 4 vers 5

La mise à niveau de Bootstrap 4 vers 5 est généralement assez simple. La plupart des composants, leurs classes et les classes d’utilitaires disponibles dans Bootstrap 4 sont toujours disponibles dans Bootstrap 5. La principale chose à laquelle vous devez vous concentrer lors de la migration est de savoir si les classes ou composants que vous utilisez ont été supprimés. S’ils ont été supprimés, il existe des remplaçants ou des moyens d’obtenir le même résultat à l’aide de classes d’utilitaires. La deuxième chose à laquelle vous devez vous concentrer est le passage des attributs data-* aux attributs data-bs-* dans les composants qui nécessitent JavaScript dans le cadre de leurs fonctionnalités. (Nous aborderons cela plus en détail dans la section suivante.)

Si vous utilisez les fichiers Sass de Bootstrap, certaines variables et mixins ont été renommés. Bootstrap 5 dispose d’une section détaillée et étendue sur la personnalisation, ainsi que des détails sur les variables Sass et les mixins pour chaque composant sur leurs pages de documentation respectives.

Changements apportés

Bootstrap 5 apporte des changements majeurs à Bootstrap en tant que bibliothèque, avec un changement dans les dépendances requises, le support des navigateurs et plus encore. Il apporte également des modifications aux composants et aux classes que nous avons toujours utilisés dans les versions précédentes.

jQuery n’est plus une dépendance

En tant que changement majeur par rapport aux versions précédentes, jQuery n’est plus une dépendance de Bootstrap. Désormais, vous pouvez utiliser Bootstrap dans toute sa splendeur sans cela, mais vous avez toujours besoin de Popper.js. Ce changement facilite l’utilisation de Bootstrap dans les projets qui n’ont pas besoin ou qui n’utilisent pas jQuery – comme lorsque vous utilisez Bootstrap avec React.

Vous pouvez toujours utiliser jQuery avec Bootstrap si c’est une partie de votre site web. Si Bootstrap détecte jQuery dans l’objet window, il ajoutera automatiquement tous les composants à la système de plugins jQuery. Donc, si vous migrez de v4 à v5, vous n’avez pas à vous soucier de ce changement, et vous pouvez toujours utiliser jQuery avec Bootstrap si nécessaire.

Mais que se passe-t-il si vous utilisez jQuery sur votre site, mais que vous ne voulez pas que Bootstrap utilise jQuery? Vous pouvez le faire en ajoutant l’attribut data-bs-no-jquery à l’élément body du document:

<body data-bs-no-jquery="true">
</body>

Comment Bootstrap fonctionne-t-il sans jQuery? Par exemple, dans v4, vous utiliseriez le code JavaScript suivant pour créer un élément Toast:

$('.toast').toast()

Dans Bootstrap 5, vous pouvez utiliser ce même code pour créer un élément Toast si votre site utilise déjà jQuery. Sans jQuery, vous devrez utiliser un code similaire à celui-ci pour créer un élément Toast:

const toastElList = [...document.querySelectorAll('.toast')]
const toastList = toastElList.map((toastEl) => {
  return new bootstrap.Toast(toastEl)
})

Cela utilise simplement JavaScript Vanilla pour interroger le document à la recherche d’éléments possédant une classe .toast, puis initialise un composant Toast sur l’élément en utilisant new bootstrap.Toast().

Changement de support des navigateurs

Jusqu’à la version 4, Bootstrap prenait en charge Internet Explorer (IE) 10 et 11. À partir de Bootstrap 5, le support pour IE a été entièrement abandonné. Donc, si vous avez besoin de prendre en charge IE sur votre site web, vous devriez probablement faire attention lors de la migration vers la version 5.

D’autres changements dans le support des navigateurs incluent:

• Le support Firefox et Chrome démarre maintenant à partir de la version 60
• Le support Safari et iOS démarre maintenant à partir de la version 12
• Le support Android Browser et WebView démarre maintenant à partir de la version 6

Changement dans les attributs de données

Bootstrap 5 a modifié le nommage des attributs de données généralement utilisés par ses composants qui utilisent JavaScript dans leur fonctionnalité. Auparavant, la plupart des composants qui dépendaient de certaines fonctionnalités JavaScript auraient des attributs de données commençant par data-. Par exemple, pour créer un composant Tooltip dans Bootstrap 4:

<button 
  type="button" 
  class="btn btn-secondary" 
  data-toggle="tooltip" 
  data-placement="top" 
  title="Tooltip"
>
  Tooltip
</button>

Notez l’utilisation de data-toggle et data-placement. Dans Bootstrap 5, les attributs de données pour ces composants commencent maintenant par data-bs pour faciliter l’espace de nommage des attributs Bootstrap. Par exemple, pour créer un composant Tooltip dans Bootstrap 5:

<button 
  type="button" 
  class="btn btn-secondary" 
  data-bs-toggle="tooltip" 
  data-bs-placement="top" 
  title="Tooltip"
>
  Tooltip
</button>

Au lieu d’utiliser `data-toggle` et `data-placement`, nous utilisons `data-bs-toggle` et `data-bs-placement`. Si vous utilisez JavaScript pour créer des composants dans Bootstrap, il n’y a probablement pas besoin de faire de changements. Cependant, si vos composants reposent uniquement sur les attributs de données pour fonctionner, vous devez changer tous les attributs de données qui commencent par `data` pour qu’ils commencent par `data-bs`.

Bugs corrigés

Dans la documentation de Bootstrap 4 sous Navigateurs et appareils, il y a une liste de bugs qui se produisent sur certains navigateurs. Ces bugs ne sont plus listés dans la même liste pour Bootstrap 5. La liste comprend ce qui suit:

• Le style de survol était appliqué aux éléments sur les événements tactiles sur iOS, ce qui n’était pas souhaitable car il était considéré comme un comportement inattendu.
• L’utilisation de `.container` dans Safari 8 et supérieur provoquait une petite taille de police lors de l’impression.
• Le rayon de bordure était surchargé par les retours de validation (mais pouvait être corrigé en ajoutant une classe supplémentaire `.has-validation`).

La liste des bugs et problèmes dans la documentation de Bootstrap 4 détaille également des bugs survenus sur des versions de navigateurs qui ne sont plus prises en charge.

Autres changements

Il y a beaucoup d’autres changements qui sont soit mineurs, soit ne provoquent pas un changement drastique et perceptible. Ces changements sont :

• Bootstrap 5 utilise désormais Popper v2. Assurez-vous de mettre à niveau votre version de Popper. Popper v1 ne fonctionnera plus, car Bootstrap 5 requiert @popperjs/core au lieu de l’ancien popper.js.

• Bootstrap 5 peut désormais être utilisé en tant que module dans le navigateur à l’aide d’une version de Bootstrap construite en tant que module ECMAScript.

• Comme Libsass et Node Sass (utilisés dans Bootstrap 4) sont désormais obsolètes, Bootstrap 5 utilise Dart Sass pour compiler les fichiers Sass sources en CSS.

• Il y a eu des modifications dans certaines valeurs des variables Sass, comme $zindex-modal qui a changé de 1050 à 1060, $zindex-popover de 1060 à 1070, et plus encore. Pour cette raison, il est recommandé de vérifier les variables Sass de chaque composant ou classes d’utilité dans la documentation de Bootstrap 5.

• Auparavant, pour rendre un élément caché tout en le rendant détectable pour les technologies d’assistance, la classe .sr-only était utilisée. Cette classe est maintenant remplacée par .visually-hidden.

• Auparavant, pour rendre un élément interactif invisible tout en le rendant détectable pour les technologies d’assistance, vous deviez utiliser à la fois les classes .sr-only et .sr-only-focusable. Dans Bootstrap 5, il vous suffit d’utiliser la classe .visually-hidden-focusable sans .visually-hidden.

• Les citations avec une source nommée sont maintenant enveloppées par un élément <figure>.

  Voici un exemple de la manière dont les Blockquotes sont maintenant dans Bootstrap 5:

• Dans les versions précédentes, les styles de tableaux étaient hérités. Cela signifie que si un tableau est imbriqué dans un autre tableau, le tableau imbriqué héritera du tableau parent. Dans Bootstrap 5, les styles de tableaux sont indépendants les uns des autres, même s’ils sont imbriqués.

• Utilitaires de bordure prennent désormais en charge les tableaux. Cela signifie que vous pouvez désormais changer la couleur de la bordure d’un tableau en utilisant les utilitaires de couleur de bordure.

  Voici un exemple d’utilisation des utilitaires de bordure avec les tableaux dans Bootstrap 5 :

• Le style par défaut des breadcrumbs a été modifié, supprimant l’arrière-plan gris par défaut, l’espacement et le rayon de bordure qui existaient dans les versions précédentes.

  Voici un exemple du style des Breadcrumbs dans Bootstrap 5:

• Le nommage des classes qui utilisaient left et right pour se référer à la position a été modifié pour utiliser start et end. Par exemple, .dropleft et .dropright dans les menus déroulants sont remplacés respectivement par .dropstart et .dropend.

• De même qu’à l’instant, les classes utilitaires qui utilisaient l pour left et r pour right utilisent désormais s pour start et e pour end respectivement. Par exemple, .mr-* est maintenant .me-*.

• La classe .form-control-range qui était utilisée pour les entrées de plage est maintenant .form-range.

• Les gouttières sont maintenant définies en rems plutôt qu’auparavant en px.

• .no-gutters a été renommé en .g-0 dans le cadre des nouvelles classes de gouttière ajoutées (plus de détails à ce sujet dans les sections suivantes).

• Les liens sont désormais soulignés par défaut, même lorsqu’ils ne sont pas survolés.

• Les noms de classe des éléments de formulaire personnalisés ont changé de .custom-* pour faire partie des classes des composants de formulaire. Par exemple, .custom-check est remplacé par .form-check, .custom-select est remplacé par .form-select, et ainsi de suite.

• L’ajout de .form-label aux étiquettes est désormais obligatoire.

• Les alertes, les fil d’Ariane, les cartes, les menus déroulants, les listes groupées, les modals, les popovers et les tooltip utilisent désormais les mêmes valeurs de rembourrage en utilisant la variable $spacer.

• Le rembourrage par défaut dans les éléments de badge est maintenant modifié de .25em/.5em à .35em/.65em.

• Les enveloppes pour les boutons basculants sont utilisées avec les cases à cocher et les boutons radio. La mise en forme est également simplifiée maintenant. Dans Bootstrap 4, un bouton basculant avec case à cocher était réalisé avec le code suivant :

  <div class="btn-group-toggle" data-toggle="buttons">
    <label class="btn btn-secondary active">
      <input type="checkbox" checked> Coché
    </label>
  </div>
  

  Dans Bootstrap 5, cela peut être fait d’une manière plus simple :

  <input type="checkbox" class="btn-check" id="btn-check" autocomplete="off">
  <label class="btn btn-primary" for="btn-check">Coché</label>
  

• Les états actif et survol des boutons ont maintenant un contraste de couleur augmenté.

• Les icônes de flèche de carrousel utilisent maintenant des SVG provenant de Bootstrap Icons.

• La classe de bouton de fermeture est maintenant renommée de .close à .btn-close, et utilise une icône SVG au lieu de ×.

• Les divisions de menu déroulant sont maintenant plus sombres pour un meilleur contraste.

• La barre de navigation doit désormais être enveloppée dans un élément de conteneur. Par exemple, en Bootstrap 4 :

  <nav class="navbar navbar-expand-lg navbar-light bg-light">
    <a class="navbar-brand" href="#">Navbar</a>
    ...
  </nav>
  

  Devient en Bootstrap 5 :

  <nav class="navbar navbar-expand-lg navbar-light bg-light">
    <div class="container-fluid">
      <a class="navbar-brand" href="#">Navbar</a>
      ...
    </div>
  </nav>
  

• La classe .arrow dans les composants popover est désormais remplacée par .popover-arrow, et la classe .arrow dans les composants Tooltip est désormais remplacée par .tooltip-arrow.

• L’option popover whiteList a été renommée en allowList.

• La durée par défaut des Toasts a été modifiée pour être de 5 secondes.

• La valeur par défaut de fallbackPlacements dans les composants tooltip, dropdown et popover a été modifiée en tant qu’array ['top', 'right', 'bottom', 'left'].

• .text-monospace a été renommé en .font-monospace.

• .font-weight-* a été renommé en .fw-* et .font-style-* en .fst-*.

• .rounded-sm et .rounded-lg ont maintenant été remplacés par une gamme de classes arrondies .rounded-* de 0 à 3.

Ce qui a été supprimé

Les changements peuvent avoir un coût. Lorsqu’une nouvelle version sort et apporte des changements et des améliorations, elle supprime également certaines des anciennes fonctionnalités qu’elle supportait auparavant. Avec cette nouvelle version, certains des composants, classes d’utilité ou autres fonctionnalités de Bootstrap ont été supprimés.

La plupart des éléments qui ont été supprimés de Bootstrap 5 ont été éliminés car la même chose peut être réalisée en utilisant des classes d’utilitaires au lieu de les transformer en composant autonome. En outre, certains éléments qui ont été supprimés s’avéraient être inutilisés ou inutiles.

Voici une liste de ce qui a été supprimé de Bootstrap 5:

• Comme mentionné dans la section précédente, le support pour IE a été complètement supprimé.

• Les classes de couleur de badge (par exemple, .badge-primary) ont été supprimées au profit de l’utilisation des classes d’utilitaires de couleur (par exemple, .bg-primary).

• La classe de badge .badge-pill, qui donnait à un badge un style en forme de pilule, a été supprimée au profit de l’utilisation de .rounded-pill, qui obtient le même résultat.

• La classe de bouton .btn-block a été supprimée, car le même résultat peut être obtenu en utilisant des classes d’utilitaires de mise en page comme .d-block.

• La disposition de cartes Masonry .card-columns qui était auparavant disponible a été abandonnée, car elle avait de nombreux effets secondaires.

• L’option flip pour les composants de menu déroulant a été supprimée, au profit des configurations de Popper.

• Le composant Jumbotron a été abandonné, car le même résultat peut être obtenu en utilisant des classes d’utilitaires.

• Certaines classes d’utilité d’ordre (.order-*) ont été supprimées, car elles couvraient précédemment une gamme de 1 à 12. Elles s’étendent maintenant de 1 à 5.

• Le composant média a été supprimé, car le même résultat peut être obtenu avec des classes d’utilité.

• Les classes .thead-light et .thead-dark ont été supprimées, car les classes de variantes .table-* peuvent être appliquées à tous les éléments de table.

• La classe .pre-scrollable a été supprimée, car elle n’est pas beaucoup utilisée.

• La classe .text-justify a été supprimée, en raison de problèmes de réactivité, tout comme la classe .text-hide, car sa méthode est ancienne et ne devrait pas être utilisée. Et les classes .text-* n’ajoutent plus de états de survol ou de focus aux liens. Ces classes .text-* devraient être remplacées par des classes .link-*.

• Les groupes de saisie qui comportent plusieurs entrées ou composants n’ont plus besoin d’utiliser .input-group-append et .input-group-prepend. Les éléments qui doivent être dans le groupe peuvent simplement tous être ajoutés directement comme enfants du .input-group.

  Voici un exemple d’utilisation de groupes de saisie avec plusieurs entrées :

• .form-group, .form-row, et .form-inline ont tous été abandonnés au profit de classes de mise en page.

• .form-text n’a plus de propriété display définie. Le rendu de l’élément dépendra de savoir si l’élément lui-même est un élément en bloc ou en ligne.

• Les icônes de validation ont été supprimées pour les éléments <select> avec multiple.

• La classe .card-deck a été supprimée au profit des classes de grille.

• Les marges négatives ont été désactivées par défaut.

• .embed-responsive-item les éléments sont maintenant supprimés au profit de l’application du style sur tous les enfants des ratios, qui était précédemment des incrustations réactives (plus à ce sujet dans la section suivante).

Nouveautés

Enfin, Bootstrap apporte de nombreuses additions passionnantes à sa bibliothèque dans la version 5. Certaines de ces modifications incluent de nouvelles fonctionnalités, de nouvelles notions prises en charge, de nouveaux composants, de nouvelles classes d’utilité et plus encore.

Les tailles de police réactives sont désormais activées par défaut

Tailles de police réactives (RFS) était dans les versions précédentes de Bootstrap, mais elle était désactivée par défaut. Bootstrap 5 active RFS par défaut, rendant les polices dans Bootstrap plus réactives. RFS est un projet annexe créé par Bootstrap pour initialement dimensionner et redimensionner les tailles de police de manière réactive. Maintenant, il est capable de faire de même pour des propriétés comme la marge, le rembourrage, l’ombre portée de la boîte, et plus encore.

Ce que cela fait essentiellement, c’est de calculer les valeurs les plus appropriées en fonction des dimensions du navigateur, et ces calculs sont traduits en fonctions calc lors de la compilation. L’utilisation de RFS abandonne également l’utilisation précédente de px pour utiliser rem, car cela aide à obtenir une meilleure réactivité.

Si vous utilisez les fichiers Sass pour Bootstrap, vous pouvez désormais utiliser des mixins créés par RFS, y compris font-size, margin, padding, et plus encore, ce qui vous permet de vous assurer que vos composants et styles sont réactifs.

Prise en charge de droite à gauche

Bootstrap 5 ajoute le support RTL (Right-to-Left) en utilisant RTLCSS. Étant donné que Bootstrap est utilisé partout dans le monde, c’est une étape importante et significative de rendre le support RTL disponible dès le départ. Pour cette raison, Bootstrap 5 a abandonné les noms spécifiques pour les directions (par exemple, l’utilisation de left et right) au profit de start et end. Cela rend Bootstrap suffisamment flexible pour fonctionner avec des sites Web à la fois de gauche à droite (LTR) et de droite à gauche (RTL). Par exemple, .dropleft est maintenant .dropstart, .ml-* est maintenant .ms-*, et plus encore.

Pour permettre à Bootstrap de reconnaître et d’appliquer les styles RTL sur votre site Web, vous devez définir la dir de <html> sur rtl, et ajouter un attribut lang avec la langue RTL du site Web. Par exemple, lang="ar".

Enfin, vous devrez inclure le fichier CSS RTL de Bootstrap :

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.rtl.min.css" integrity="sha384-gXt9imSW0VcJVHezoNQsP+TNrjYXoGcrqBZJpry9zJt8PCQjobwmhMGaDHTASo9N" crossorigin="anonymous">

Et avec cela, votre site Web sera compatible RTL.

Nouveau point de rupture

Bootstrap 5 apporte le support pour le nouveau point de rupture xxl ciblant les dispositifs dont la largeur est supérieure ou égale à 1400px. Auparavant, le point de rupture le plus élevé était xl, qui ciblait les dispositifs dont la largeur était supérieure ou égale à 1200px. Cette modification permet une meilleure réactivité pour les dispositifs à écrans plus larges, car le point de rupture xl ne suffisait pas.

Utiliser le nouveau point de rupture est similaire à tous les autres points de rupture. Par exemple, pour appliquer un rembourrage aux dispositifs d’une largeur supérieure ou égale à 1400px, vous pouvez le faire en utilisant la classe .p-xxl-2.

Documentation améliorée

Bien que ce ne soit pas une partie de la bibliothèque elle-même, il est bon de noter l’amélioration de la documentation de Bootstrap. La documentation dans Bootstrap 5 est mieux organisée, car les composants qui ont des détails plus étendus en ont maintenant leur propre section. Par exemple, le composant Formulaire dans Bootstrap 4 était juste une page avec tous les composants entassés à l’intérieur. Dans Bootstrap 5, la documentation du composant Formulaire est une section à part, avec des sous-sections pour différents sous-composants, y compris Form Control, Select, Input Groups, et plus encore.

De plus, la navigation dans la documentation est plus facile maintenant grâce au menu latéral, surtout pour les écrans plus petits. Dans Bootstrap 4, le menu de table des matières latéral n’était pas visible sur les petits appareils, ce qui rendait plus difficile de trouver la section requise sur la page. Dans Bootstrap 5, le menu de table des matières est toujours visible sur toutes les tailles d’écran.

De plus, dans Bootstrap 5, vous pouvez trouver toutes les variables Sass, les mixins et les fonctions pour chaque composant sur sa page. Auparavant, il y avait juste une page Theming qui donnait quelques détails sur la façon de changer les variables du thème dans Bootstrap. Maintenant, il y a une section de personnalisation à part qui donne plus de détails sur la façon de personnaliser le thème de Bootstrap.

Nouveaux composants

Bootstrap 5 introduit de nouveaux composants dans la bibliothèque. Certains de ces composants faisaient partie d’autres composants et sont désormais des composants indépendants.

Accordéon

Auparavant, l’Accordéon faisait partie du composant Collapsible, plutôt que d’être son propre composant. Dans Bootstrap 5, Accordéon est un nouveau composant. Avec l’Accordéon vient une nouvelle classe, .accordion, qui contient à l’intérieur une liste d’éléments d’accordéon. De plus, les Accordéons ont un nouveau style par rapport au style précédent dans Bootstrap 4. Voici un exemple du composant accordéon:

Bootstrap 5 ajoute également quelques classes pour modifier la mise en forme de l’Accordéon. Par exemple, .accordion-flush supprime une partie de la mise en forme par défaut de l’Accordéon comme les couleurs d’arrière-plan ou de bordures. Vous pouvez également rendre un élément d’accordéon toujours ouvert en supprimant l’attribut data-bs-parent de son élément .accordion-collapse.

Offcanvas

Un autre nouveau composant est Offcanvas, qui vous permet de créer une barre latérale en surimpression. C’est la barre latérale généralement utilisée sur les sites web pour afficher le menu sur les appareils plus petits. Vous pouvez la placer sur n’importe quel côté de la page en utilisant .offcanvas-start pour gauche en LTR, .offcanvas-top pour le haut, .offcanvas-end pour droite en LTR, et .offcanvas-bottom pour le bas. Vous pouvez également spécifier si l’Offcanvas doit avoir un arrière-plan ou non. Voici un exemple d’utilisation du composant Offcanvas :

Floating Label

Floating Label est une nouvelle partie du composant Form. Il vous permet de créer une entrée dont l’étiquette ressemble d’abord à un espace réservé, puis lorsque l’entrée reçoit le focus, l’étiquette flotte en haut de l’entrée au-dessus de la valeur. Cela fonctionne également sur les éléments <select> et <textarea>. Voici un exemple d’utilisation des étiquettes flottantes:

Autres ajouts

En plus des nouveaux composants, il y a de nouvelles classes pour les composants existants, de nouvelles classes utilitaires, de nouvelles classes d’aide, et plus encore. Voici la liste de tous les autres nouveaux ajouts dans Bootstrap 5:

• La classe .row-cols-auto a été ajoutée, ce qui permet aux colonnes de prendre leur largeur naturelle.

• A new utility class has been added to justify content called .justify-content-evenly.

• Auparavant, les gouttières entre les colonnes étaient réalisées à l’aide d’utilitaires d’espacement. Maintenant, vous pouvez définir la gouttière entre les colonnes à l’aide du nouveau Gutter utilitaire de mise en page. Pour définir une gouttière horizontale, utilisez .gx-*. Pour définir une gouttière verticale, utilisez .gy-*. Pour définir une gouttière à la fois horizontalement et verticalement, utilisez .g-*.

• A start script has been added to the Bootstrap package when installed with npm or Yarn. The start script compiles the CSS and JavaScript files, builds the documentation, then starts a local server.

• Les classes d’utilitaires d’alignement vertical peuvent maintenant être utilisées avec les tables.

• A new class .caption-top has been added, which allows placing the caption of a table at the top rather than at the bottom.

• Il est désormais possible de changer le séparateur dans Breadcrumb en utilisant la variable CSS --bs-breadcrumb-divider.

  Voici un exemple de changement du séparateur en >>:

• Il existe une nouvelle variante sombre pour les carrousels utilisant la classe .carousel-dark, et une nouvelle variante sombre pour les menus déroulants utilisant .dropdown-menu-dark.

• Il existe une nouvelle option d’auto-fermeture dans Dropdown qui peut modifier le comportement par défaut de la fermeture du menu Dropdown. Par défaut, les menus déroulants se ferment lorsque vous cliquez en dehors du menu déroulant ou sur l’un des éléments du menu déroulant. Vous pouvez changer cela en définissant l’attribut de données data-bs-auto-close sur inside, ce qui fait que le menu déroulant se ferme lorsque vous cliquez sur l’un des éléments du menu déroulant mais pas lorsque vous cliquez en dehors. Vous pouvez également le définir sur outside, ce qui fera en sorte que le menu déroulant ne se ferme que lorsque vous cliquez en dehors du menu déroulant. Enfin, vous pouvez le définir sur false pour le faire se fermer uniquement lorsque le bouton du menu déroulant est cliqué à nouveau. Si vous initialisez le menu déroulant avec JavaScript, vous pouvez utiliser l’option autoClose à la place de l’attribut de données. Voici un exemple de son utilisation :

• Il y a maintenant une mise en forme améliorée pour les entrées de fichiers dans les formulaires.

• A new color input has been added, using the class .form-control-color.

• A new datalists input type has been added, which simulates a typeahead select field. Here’s an example:

• De nouvelles nuances de couleurs ont été ajoutées dans les variables Sass.

• Il y a deux nouvelles tailles de titre de mise en page .display-5 et .display-6.

• Il y a une nouvelle variante blanche pour les boutons de fermeture .btn-close-white.

• Les menus déroulants peuvent désormais contenir des .dropdown-items enveloppés dans des éléments <li>.

• Les éléments des groupes de listes peuvent désormais être numérotés en utilisant la nouvelle classe .list-group-numbered.

• Il existe des propriétés transition pour les liens dans le composant Pagination, ce qui améliore son aspect visuel.

• Une nouvelle classe .bg-body a été ajoutée pour définir la couleur de fond du corps en blanc.

• De nouvelles classes d’utilitaires de position permettent de définir les propriétés top, left, right ou bottom d’un élément. Par exemple, .top-0.

• De nouvelles classes .translate-middle-x et .translate-middle-y ont été ajoutées pour centrer facilement les éléments absolus horizontalement et verticalement respectivement.

• De nouvelles classes utilitaires de largeur de bordure .border-* allant de 1 à 5 ont été introduites.

• Une nouvelle classe utilitaire de display .d-grid et une nouvelle classe utilitaire d’espacement .gap ont été ajoutées.

• De nouvelles classes utilitaires d’interligne .lh-1, .lh-sm, .lh-base et .lh-lg ont été introduites.

• De nouveaux assistants de ratio remplacent ce qui précédemment était des assistants d’incorporation réponsive. Les noms de classes ont été renommés en remplaçant embed-responsive par ratio et by par x. Par exemple, ce qui précédemment était .embed-responsive-16by9 est maintenant .ratio-16x9.

• A new option popperConfig has been added to Dropdowns, Popovers and Tooltips. This option can be used to make changes to Popper’s configurations.

• Il existe des utilitaires .fs-* pour les tailles de police, car RFS est désormais activé par défaut.

Conclusion

Bootstrap a été l’une des bibliothèques CSS leaders pour la plupart de la dernière décennie. Elle permet aux développeurs de construire facilement des sites web réactifs et de livrer une bonne expérience utilisateur. Avec les ajouts et les changements de Bootstrap 5, ce processus sera encore plus facile et permettra d’améliorer les designs des sites web et de fournir une bonne expérience utilisateur. Si vous utilisez Bootstrap 4 et que vous pensez migrer vers Bootstrap 5, la migration est facile et vous n’aurez probablement pas besoin de faire de nombreux changements.

Foire aux questions (FAQ) sur Bootstrap 5