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

Dépendances

Abandon de jQuery.
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
Abandon 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
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-checkest maintenant .form-check.
- .custom-check.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 retour 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 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 de chevron pour les contrôles de 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 du menu déroulant est statique et data-bs-popper="none"lorsque le menu déroulant 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 afin de 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 liste

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

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 d'aspect 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 :
```
var modal = new bootstrap.Modal('#myModal')
var 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 façon. S'applique aux listes déroulantes, aux popovers 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 popovers et aux info-bulles.
Suppression du trait de soulignement des méthodes statiques publiques telles que _getInstance()→ getInstance().