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.
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 . -
Rupture
color-yiq()
La fonction et les variables associées ont été renomméescolor-contrast()
car elles ne sont plus liées à l'espace colorimétrique YIQ. Voir #30168.$yiq-contrasted-threshold
est renommé en$min-contrast-ratio
.$yiq-text-dark
et$yiq-text-light
sont respectivement renommés en$color-contrast-dark
et$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 demedia-breakpoint-down(md)
cibles des fenêtres plus petites quelg
).- 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 desmedia-breakpoint-between(sm, md)
fenêtres cibles entresm
etlg
).
-
RuptureSuppression des styles d'impression et de
$enable-print-styles
la variable. Les classes d'affichage d'impression sont toujours là. Voir #28339 . -
RuptureSuppression des fonctions
color()
,theme-color()
etgray()
au profit des variables. Voir #29083 . -
Rupture
theme-color-level()
La fonction a été renomméecolor-level()
et accepte désormais toutes les couleurs de votre choix au lieu des seules$theme-color
couleurs. Voir # 29083 Attention :color-level()
a été déposé plus tardv5.0.0-alpha3
. -
RuptureRenommé
$enable-prefers-reduced-motion-media-query
et$enable-pointer-cursor-for-buttons
à$enable-reduced-motion
et$enable-button-pointers
pour la brièveté. -
RuptureSuppression du
bg-gradient-variant()
mixin. Utilisez la.bg-gradient
classe 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-focus
ethover-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()
-
Rupture
scale-color()
Fonction renomméeshift-color()
pour éviter les collisions avec la propre fonction de mise à l'échelle des couleurs de Sass. -
box-shadow
les mixins autorisent désormais lesnull
valeurs et supprimentnone
plusieurs 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-interval
a été supprimé au profit d'un nouveau système de couleurs. Toutes les fonctionslighten()
etdarken()
de notre base de code sont remplacées partint-color()
etshade-color()
. Ces fonctions mélangeront la couleur avec du blanc ou du noir au lieu de modifier sa luminosité d'une quantité fixe. Leshift-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()
etshade-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
xxl
point d'arrêt pour1400px
et 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 environ24px
, 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-gutters
pour.g-0
correspondre aux nouveaux utilitaires de gouttière.
- Ajout d'une nouvelle classe de gouttière (
-
Les colonnes ne
position: relative
s'appliquent plus, vous devrez donc peut-être ajouter.position-relative
des é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-5
l'emploi. -
RuptureSuppression du
.media
composant car il peut être facilement répliqué avec des utilitaires. Voir #28265 et la page des utilitaires flex pour un exemple . -
Rupture
bootstrap-grid.css
s'applique désormais uniquementbox-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-classes
ne désactive plus la génération de classes de conteneurs. Voir #29146. -
Mise à jour du
make-col
mixin 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 le
font-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-sizes
carte Sass. Également supprimé les$display-*-weight
variables individuelles pour un seul$display-font-weight
et ajustéfont-size
s. -
Ajout de deux nouvelles
.display-*
tailles de titre,.display-5
et.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-light
et.thead-dark
sont abandonnés au profit des.table-*
classes variantes qui peuvent être utilisées pour tous les éléments de table (thead
,tbody
,tfoot
,tr
,th
ettd
). -
RuptureLe
table-row-variant()
mixin est renommé entable-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
-y
et-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-left
sur<ul>
et les<ol>
éléments par défaut du navigateur40px
sur2rem
. -
Ajouté
$enable-smooth-scroll
, qui s'applique àscroll-behavior: smooth
l'échelle mondiale, sauf pour les utilisateurs demandant une réduction de mouvement viaprefers-reduced-motion
une 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,
start
etend
au lieu deleft
etright
.
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-check
est maintenant.form-check
..custom-check.custom-switch
est maintenant.form-check.form-switch
..custom-select
est maintenant.form-select
..custom-file
et.form-file
ont été remplacés par des styles personnalisés en plus de.form-control
..custom-range
est maintenant.form-range
.- Abandon natif
.form-control-file
et.form-control-range
.
-
RuptureA chuté
.input-group-append
et.input-group-prepend
. Vous pouvez maintenant simplement ajouter des boutons et.input-group-text
en 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-validation
classe 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-row
ou.form-inline
. -
RuptureLes étiquettes de formulaire nécessitent désormais
.form-label
. -
Rupture
.form-text
ne définit plusdisplay
, 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 avecmultiple
. -
Fichiers Sass source réorganisés sous
scss/forms/
, y compris les styles de groupe d'entrée.
Composants
- Les valeurs unifiées
padding
pour 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$spacer
variable. 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-primary
place de.badge-primary
). -
RuptureAbandonné
.badge-pill
— utilisez l'.rounded-pill
utilitaire à 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-color
etborder-radius
. -
Ajout d'une nouvelle propriété personnalisée CSS
--bs-breadcrumb-divider
pour 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.btn
classe 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-block
pour les services publics. Au lieu d'utiliser.btn-block
sur le.btn
, enveloppez vos boutons avec.d-grid
et 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()
etbutton-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-deck
au 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-columns
au profit de la maçonnerie. Voir #28922 . -
RuptureRemplacement de l'
.card
accordéon de base par un nouveau composant Accordéon .
Carrousel
-
Ajout d'une nouvelle
.carousel-dark
variante 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é
.close
en.btn-close
pour 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-white
variante quifilter: 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-dark
variante 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 etdata-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
flip
pour 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'fallbackPlacements
option dans le modificateur de retournement . -
Les menus déroulants peuvent maintenant être cliquables avec une nouvelle
autoClose
option 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-item
s 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-numbered
modificateur pour lister les groupes.
Navs et onglets
- Ajout de nouvelles
null
variables pourfont-size
,font-weight
,color
et:hover
color
à la.nav-link
classe.
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-left
et arrondis dynamiquement à tous les coins lorsqu'ils sont séparés les uns des autres. -
Ajout
transition
de s aux liens de pagination.
popovers
-
RuptureRenommé
.arrow
en.popover-arrow
dans notre modèle de popover par défaut. -
whiteList
Option renommée enallowList
.
Spinners
-
Les spinners honorent désormais
prefers-reduced-motion: reduce
en 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: hidden
appropriés avec des fonctions.border-radius
calc()
Info-bulles
-
RuptureRenommé
.arrow
en.tooltip-arrow
dans notre modèle d'info-bulle par défaut. -
RuptureLa valeur par défaut de
fallbackPlacements
est remplacée par['top', 'right', 'bottom', 'left']
pour un meilleur placement des éléments popper. -
Rupture
whiteList
Option renommée enallowList
.
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-left
et.float-right
en.float-start
et.float-end
. - Renommé
.border-left
et.border-right
en.border-start
et.border-end
. - Renommé
.rounded-left
et.rounded-right
en.rounded-start
et.rounded-end
. - Renommé
.ml-*
et.mr-*
en.ms-*
et.me-*
. - Renommé
.pl-*
et.pr-*
en.ps-*
et.pe-*
. - Renommé
.text-left
et.text-right
en.text-start
et.text-end
.
- Renommé
-
RuptureMarges négatives désactivées par défaut.
-
Ajout d'une nouvelle
.bg-body
classe 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
,bottom
etleft
. Les valeurs incluent0
,50%
et100%
pour chaque propriété. -
Ajout de nouveaux
.translate-middle-x
&.translate-middle-y
utilitaires pour centrer horizontalement ou verticalement les éléments positionnés de manière absolue/fixe. -
Ajout de nouveaux
border-width
utilitaires . -
RuptureRenommé
.text-monospace
en.font-monospace
. -
RuptureSupprimé
.text-hide
car il s'agit d'une méthode obsolète pour masquer du texte qui ne devrait plus être utilisée. -
Ajout
.fs-*
d'utilitaires pourfont-size
les 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-grid
pour afficher les utilitaires et les nouveauxgap
utilitaires (.gap
) pour les mises en page CSS Grid et flexbox. -
RuptureSuppression
.rounded-sm
de etrounded-lg
, et introduction d'une nouvelle échelle de classes,.rounded-0
à.rounded-3
. Voir #31687 . -
Ajout de nouveaux
line-height
utilitaires :.lh-1
,.lh-sm
et.lh-base
..lh-lg
Voir ici . -
Déplacement de l'
.d-none
utilitaire dans notre CSS pour lui donner plus de poids par rapport aux autres utilitaires d'affichage. -
Extension de l'
.visually-hidden-focusable
assistant 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
by
enx
dans le rapport d'aspect. Par exemple,.ratio-16by9
est maintenant.ratio-16x9
. - Nous avons abandonné le sélecteur de groupe d'éléments et au profit d'un sélecteur
.embed-responsive-item
plus 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-ratios
carte Sass a été renommée$aspect-ratios
et ses valeurs ont été simplifiées pour inclure le nom de la classe et le pourcentage commekey: value
paire. - Les variables CSS sont maintenant générées et incluses pour chaque valeur dans la carte Sass. Modifiez la
--bs-aspect-ratio
variable sur le.ratio
pour créer un rapport d'aspect personnalisé .
- Les classes ont été renommées pour changer
-
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-only
et.sr-only-focusable
en.visually-hidden
et.visually-hidden-focusable
- Renommé
sr-only()
etsr-only-focusable()
mixins envisually-hidden()
etvisually-hidden-focusable()
.
- Modification du fichier Sass de
-
bootstrap-utilities.css
inclut 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-toggle
place dedata-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"]')
-
popperConfig
peut ê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
fallbackPlacements
est 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()
.