Migrazione à v5

Track and review changes to the Bootstrap file source, documentation, and components to help you migrate from v4 to v5.

In sta pagina

Dipendenze

JQuery sguassatu.
Aghjurnatu da Popper v1.x à Popper v2.x.
Sustituitu Libsass cù Dart Sass cum'è u nostru compilatore Sass datu Libsass era obsoletu.
Migratu da Jekyll à Hugo per custruisce a nostra documentazione

Supportu di u navigatore

Abbandunatu Internet Explorer 10 è 11
Sguassatu Microsoft Edge < 16 (Legacy Edge)
Sguassatu Firefox <60
Safari abandonné < 12
Caduta iOS Safari < 12
Chrome abbandunatu <60

A documentazione cambia

Pagina iniziale, layout di documenti è piè di pagina riprogettati.
Aggiunta una nova guida di Parcel .
Added new Customize section , rimpiazzà a pagina Theming di v4 , cù novi dettagli nantu à Sass, opzioni di cunfigurazione globale, schemi di culori, variabili CSS, è più.
Riurganizata tutta a documentazione di u furmulariu in a nova sezione Forme , sparghjendu u cuntenutu in pagine più focu.
In listessu modu, aghjurnatu a sezione Layout , per sbulicà u cuntenutu di a griglia più chjaramente.
Rinominata pagina di cumpunenti "Navs" in "Navs & Tabs".
Rinominata a pagina "Controlli" in "Controlli è radio".
Riprogettatu a barra di navigazione è aghjustatu un novu subnav per fà più faciule per andà in i nostri siti è versioni di documenti.
Aggiunta una nova scorciata di tastiera per u campu di ricerca: Ctrl + /.

Sass

Avemu abbandunatu e fusioni di carte Sass predeterminate per fà più faciule per sguassà i valori ridondanti. Tenite in mente chì avà deve definisce tutti i valori in i mape Sass cum'è $theme-colors. Scuprite cumu trattà cù e carte Sass .
RuptureFunzione rinominata color-yiq()è variabili cunnessi color-contrast()cum'è ùn hè più ligata à u spaziu di culore YIQ. Vede # 30168.
- $yiq-contrasted-thresholdhè rinominatu in $min-contrast-ratio.
- $yiq-text-darkè $yiq-text-lightsò rinominati rispettivamente in $color-contrast-darkè $color-contrast-light.
RuptureI paràmetri di mixins di media query sò cambiati per un approcciu più logicu.
- media-breakpoint-down()usa u breakpoint stessu invece di u prossimu breakpoint (p.e., media-breakpoint-down(lg)invece di media-breakpoint-down(md)mira à i punti di vista più chjuchi di lg).
- In u listessu modu, u sicondu paràmetru in media-breakpoint-between()usa ancu u puntu di scontru stessu invece di u prossimu puntu di scontru (per esempiu, media-between(sm, lg)invece di vede i punti di media-breakpoint-between(sm, md)vista trà smè lg).
RuptureStili di stampa eliminati è $enable-print-stylesvariabili. E classi di visualizazione di stampa sò sempre intornu. Vede # 28339 .
RuptureDropped color(), theme-color(), e gray()funzioni in favore di variàbili. Vede # 29083 .
RuptureFunzione rinominata theme-color-level()à color-level()è avà accetta ogni culore chì vulete invece di solu $theme-colorculori. Vede # 29083 Attenti : color-level() hè stata più tardi abbandunata in v5.0.0-alpha3.
RuptureRinominatu $enable-prefers-reduced-motion-media-queryè $enable-pointer-cursor-for-buttonsà $enable-reduced-motionè $enable-button-pointersper brevità.
RuptureEliminatu u bg-gradient-variant()mixin. Aduprate a .bg-gradientclassa per aghjunghje gradienti à elementi invece di e .bg-gradient-*classi generate.
Rupture Eliminati i mixin precedentemente obsoleti:
- hover, hover-focus, plain-hover-focus, èhover-focus-active
- float()
- form-control-mixin()
- nav-divider()
- retina-img()
- text-hide()(abbandunò ancu a classe di utilità assuciata, .text-hide)
- visibility()
- form-control-focus()
RuptureFunzione rinominata scale-color()per shift-color()evità a collisione cù a funzione di scala di culore di Sass.
box-shadowI mixins ora permettenu i nullvalori è abbandunà noneda parechji argumenti. Vede # 30394 .
U border-radius()mixin hà avà un valore predeterminatu.

Sistema di culore

U sistema di culore chì hà travagliatu color-level()è $theme-color-intervalhè statu eliminatu in favore di un novu sistema di culore. Tutte lighten()e darken()funzioni in a nostra basa di codice sò rimpiazzate da tint-color()è shade-color(). Queste funzioni mischjeranu u culore cù biancu o neru invece di cambià a so ligerezza per una quantità fissa. U shift-color()tinterà o sfumatura un culore sicondu u so paràmetru di pesu hè pusitivu o negativu. Vede # 30622 per più dettagli.
Aghjunghjite novi tinte è sfumature per ogni culore, furnisce nove culori separati per ogni culore di basa, cum'è novi variabili Sass.
Cuntrastu di culore migliuratu. U rapportu di cuntrastu di u culore sbulicatu da 3: 1 à 4.5: 1 è i culori blu, verdi, ciani è rosa aghjurnati per assicurà u cuntrastu WCAG 2.1 AA. Ancu cambiatu u nostru culore di cuntrastu di culore da $gray-900a $black.
Per sustene u nostru sistema di culore, avemu aghjustatu novi persunalizazioni tint-color()è shade-color()funzioni per mischjà i nostri culori in modu adattatu.

L'aghjurnamenti di a griglia

Novu breakpoint! Aggiuntu novu xxlbreakpoint per 1400pxè up. Nisun cambiamenti à tutti l'altri punti di rottura.
Gouttières améliorées. Gutters sò oghji stabilitu in rems, è sò più stretti di v4 ( 1.5rem, o circa 24px, falà da 30px). Questu allinea i canali di u nostru sistema di griglia cù e nostre utilità di spaziatura.
- Aggiunta una nova classe di goutte ( .g-*, .gx-*, è .gy-*) per cuntrullà i canotti orizontali / verticali, i canotti horizontali è i canali verticali.
- RuptureRinominatu .no-guttersà .g-0per currisponde à e novi utilità di gutter.
I culonni ùn anu più position: relativeappiicatu, perchè pudete avè da aghjunghje .position-relativeà certi elementi per restaurà quellu cumpurtamentu.
RuptureAbbandunate parechje .order-*classi chì spessu ùn anu micca usatu. Avemu avà solu furnisce fora .order-1di .order-5a scatula.
RuptureAbbandunatu u .mediacumpunente perchè pò esse facilmente replicatu cù utilità. Vede #28265 è a pagina di utilità flex per un esempiu .
Rupture bootstrap-grid.cssavà s'applica solu box-sizing: border-boxà a colonna invece di resetting u box-sizing globale. In questu modu, i nostri stili di griglia ponu esse utilizati in più posti senza interferenza.
$enable-grid-classesùn disattiva più a generazione di classi di container. Vede # 29146.
Aghjurnatu u make-colmixin per difettu à e colonne uguali senza una dimensione specifica.

Cuntenutu, reboot, etc

RFS hè avà attivatu per difettu. Intestazioni chì utilizanu ufont-size()mixin aghjustà automaticamente a sofont-sizescala cù a vista. Questa funzione era prima opt-in cù v4.
RuptureRevisionatu a nostra tipografia di visualizazione per rimpiazzà e nostre $display-*variàbili è cù una $display-font-sizesmappa Sass. $display-*-weightEliminate ancu e variàbili individuali per un s unicu $display-font-weightè aghjustatu font-size.
Aghjunghjite duie novi .display-*dimensioni di intestazioni, .display-5è .display-6.
I ligami sò sottolineati per difettu (micca solu nantu à u passaghju), salvu chì sò parti di cumpunenti specifichi.
Tavule riprogettate per rinfriscà i so stili è ricustruisce cù variabili CSS per più cuntrollu di u stilu.
RuptureE tavule nidificate ùn eredite più stili.
Rupture .thead-lightè .thead-darksò abbandunati in favore di e classi .table-*varianti chì ponu esse usatu per tutti l'elementi di a tavola ( thead, tbody, tfoot, trè ).thtd
RuptureU table-row-variant()mixin hè rinominatu table-variant()è accetta solu 2 paràmetri: $color(nome di culore) è $value(codice di culore). U culore di u cunfini è i culori di l'accentu sò calculati automaticamente in basa di e variàbili di fattore di tabella.
Divide e variabili di riempimentu di cellula di a tabella in -ye -x.
RuptureClasse abbandunata .pre-scrollable. Vede # 29135
Rupture .text-*utilità ùn aghjunghjenu più stati di hover è focus à i ligami. .link-*E classi di helper ponu esse usate invece. Vede # 29267
RuptureClasse abbandunata .text-justify. Vede # 29793
Rupture <hr>elementi avà usanu heightinvece di bordersustene megliu l' sizeattributu. Questu permette ancu l'usu di l'utilità di imbottitura per creà divisori più grossi (per esempiu, <hr class="py-1">).
Ripristina l'horizontale predefinitu è padding-leftl' elementi da u navigatore predefinitu à .<ul><ol>40px2rem
Added $enable-smooth-scroll, chì s'applica scroll-behavior: smoothin u mondu, eccettu per l'utilizatori chì dumandanu un muvimentu ridottu attraversu prefers-reduced-motionmedia query. Vede # 31877

RTL

Variabili, utilità è mixin specifichi di direzzione horizontale sò stati tutti rinominati per utilizà proprietà logichi cum'è quelli chì si trovanu in i layout di flexbox - per esempiu, startè endinvece di leftè right.

Forme

Aghjunghjite novi forme flottanti! Avemu prumuvutu l'esempiu di etichette Floating per cumpunenti di forma cumplettamente supportati. Vede a nova pagina di etichette Floating.
Rupture Elementi di forma nativa è persunalizata cunsolidati. Checkboxes, radii, selezzione è altri inputs chì avianu classi nativi è persunalizati in v4 sò stati cunsolidati. Avà quasi tutti i nostri elementi di forma sò interamente persunalizati, a maiò parte senza bisognu di HTML persunalizatu.
- .custom-checkhè avà .form-check.
- .custom-check.custom-switchhè avà .form-check.form-switch.
- .custom-selecthè avà .form-select.
- .custom-fileè .form-filesò stati rimpiazzati da stili persunalizati in cima à .form-control.
- .custom-rangehè avà .form-range.
- Abbandunatu nativu .form-control-fileè .form-control-range.
RuptureAbbandunatu .input-group-appendè .input-group-prepend. Pudete avà solu aghjunghje buttoni è .input-group-textcum'è figlioli diretti di i gruppi di input.
U raghju di fruntiera mancante di longu u gruppu di input cù un bug di feedback di validazione hè infine riparatu aghjunghjendu una .has-validationclassa addiziale à i gruppi di input cù validazione.
Rupture Abbandunate classi di layout specifichi di forma per u nostru sistema di griglia. Aduprate a nostra griglia è utilità invece di .form-group, .form-row, o .form-inline.
RuptureL'etichette di forma necessitanu avà .form-label.
Rupture .form-textùn stabilisce più display, chì vi permette di creà inline o bluccà u testu di l'aiutu cum'è vulete solu cambià l'elementu HTML.
L'icone di validazione ùn sò più applicate à <select>s cù multiple.
I schedarii Sass di fonte riarrangati sottu scss/forms/, cumpresi stili di gruppu di input.

Cumpunenti

Valori unificati paddingper avvisi, breadcrumbs, cards, dropdowns, list groups, modali, popovers, è tooltips per esse basatu nantu à a nostra $spacervariabile. Vede # 30564 .

fisarmonica

Aggiuntu novu cumpunente di accordion .

Alerts

L'alerti anu avà esempi cù icone .
Stili persunalizati eliminati per <hr>s in ogni alerta postu chì anu digià utilizatu currentColor.

Badges

RuptureEliminate tutte .badge-*e classi di culore per l'utilità di fondo (per esempiu, utilizate .bg-primaryinvece di .badge-primary).
RuptureDropped - utilizate invece .badge-pilll' .rounded-pillutilità.
RuptureEliminati stili di hover è focus per <a>è <button>elementi.
Imbottitura predefinita aumentata per i badge da .25em/ .5emà .35em/ .65em.

Pane grattugiatu

Simplificà l'aspettu predeterminatu di breadcrumbs rimuovendu padding, background-colorè border-radius.
Aggiunta una nova pruprietà persunalizata CSS --bs-breadcrumb-dividerper una persunalizazione faciule senza bisognu di ricumpià CSS.

Bottoni

Rupture I buttoni Toggle , cù caselle di spunta o radiu, ùn anu più bisognu di JavaScript è anu novu marcatu. Ùn avemu più bisognu di un elementu di imballaggio, aghjunghje.btn-checkà u<input>, è l'accoppianu cù qualsiasi.btnclassi nantu à u<label>. Vede # 30650 . I documenti per questu sò passati da a nostra pagina di Buttons à a nova sezione Forme.
Rupture Abbandunatu .btn-blockper utilità. Invece d'utilizà .btn-blocknantu à u .btn, imbulighjate i vostri buttoni cù .d-griduna .gap-*utilità per spazzàli cum'è necessariu. Cambia à classi responsive per ancu più cuntrollu di elli. Leghjite i documenti per alcuni esempi.
Aghjurnatu i nostri button-variant()è i button-outline-variant()mixins per sustene parametri supplementari.
Buttuni aghjurnati per assicurà un cuntrastu aumentatu nantu à i stati attivi è attivi.
I buttoni disabilitati anu avà pointer-events: none;.

Card

RuptureAbbandunatu .card-deckin favore di a nostra griglia. Imbulighjate e vostre carte in classi di colonna è aghjunghje un .row-cols-*cuntainer parent per ricreà i mazzi di carte (ma cun più cuntrollu di l'allineamentu responsive).
RuptureAbbandunatu .card-columnsin favore di a Masoneria. Vede # 28922 .
RuptureSustituitu l' .cardaccordione basatu cù un novu cumpunente di Accordion .

Carrusel

Aggiunta una nova .carousel-darkvariante per u testu scuru, cuntrolli è indicatori (ottimu per sfondi più chjaru).
Icone di chevron rimpiazzate per i cuntrolli di carrusel cù novi SVG da Bootstrap Icons .

Chiudi buttone

RuptureRinominatu .closeper .btn-closeun nome menu genericu.
I buttuni chjusi usanu avà un background-image(SVG incrustatu) invece di un ×in HTML, chì permette una persunalizazione più faciule senza bisognu di toccu u vostru marcatu.
Aggiunta una nova .btn-close-whitevariante chì usa filter: invert(1)per attivà l'icone di cuntrastu più altu contru à sfondi scuri.

Collapse

Eliminatu l'ancoraggio di scroll per l'accordioni.

Dropdowns

Aggiunta una nova .dropdown-menu-darkvariante è variabili assuciati per i dropdown scuri à dumanda.
Aggiunta una nova variabile per $dropdown-padding-x.
Scuru u divisore dropdown per un cuntrastu migliuratu.
RuptureTutti l'avvenimenti per u dropdown sò avà attivati in u buttone di basculante dropdown è poi bubbled up à l'elementu parent.
I menu dropdown sò avà un data-bs-popper="static"attributu stabilitu quandu u posizionamentu di u dropdown hè staticu è data-bs-popper="none"quandu u dropdown hè in a barra di navigazione. Questu hè aghjuntu da u nostru JavaScript è ci aiuta à aduprà stili di pusizioni persunalizati senza interferiscenu cù u pusizioni di Popper.
RuptureOpzione flipabbandunata per u plugin dropdown in favore di a cunfigurazione Popper nativa. Pudete avà disattivà u cumpurtamentu di flipping passendu un array viotu per fallbackPlacementsl'opzione in flip modificatore.
I menu a tendina ponu avà cliccà cù una nova autoCloseopzione per trattà u cumpurtamentu di chjusu automaticu . Pudete aduprà sta opzione per accettà u clicu in l'internu o fora di u menù dropdown per rende interattivu.
I dropdowns supportanu avà .dropdown-items avvolti in <li>s.

Jumbotron

RuptureAbbandunatu u cumpunente jumbotron postu chì pò esse replicatu cù utilità. Vede u nostru novu esempiu Jumbotron per una demo.

Lista di gruppu

Aggiuntu un novu .list-group-numberedmodificatore à i gruppi di lista.

Navs è tabs

Aghjunghjite novi nullvariàbili per font-size, font-weight, color, è :hover colorà a .nav-linkclasse.

Navbars

RuptureI Navbars necessitanu avà un containeru in (per simplificà drasticamente i requisiti di spaziatura è CSS necessariu).

Offcanvas

Aggiuntu u novu cumpunente offcanvas .

Paginazione

I ligami di paginazione sò avà persunalizabili margin-leftchì sò dinamicamente arrotondati in tutti i cantoni quandu sò separati l'un da l'altru.
Aggiuntu transitions à i ligami di paginazione.

Popovers

RuptureRinominatu .arrowin .popover-arrowu nostru mudellu popover predeterminatu.
Opzione whiteListrinominata à allowList.

Spinners

I spinners ora onoranu prefers-reduced-motion: reducerallentendu l'animazioni. Vede # 31882 .
Allineamentu verticale di spinner miglioratu.

Toasts

Toasts ponu avà esse posizionati in una .toast-containercù l'aiutu di l'utilità di pusizzioni .
A durata predeterminata di toast hè cambiata à 5 seconde.
Sguassatu overflow: hiddenda toast è rimpiazzatu cù border-radiuss propiu cù calc()funzioni.

Tooltips

RuptureRinominatu .arrowin .tooltip-arrowu nostru mudellu di tooltip predeterminatu.
RuptureU valore predeterminatu per u fallbackPlacementshè cambiatu in ['top', 'right', 'bottom', 'left']per una megliu piazzamentu di elementi popper.
RuptureOpzione whiteListrinominata à allowList.

Utilità

RuptureRinuminatu parechje utilità per utilizà nomi di pruprietà logica invece di nomi direzionali cù l'aghjuntu di supportu RTL:
- Rinominatu .left-*è .right-*à .start-*è .end-*.
- Rinominatu .float-leftè .float-rightà .float-startè .float-end.
- Rinominatu .border-leftè .border-rightà .border-startè .border-end.
- Rinominatu .rounded-leftè .rounded-rightà .rounded-startè .rounded-end.
- Rinominatu .ml-*è .mr-*à .ms-*è .me-*.
- Rinominatu .pl-*è .pr-*à .ps-*è .pe-*.
- Rinominatu .text-leftè .text-rightà .text-startè .text-end.
RuptureDisabilitatu i margini negativi per difettu.
Aggiunta una nova .bg-bodyclasse per stabilisce rapidamente u <body>sfondate à elementi supplementari.
Aghjunghjite novi utilità di pusizioni per top, right, bottom, è left. I valori includenu 0, 50%, è 100%per ogni pruprietà.
Aggiunti novi .translate-middle-xè .translate-middle-yutilità per centru orizzontalmente o verticalmente elementi posizionati assoluti / fissi.
Aghjunghjite novi border-widthutilità .
RuptureRinominatu .text-monospaceà .font-monospace.
RuptureSguassatu .text-hidepostu chì hè un metudu anticu per ammuccià u testu chì ùn deve micca esse usatu più.
Utilità .fs-*aghjunte per font-sizeutilità (cù RFS attivatu). Quessi utilizanu a listessa scala cum'è l'intestazione predeterminata di HTML (1-6, grande à chjucu), è ponu esse mudificate via Sass map.
Rupture.font-weight-*Utilità rinominate in quantu .fw-*à a brevità è a coerenza .
Rupture.font-style-*Utilità rinominate in quantu .fst-*à a brevità è a coerenza .
Added .d-gridto display utilità è novi gaputilità ( .gap) per i layout CSS Grid è flexbox.
RuptureEliminatu .rounded-smè rounded-lg, è introduttu una nova scala di classi, .rounded-0à .rounded-3. Vede # 31687 .
Aggiunti novi line-heightutilità: .lh-1, .lh-sm, .lh-baseè .lh-lg. Vede quì .
Sposta l' .d-noneutilità in u nostru CSS per dà più pesu à l'altri utilità di visualizazione.
Estendu l' .visually-hidden-focusableaiutu per travaglià ancu nantu à i cuntenituri, usendu :focus-within.

Aiutanti

Rupture L'aiutanti di l'incrustazione responsive sò stati rinominati à l' aiutanti di ratio cù novi nomi di classi è cumpurtamenti migliurati, è ancu una variabile CSS utile.
- E classi sò state rinominate per cambià byin xu rapportu d'aspettu. Per esempiu, .ratio-16by9hè avà .ratio-16x9.
- Avemu abbandunatu u .embed-responsive-itemselettore di gruppi di elementi è in favore di un .ratio > *selettore più simplice. Ùn ci hè più bisognu di classi, è l'aiutu di ratio travaglia avà cù qualsiasi elementu HTML.
- A $embed-responsive-aspect-ratiosmappa Sass hè stata rinominata $aspect-ratiosè i so valori sò simplificati per include u nome di a classa è u percentualità cum'è a key: valuecoppia.
- Variabili CSS sò avà generati è inclusi per ogni valore in a mappa Sass. Mudificà a --bs-aspect-ratiovariabile nantu à .ratioper creà qualsiasi rapportu d'aspettu persunalizatu .
Rupture E classi "Lettore di schermu" sò avà classi "visualmente nascosti" .
- Cambiatu u schedariu Sass da scss/helpers/_screenreaders.scssàscss/helpers/_visually-hidden.scss
- Rinominatu .sr-onlyè .sr-only-focusableà .visually-hiddenè.visually-hidden-focusable
- Rinominatu sr-only()è sr-only-focusable()mixins à visually-hidden()è visually-hidden-focusable().
bootstrap-utilities.cssavà include ancu i nostri aiutanti. L'aiutanti ùn anu più bisognu di esse impurtati in custruzzioni persunalizati.

JavaScript

A dipendenza di jQuery abbandunata è i plugins riscritti per esse in JavaScript regulare.
RuptureL'attributi di dati per tutti i plugins JavaScript sò avà spaziati in nomi per aiutà à distinguerà a funziunalità di Bootstrap da terze parti è u vostru propiu codice. Per esempiu, avemu usatu data-bs-toggleinvece di data-toggle.
Tutti i plugins ponu avà accettà un selettore CSS cum'è u primu argumentu. Pudete passà un elementu DOM o qualsiasi selettore CSS validu per creà una nova istanza di u plugin:
```
var modal = new bootstrap.Modal('#myModal')
var dropdown = new bootstrap.Dropdown('[data-bs-toggle="dropdown"]')
```
popperConfigpò esse passatu cum'è una funzione chì accetta a cunfigurazione Popper predeterminata di Bootstrap cum'è argumentu, perchè pudete unisce sta cunfigurazione predeterminata in u vostru modu. Si applica à i menu dropdown, popovers è tooltips.
U valore predeterminatu per u fallbackPlacementshè cambiatu in ['top', 'right', 'bottom', 'left']per una megliu piazzamentu di elementi Popper. Si applica à i menu dropdown, popovers è tooltips.
Eliminatu underscore da i metudi statichi publichi cum'è _getInstance()→ getInstance().