Migrer vers v5

Suivez et examinez les modifications apportées aux fichiers source, à la documentation et aux composants Bootstrap pour vous aider à migrer de la v4 à la v5.

Sur cette page

v5.2.0

Conception rafraîchie

Bootstrap v5.2.0 propose une mise à jour de conception subtile pour une poignée de composants et de propriétés à travers le projet, notamment grâce à border-radiusdes valeurs raffinées sur les boutons et les contrôles de formulaire . Notre documentation a également été mise à jour avec une nouvelle page d'accueil, une mise en page plus simple des documents qui ne réduit plus les sections de la barre latérale et des exemples plus importants d' icônes Bootstrap .

Plus de variables CSS

Nous avons mis à jour tous nos composants pour utiliser des variables CSS. Alors que Sass sous-tend toujours tout, chaque composant a été mis à jour pour inclure des variables CSS sur les classes de base des composants (par exemple, .btn), permettant une personnalisation plus en temps réel de Bootstrap. Dans les versions ultérieures, nous continuerons à étendre notre utilisation des variables CSS dans notre mise en page, nos formulaires, nos assistants et nos utilitaires. En savoir plus sur les variables CSS dans chaque composant sur leurs pages de documentation respectives.

Notre utilisation des variables CSS sera quelque peu incomplète jusqu'à Bootstrap 6. Bien que nous aimerions les implémenter pleinement à tous les niveaux, elles risquent de provoquer des modifications avec rupture. Par exemple, la configuration $alert-border-width: var(--bs-border-width)dans notre code source casse le Sass potentiel dans votre propre code si vous le faisiez $alert-border-width * 2pour une raison quelconque.

En tant que tel, dans la mesure du possible, nous continuerons à pousser vers plus de variables CSS, mais veuillez reconnaître que notre implémentation peut être légèrement limitée dans la v5.

Nouveau`_maps.scss`

Bootstrap v5.2.0 a introduit un nouveau fichier Sass avec _maps.scss. Il extrait plusieurs cartes Sass de _variables.scsspour résoudre un problème où les mises à jour d'une carte d'origine n'étaient pas appliquées aux cartes secondaires qui les étendent. Par exemple, les mises à jour de $theme-colorsn'étaient pas appliquées aux autres cartes thématiques qui s'appuyaient sur $theme-colors, ce qui interrompait les workflows de personnalisation clés. En bref, Sass a une limitation où une fois qu'une variable ou une carte par défaut a été utilisée , elle ne peut pas être mise à jour. Il existe un défaut similaire avec les variables CSS lorsqu'elles sont utilisées pour composer d'autres variables CSS.

C'est pourquoi les personnalisations variables dans Bootstrap doivent venir après @import "functions", mais avant @import "variables"et le reste de notre pile d'importation. La même chose s'applique aux cartes Sass - vous devez remplacer les valeurs par défaut avant qu'elles ne soient utilisées. Les cartes suivantes ont été déplacées vers le nouveau_maps.scss :

$theme-colors-rgb
$utilities-colors
$utilities-text
$utilities-text-colors
$utilities-bg
$utilities-bg-colors
$negative-spacers
$gutters

Vos versions CSS Bootstrap personnalisées devraient maintenant ressembler à ceci avec une importation de cartes distincte.

  // Functions come first
  @import "functions";

  // Optional variable overrides here
+ $custom-color: #df711b;
+ $custom-theme-colors: (
+   "custom": $custom-color
+ );

  // Variables come next
  @import "variables";

+ // Optional Sass map overrides here
+ $theme-colors: map-merge($theme-colors, $custom-theme-colors);
+
+ // Followed by our default maps
+ @import "maps";
+
  // Rest of our imports
  @import "mixins";
  @import "utilities";
  @import "root";
  @import "reboot";
  // etc

Nouveaux utilitaires

Utilitaires font-weightétendus à inclure .fw-semiboldpour les polices semi-gras.
border-radiusUtilitaires étendus pour inclure deux nouvelles tailles, .rounded-4et .rounded-5, pour plus d'options.

Modifications supplémentaires

$enable-container-classesNouvelle option introduite . - Désormais, lorsque vous optez pour la disposition expérimentale de la grille CSS, .container-*les classes seront toujours compilées, à moins que cette option ne soit définie sur false. Les conteneurs conservent désormais également leurs valeurs de gouttière.
Le composant Offcanvas a maintenant des variantes réactives . La .offcanvasclasse d'origine reste inchangée : elle masque le contenu dans toutes les fenêtres. Pour le rendre réactif, remplacez cette .offcanvasclasse par n'importe quelle .offcanvas-{sm|md|lg|xl|xxl}classe.
Des séparateurs de table plus épais sont désormais opt-in. — Nous avons supprimé la bordure plus épaisse et plus difficile à remplacer entre les groupes de tableaux et l'avons déplacée vers une classe facultative que vous pouvez appliquer, .table-group-divider. Voir les documents du tableau pour un exemple.
Scrollspy a été réécrit pour utiliser l'API Intersection Observer , ce qui signifie que vous n'avez plus besoin de wrappers parents relatifs, deoffsetconfiguration obsolète, etc. Recherchez que vos implémentations Scrollspy soient plus précises et cohérentes dans leur mise en évidence de la navigation.
Les popovers et les info-bulles utilisent désormais des variables CSS. Certaines variables CSS ont été mises à jour à partir de leurs homologues Sass pour réduire le nombre de variables. Par conséquent, trois variables sont obsolètes dans cette version : $popover-arrow-color, $popover-arrow-outer-coloret $tooltip-arrow-color.
Ajout de nouveaux .text-bg-{color}assistants. Au lieu de définir des utilitaires individuels .text-*et , vous pouvez désormais utiliser les assistants pour définir un premier plan contrasté ..bg-*.text-bg-*background-colorcolor
Ajout .form-check-reversed'un modificateur pour inverser l'ordre des étiquettes et des cases à cocher/radios associées.
Ajout de la prise en charge des colonnes rayées aux tables via la nouvelle .table-striped-columnsclasse.

Pour une liste complète des modifications, consultez le projet v5.2.0 sur GitHub .

v5.1.0

Ajout de la prise en charge expérimentale de la mise en page CSS Grid . - Il s'agit d'un travail en cours et n'est pas encore prêt pour une utilisation en production, mais vous pouvez opter pour la nouvelle fonctionnalité via Sass. Pour l'activer, désactivez la grille par défaut en définissant $enable-grid-classes: falseet activez la grille CSS en définissant $enable-cssgrid: true.
Barres de navigation mises à jour pour prendre en charge offcanvas. - Ajoutez des tiroirs hors toile dans n'importe quelle barre de navigation avec les .navbar-expand-*classes réactives et un balisage hors toile.
Ajout d'un nouveau composant d'espace réservé . — Notre nouveau composant, un moyen de fournir des blocs temporaires au lieu de contenu réel pour aider à indiquer que quelque chose est toujours en cours de chargement sur votre site ou votre application.
Le plugin Collapse prend désormais en charge le repli horizontal . — Ajoutez .collapse-horizontalà votre .collapsepour réduire le widthau lieu du height. Évitez de repeindre le navigateur en définissant un min-heightou height.
Ajout de nouveaux assistants de pile et de règles verticales. — Appliquez rapidement plusieurs propriétés flexbox pour créer rapidement des mises en page personnalisées avec des piles . Choisissez parmi les piles horizontales ( .hstack) et verticales ( ). .vstackAjoutez des séparateurs verticaux similaires aux <hr>éléments avec les nouveaux .vrassistants .
Ajout de nouvelles :rootvariables CSS globales. — Ajout de plusieurs nouvelles variables CSS au :rootniveau pour contrôler les <body>styles. D'autres sont en préparation, y compris dans nos utilitaires et composants, mais pour l'instant, lisez les variables CSS dans la section Personnaliser .
Révision des utilitaires de couleur et d'arrière-plan pour utiliser les variables CSS, et ajout de nouveaux utilitaires d'opacité du texte et d'opacité d'arrière -plan . - .text-* et .bg-*les utilitaires sont désormais construits avec des variables CSS et rgba()des valeurs de couleur, vous permettant de personnaliser facilement n'importe quel utilitaire avec de nouveaux utilitaires d'opacité.
Ajout de nouveaux exemples d'extraits basés sur la façon de personnaliser nos composants. — Extrayez des composants personnalisés prêts à l'emploi et d'autres modèles de conception courants avec nos nouveaux exemples de Snippets . Inclut les pieds de page , les listes déroulantes , les groupes de listes et les modaux .
Suppression des styles de positionnement inutilisés des popovers et des info-bulles, car ceux-ci sont gérés uniquement par Popper. $tooltip-margina été déprécié et défini sur nulldans le processus.

Vous voulez plus d'informations ? Lisez le billet de blog v5.1.0.

Salut! Les modifications apportées à notre première version majeure de Bootstrap 5, v5.0.0, sont documentées ci-dessous. Ils ne reflètent pas les modifications supplémentaires indiquées ci-dessus.

Dépendances

JQuery abandonné.
Mise à niveau de Popper v1.x vers Popper v2.x.
Remplacement de Libsass par Dart Sass car notre compilateur Sass étant donné que Libsass était obsolète.
Migration de Jekyll vers Hugo pour la construction de notre documentation

Prise en charge du navigateur

Abandon d'Internet Explorer 10 et 11
Suppression de Microsoft Edge < 16 (Edge hérité)
Abandon de Firefox < 60
Abandon de Safari < 12
Abandon iOS Safari < 12
Chrome abandonné < 60

Modifications de la documentation

Page d'accueil, mise en page des documents et pied de page repensés.
Ajout d'un nouveau guide de colis .
Ajout d' une nouvelle section Personnaliser , remplaçant la page Thématisation de la v4 , avec de nouveaux détails sur Sass, les options de configuration globales, les schémas de couleurs, les variables CSS, etc.
Réorganisation de toute la documentation des formulaires dans la nouvelle section Formulaires , divisant le contenu en pages plus ciblées.
De même, mise à jour de la section Mise en page pour étoffer plus clairement le contenu de la grille.
La page du composant « Navs » a été renommée en « Navs et onglets ».
La page « Chèques » a été renommée en « Chèques et radios ».
Refonte de la barre de navigation et ajout d'une nouvelle sous-navigation pour faciliter la navigation sur nos sites et versions de documents.
Ajout d'un nouveau raccourci clavier pour le champ de recherche : Ctrl + /.

Toupet

Nous avons abandonné les fusions de cartes Sass par défaut pour faciliter la suppression des valeurs redondantes. Gardez à l'esprit que vous devez maintenant définir toutes les valeurs dans les cartes Sass comme $theme-colors. Découvrez comment gérer les cartes Sass .
Rupturecolor-yiq()La fonction et les variables associées ont été renommées color-contrast()car elles ne sont plus liées à l'espace colorimétrique YIQ. Voir #30168.
- $yiq-contrasted-thresholdest renommé en $min-contrast-ratio.
- $yiq-text-darket $yiq-text-lightsont respectivement renommés en $color-contrast-darket $color-contrast-light.
RuptureLes paramètres des mixins de requête multimédia ont été modifiés pour une approche plus logique.
- media-breakpoint-down()utilise le point d'arrêt lui-même au lieu du point d'arrêt suivant (par exemple, media-breakpoint-down(lg)au lieu de media-breakpoint-down(md)cibles des fenêtres plus petites que lg).
- De même, le deuxième paramètre dans media-breakpoint-between()utilise également le point d'arrêt lui-même au lieu du point d'arrêt suivant (par exemple, media-between(sm, lg)au lieu des media-breakpoint-between(sm, md)fenêtres cibles entre smet lg).
RuptureSuppression des styles d'impression et de $enable-print-stylesla variable. Les classes d'affichage d'impression sont toujours là. Voir #28339 .
RuptureSuppression des fonctions color(), theme-color()et gray()au profit des variables. Voir #29083 .
Rupturetheme-color-level()La fonction a été renommée color-level()et accepte désormais toutes les couleurs de votre choix au lieu des seules $theme-colorcouleurs. Voir # 29083 Attention : color-level() a été déposé plus tard v5.0.0-alpha3.
RuptureRenommé $enable-prefers-reduced-motion-media-queryet $enable-pointer-cursor-for-buttonsà $enable-reduced-motionet $enable-button-pointerspour la brièveté.
RuptureSuppression du bg-gradient-variant()mixin. Utilisez la .bg-gradientclasse pour ajouter des dégradés aux éléments au lieu des .bg-gradient-*classes générées.
Rupture Suppression des mixins précédemment obsolètes :
- hover, hover-focus, plain-hover-focusethover-focus-active
- float()
- form-control-mixin()
- nav-divider()
- retina-img()
- text-hide()(a également supprimé la classe d'utilité associée, .text-hide)
- visibility()
- form-control-focus()
Rupturescale-color()Fonction renommée shift-color()pour éviter les collisions avec la propre fonction de mise à l'échelle des couleurs de Sass.
box-shadowles mixins autorisent désormais les nullvaleurs et suppriment noneplusieurs arguments. Voir #30394 .
Le border-radius()mixin a maintenant une valeur par défaut.

Système de couleurs

Le système de couleurs qui fonctionnait avec color-level()et $theme-color-intervala été supprimé au profit d'un nouveau système de couleurs. Toutes les fonctions lighten()et darken()de notre base de code sont remplacées par tint-color()et shade-color(). Ces fonctions mélangeront la couleur avec du blanc ou du noir au lieu de modifier sa luminosité d'une quantité fixe. Le shift-color()va teinter ou ombrer une couleur selon que son paramètre de poids est positif ou négatif. Voir #30622 pour plus de détails.
Ajout de nouvelles teintes et nuances pour chaque couleur, fournissant neuf couleurs distinctes pour chaque couleur de base, en tant que nouvelles variables Sass.
Contraste des couleurs amélioré. Rapport de contraste des couleurs augmenté de 3: 1 à 4,5: 1 et couleurs bleu, vert, cyan et rose mises à jour pour assurer le contraste WCAG 2.1 AA. Également changé notre couleur de contraste de couleur de $gray-900à $black.
Pour prendre en charge notre système de couleurs, nous avons ajouté de nouvelles fonctions tint-color()et shade-color()fonctionnalités personnalisées pour mélanger nos couleurs de manière appropriée.

Mises à jour de la grille

Nouveau point d'arrêt ! Ajout d'un nouveau xxlpoint d'arrêt pour 1400pxet plus. Aucun changement à tous les autres points d'arrêt.
Gouttières améliorées. Les gouttières sont désormais définies en rems et sont plus étroites que la v4 ( 1.5rem, ou environ 24px, en baisse par rapport à 30px). Cela aligne les gouttières de notre système de grille avec nos utilitaires d'espacement.
- Ajout d'une nouvelle classe de gouttière ( .g-*, .gx-*, et .gy-*) pour contrôler les gouttières horizontales/verticales, les gouttières horizontales et les gouttières verticales.
- RuptureRenommé .no-gutterspour .g-0correspondre aux nouveaux utilitaires de gouttière.
Les colonnes ne position: relatives'appliquent plus, vous devrez donc peut-être ajouter .position-relativedes éléments pour restaurer ce comportement.
RuptureSuppression de plusieurs .order-*classes souvent inutilisées. Nous ne fournissons désormais que des produits prêts .order-1à .order-5l'emploi.
RuptureSuppression du .mediacomposant car il peut être facilement répliqué avec des utilitaires. Voir #28265 et la page des utilitaires flex pour un exemple .
Rupture bootstrap-grid.csss'applique désormais uniquement box-sizing: border-boxà la colonne au lieu de réinitialiser le dimensionnement global de la boîte. De cette façon, nos styles de grille peuvent être utilisés dans plus d'endroits sans interférence.
$enable-grid-classesne désactive plus la génération de classes de conteneurs. Voir #29146.
Mise à jour du make-colmixin par défaut pour des colonnes égales sans taille spécifiée.

Contenu, redémarrage, etc.

RFS est maintenant activé par défaut. Les titres utilisant lefont-size()mixin s'ajusteront automatiquementfont-sizeà l'échelle avec la fenêtre d'affichage. Cette fonctionnalité était auparavant opt-in avec la v4.
RuptureRefonte de notre typographie d'affichage pour remplacer nos $display-*variables et avec une $display-font-sizescarte Sass. Également supprimé les $display-*-weightvariables individuelles pour un seul $display-font-weightet ajusté font-sizes.
Ajout de deux nouvelles .display-*tailles de titre, .display-5et .display-6.
Les liens sont soulignés par défaut (pas seulement au survol), sauf s'ils font partie de composants spécifiques.
Tableaux repensés pour actualiser leurs styles et les reconstruire avec des variables CSS pour plus de contrôle sur le style.
RuptureLes tables imbriquées n'héritent plus des styles.
Rupture .thead-lightet .thead-darksont abandonnés au profit des .table-*classes variantes qui peuvent être utilisées pour tous les éléments de table ( thead, tbody, tfoot, tr, thet td).
RuptureLe table-row-variant()mixin est renommé en table-variant()et n'accepte que 2 paramètres : $color(nom de la couleur) et $value(code de la couleur). La couleur de bordure et les couleurs d'accent sont automatiquement calculées en fonction des variables de facteur de table.
Divisez les variables de remplissage des cellules du tableau en -yet -x.
RuptureClasse abandonnée .pre-scrollable. Voir #29135
Rupture .text-*les utilitaires n'ajoutent plus les états de survol et de focus aux liens. .link-*les classes d'assistance peuvent être utilisées à la place. Voir #29267
RuptureClasse abandonnée .text-justify. Voir #29793
Rupture <hr>les éléments utilisent maintenant heightau lieu de borderpour mieux prendre en charge l' sizeattribut. Cela permet également d'utiliser des utilitaires de remplissage pour créer des séparateurs plus épais (par exemple, <hr class="py-1">).
Réinitialisez l'horizontale par défaut padding-leftsur <ul>et les <ol>éléments par défaut du navigateur 40pxsur 2rem.
Ajouté $enable-smooth-scroll, qui s'applique à scroll-behavior: smoothl'échelle mondiale, sauf pour les utilisateurs demandant une réduction de mouvement via prefers-reduced-motionune requête multimédia. Voir #31877

RTL

Les variables spécifiques à la direction horizontale, les utilitaires et les mixins ont tous été renommés pour utiliser des propriétés logiques comme celles trouvées dans les mises en page flexibles, par exemple, startet endau lieu de leftet right.

Formes

Ajout de nouveaux formulaires flottants ! Nous avons promu l'exemple d'étiquettes flottantes aux composants de formulaire entièrement pris en charge. Voir la nouvelle page Étiquettes flottantes.
Rupture Éléments de formulaire natifs et personnalisés consolidés. Les cases à cocher, radios, sélections et autres entrées qui avaient des classes natives et personnalisées dans la v4 ont été consolidées. Maintenant, presque tous nos éléments de formulaire sont entièrement personnalisés, la plupart sans avoir besoin de code HTML personnalisé.
- .custom-control.custom-checkboxest maintenant .form-check.
- .custom-control.custom-custom-radioest maintenant .form-check.
- .custom-control.custom-switchest maintenant .form-check.form-switch.
- .custom-selectest maintenant .form-select.
- .custom-fileet .form-fileont été remplacés par des styles personnalisés en plus de .form-control.
- .custom-rangeest maintenant .form-range.
- Abandon natif .form-control-fileet .form-control-range.
RuptureA chuté .input-group-appendet .input-group-prepend. Vous pouvez maintenant simplement ajouter des boutons et .input-group-texten tant qu'enfants directs des groupes d'entrée.
Le rayon de bordure manquant de longue date sur le groupe d'entrée avec le bogue de rétroaction de validation est enfin corrigé en ajoutant une .has-validationclasse supplémentaire aux groupes d'entrée avec validation.
Rupture Suppression des classes de mise en page spécifiques au formulaire pour notre système de grille. Utilisez notre grille et nos utilitaires au lieu de .form-group, .form-rowou .form-inline.
RuptureLes étiquettes de formulaire nécessitent désormais .form-label.
Rupture .form-textne définit plus display, vous permettant de créer du texte d'aide en ligne ou de bloquer comme vous le souhaitez simplement en modifiant l'élément HTML.
Les contrôles de formulaire ne sont plus utilisés corrigés heightlorsque cela est possible, reportant à la place min-heightpour améliorer la personnalisation et la compatibilité avec d'autres composants.
Les icônes de validation ne sont plus appliquées aux <select>s avec multiple.
Fichiers Sass source réorganisés sous scss/forms/, y compris les styles de groupe d'entrée.

Composants

Les valeurs unifiées paddingpour les alertes, les fils d'Ariane, les cartes, les listes déroulantes, les groupes de listes, les modaux, les popovers et les info-bulles doivent être basées sur notre $spacervariable. Voir #30564 .

Accordéon

Ajout d' un nouveau composant d'accordéon .

Alertes

Les alertes ont maintenant des exemples avec des icônes .
Suppression des styles personnalisés pour <hr>s dans chaque alerte car ils utilisent déjà currentColor.

Insignes

RuptureSuppression de toutes .badge-*les classes de couleurs pour les utilitaires d'arrière-plan (par exemple, utilisez à la .bg-primaryplace de .badge-primary).
RuptureAbandonné .badge-pill— utilisez l' .rounded-pillutilitaire à la place.
RuptureSuppression des styles de survol et de focus pour les éléments <a>et <button>.
Augmentation du rembourrage par défaut pour les badges de .25em/ .5emà .35em/ .65em.

Chapelure

Simplification de l'apparence par défaut des fils d'Ariane en supprimant padding, background-coloret border-radius.
Ajout d'une nouvelle propriété personnalisée CSS --bs-breadcrumb-dividerpour une personnalisation facile sans avoir à recompiler le CSS.

Boutons

Rupture Les boutons bascule , avec des cases à cocher ou des radios, ne nécessitent plus JavaScript et ont un nouveau balisage. Nous n'avons plus besoin d'un élément d'emballage, ajoutons.btn-check-le à<input>et jumelons-le avec n'importe quelle.btnclasse sur le<label>. Voir #30650 . La documentation à ce sujet a été déplacée de notre page Boutons vers la nouvelle section Formulaires.
Rupture Abandonné .btn-blockpour les services publics. Au lieu d'utiliser .btn-blocksur le .btn, enveloppez vos boutons avec .d-gridet un .gap-*utilitaire pour les espacer selon vos besoins. Passez à des classes réactives pour encore plus de contrôle sur elles. Lisez la documentation pour quelques exemples.
Mise à jour de nos button-variant()et button-outline-variant()mixins pour prendre en charge des paramètres supplémentaires.
Boutons mis à jour pour assurer un contraste accru lors du survol et des états actifs.
Les boutons désactivés ont maintenant pointer-events: none;.

Carte

RuptureAbandonné .card-deckau profit de notre grille. Enveloppez vos cartes dans des classes de colonnes et ajoutez un .row-cols-*conteneur parent pour recréer des jeux de cartes (mais avec plus de contrôle sur l'alignement réactif).
RuptureAbandonné .card-columnsau profit de la maçonnerie. Voir #28922 .
RuptureRemplacement de l' .cardaccordéon de base par un nouveau composant Accordéon .

Carrousel

Ajout d'une nouvelle .carousel-darkvariante pour le texte sombre, les commandes et les indicateurs (idéal pour les arrière-plans plus clairs).
Remplacement des icônes en chevron pour les commandes du carrousel par de nouveaux SVG de Bootstrap Icons .

Bouton Fermer

RuptureRenommé .closeen .btn-closepour un nom moins générique.
Les boutons de fermeture utilisent désormais un background-image(SVG intégré) au lieu d'un ×dans le HTML, ce qui permet une personnalisation plus facile sans avoir à toucher à votre balisage.
Ajout d'une nouvelle .btn-close-whitevariante qui filter: invert(1)permet d'activer des icônes de rejet à contraste plus élevé sur des arrière-plans plus sombres.

Effondrement

Suppression de l'ancrage de défilement pour les accordéons.

Listes déroulantes

Ajout d'une nouvelle .dropdown-menu-darkvariante et de variables associées pour les listes déroulantes sombres à la demande.
Ajout d'une nouvelle variable pour $dropdown-padding-x.
Assombrit le séparateur déroulant pour un meilleur contraste.
RuptureTous les événements de la liste déroulante sont maintenant déclenchés sur le bouton bascule de la liste déroulante, puis transmis à l'élément parent.
Les menus déroulants ont désormais un data-bs-popper="static"attribut défini lorsque le positionnement de la liste déroulante est statique ou que la liste déroulante se trouve dans la barre de navigation. Ceci est ajouté par notre JavaScript et nous aide à utiliser des styles de position personnalisés sans interférer avec le positionnement de Popper.
RuptureOption abandonnée flippour le plugin déroulant en faveur de la configuration native de Popper. Vous pouvez maintenant désactiver le comportement de retournement en passant un tableau vide pour l' fallbackPlacementsoption dans le modificateur de retournement .
Les menus déroulants peuvent maintenant être cliquables avec une nouvelle autoCloseoption pour gérer le comportement de fermeture automatique . Vous pouvez utiliser cette option pour accepter le clic à l'intérieur ou à l'extérieur du menu déroulant pour le rendre interactif.
Les listes déroulantes prennent désormais en charge les .dropdown-items enveloppés dans <li>s.

Jumbotron

RuptureSuppression du composant jumbotron car il peut être répliqué avec des utilitaires. Voir notre nouvel exemple Jumbotron pour une démonstration.

Groupe de listes

Ajout d'un nouveau .list-group-numberedmodificateur pour lister les groupes.

Navs et onglets

Ajout de nouvelles nullvariables pour font-size, font-weight, coloret :hover colorà la .nav-linkclasse.

Barres de navigation

RuptureLes barres de navigation nécessitent désormais un conteneur à l'intérieur (pour simplifier considérablement les exigences d'espacement et le CSS requis).
RuptureLa .activeclasse ne peut plus être appliquée à .nav-items, elle doit être appliquée directement sur .nav-links.

Hors toile

Ajout du nouveau composant offcanvas .

Pagination

Les liens de pagination sont désormais personnalisables margin-leftet arrondis dynamiquement à tous les coins lorsqu'ils sont séparés les uns des autres.
Ajout transitionde s aux liens de pagination.

popovers

RuptureRenommé .arrowen .popover-arrowdans notre modèle de popover par défaut.
whiteListOption renommée en allowList.

Spinners

Les spinners honorent désormais prefers-reduced-motion: reduceen ralentissant les animations. Voir #31882 .
Amélioration de l'alignement vertical du spinner.

Toasts

Les toasts peuvent désormais être positionnés dans un .toast-containerà l'aide d' utilitaires de positionnement .
Modification de la durée de toast par défaut à 5 secondes.
Retiré des toasts et remplacé par des s overflow: hiddenappropriés avec des fonctions.border-radiuscalc()

Info-bulles

RuptureRenommé .arrowen .tooltip-arrowdans notre modèle d'info-bulle par défaut.
RuptureLa valeur par défaut de fallbackPlacementsest remplacée par ['top', 'right', 'bottom', 'left']pour un meilleur placement des éléments popper.
RupturewhiteListOption renommée en allowList.

Utilitaires

RupturePlusieurs utilitaires renommés pour utiliser des noms de propriété logiques au lieu de noms directionnels avec l'ajout de la prise en charge RTL :
- Renommé .left-*et .right-*en .start-*et .end-*.
- Renommé .float-leftet .float-righten .float-startet .float-end.
- Renommé .border-leftet .border-righten .border-startet .border-end.
- Renommé .rounded-leftet .rounded-righten .rounded-startet .rounded-end.
- Renommé .ml-*et .mr-*en .ms-*et .me-*.
- Renommé .pl-*et .pr-*en .ps-*et .pe-*.
- Renommé .text-leftet .text-righten .text-startet .text-end.
RuptureMarges négatives désactivées par défaut.
Ajout d'une nouvelle .bg-bodyclasse pour définir rapidement l' <body>arrière-plan de 's sur des éléments supplémentaires.
Ajout de nouveaux utilitaires de position pour top, right, bottomet left. Les valeurs incluent 0, 50%et 100%pour chaque propriété.
Ajout de nouveaux .translate-middle-x& .translate-middle-yutilitaires pour centrer horizontalement ou verticalement les éléments positionnés de manière absolue/fixe.
Ajout de nouveaux border-widthutilitaires .
RuptureRenommé .text-monospaceen .font-monospace.
RuptureSupprimé .text-hidecar il s'agit d'une méthode obsolète pour masquer du texte qui ne devrait plus être utilisée.
Ajout .fs-*d'utilitaires pour font-sizeles utilitaires (avec RFS activé). Ceux-ci utilisent la même échelle que les en-têtes par défaut de HTML (1-6, grand à petit) et peuvent être modifiés via la carte Sass.
RuptureUtilitaires renommés pour .font-weight-*plus .fw-*de concision et de cohérence.
RuptureUtilitaires renommés pour .font-style-*plus .fst-*de concision et de cohérence.
Ajouté .d-gridpour afficher les utilitaires et les nouveaux gaputilitaires ( .gap) pour les mises en page CSS Grid et flexbox.
RuptureSuppression .rounded-smde et rounded-lg, et introduction d'une nouvelle échelle de classes, .rounded-0à .rounded-3. Voir #31687 .
Ajout de nouveaux line-heightutilitaires : .lh-1, .lh-smet .lh-base. .lh-lgVoir ici .
Déplacement de l' .d-noneutilitaire dans notre CSS pour lui donner plus de poids par rapport aux autres utilitaires d'affichage.
Extension de l' .visually-hidden-focusableassistant pour travailler également sur les conteneurs, en utilisant :focus-within.

Aides

Rupture Les assistants d'intégration réactifs ont été renommés en assistants de ratio avec de nouveaux noms de classe et des comportements améliorés, ainsi qu'une variable CSS utile.
- Les classes ont été renommées pour changer byen xdans le rapport d'aspect. Par exemple, .ratio-16by9est maintenant .ratio-16x9.
- Nous avons abandonné le sélecteur de groupe d'éléments et au profit d'un sélecteur .embed-responsive-itemplus simple . .ratio > *Plus besoin de classe, et l'assistant de ratio fonctionne désormais avec n'importe quel élément HTML.
- La $embed-responsive-aspect-ratioscarte Sass a été renommée $aspect-ratioset ses valeurs ont été simplifiées pour inclure le nom de la classe et le pourcentage comme key: valuepaire.
- Les variables CSS sont maintenant générées et incluses pour chaque valeur dans la carte Sass. Modifiez la --bs-aspect-ratiovariable sur le .ratiopour créer un rapport hauteur/largeur personnalisé .
Rupture Les classes "lecteur d'écran" sont désormais des classes "masquées visuellement" .
- Modification du fichier Sass de scss/helpers/_screenreaders.scssàscss/helpers/_visually-hidden.scss
- Renommé .sr-onlyet .sr-only-focusableen .visually-hiddenet.visually-hidden-focusable
- Renommé sr-only()et sr-only-focusable()mixins en visually-hidden()et visually-hidden-focusable().
bootstrap-utilities.cssinclut désormais également nos aides. Les assistants n'ont plus besoin d'être importés dans les versions personnalisées.

Javascript

Suppression de la dépendance jQuery et réécriture des plugins pour qu'ils soient en JavaScript normal.
RuptureLes attributs de données de tous les plug-ins JavaScript sont désormais dotés d'un espace de noms pour aider à distinguer la fonctionnalité Bootstrap des tiers et de votre propre code. Par exemple, nous utilisons à la data-bs-toggleplace de data-toggle.
Tous les plugins peuvent désormais accepter un sélecteur CSS comme premier argument. Vous pouvez passer un élément DOM ou tout sélecteur CSS valide pour créer une nouvelle instance du plugin :
```
const modal = new bootstrap.Modal('#myModal')
const dropdown = new bootstrap.Dropdown('[data-bs-toggle="dropdown"]')
```
popperConfigpeut être passé en tant que fonction qui accepte la configuration Popper par défaut de Bootstrap comme argument, afin que vous puissiez fusionner cette configuration par défaut à votre manière. S'applique aux listes déroulantes, aux fenêtres contextuelles et aux info-bulles.
La valeur par défaut de fallbackPlacementsest remplacée par ['top', 'right', 'bottom', 'left']pour un meilleur placement des éléments Popper. S'applique aux listes déroulantes, aux fenêtres contextuelles et aux info-bulles.
Suppression du trait de soulignement des méthodes statiques publiques telles que _getInstance()→ getInstance().