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

v5.2.0

Disegnu rinfriscatu

Bootstrap v5.2.0 presenta una sottile aghjurnazione di u disignu per una manciata di cumpunenti è proprietà in tuttu u prughjettu, soprattuttu per mezu di border-radiusvalori raffinati nantu à i buttoni è i cuntrolli di forma . A nostra ducumentazione hè ancu aghjurnata cù una nova homepage, un layout di documenti più simplice chì ùn colapseghja più e sezioni di a barra laterale, è esempi più prominenti di Bootstrap Icons .

Più variabili CSS

Avemu aghjurnatu tutti i nostri cumpunenti per utilizà variabili CSS. Mentre Sass sustene sempre tuttu, ogni cumpunente hè statu aghjurnatu per include variabili CSS nantu à e classi di basa di cumpunenti (per esempiu, .btn), chì permettenu più persunalizazione in tempu reale di Bootstrap. In e versioni successivi, continueremu à espansione u nostru usu di variabili CSS in u nostru layout, forme, aiutanti è utilità. Leghjite più nantu à e variabili CSS in ogni cumpunente nantu à e so rispettive pagine di documentazione.

U nostru usu variabile CSS serà un pocu incompletu finu à Bootstrap 6. Mentre ci piacerebbe implementà cumplettamente questi in tuttu u pianu, correnu u risicu di causà cambiamenti rotulanti. Per esempiu, a stallazione $alert-border-width: var(--bs-border-width)in u nostru codice surghjente rompe u putenziale Sass in u vostru propiu codice s'ellu facia $alert-border-width * 2per qualchì mutivu.

Comu tali, induve pussibule, continueremu à spinghje versu più variabili CSS, ma ricunnosce chì a nostra implementazione pò esse ligeramente limitata in v5.

Novu`_maps.scss`

Bootstrap v5.2.0 hà introduttu un novu schedariu Sass cù _maps.scss. Tira fora parechje carte Sass _variables.scssper risolve un prublema induve l'aghjurnamenti à una mappa originale ùn sò micca stati applicati à e carte secondarie chì l'allarganu. Per esempiu, l'aghjurnamenti à $theme-colorsùn sò micca stati applicati à altre carte tematiche chì si basavanu in $theme-colors, rompendu i flussi di persunalizazione chjave. In breve, Sass hà una limitazione induve una volta chì una variabile predeterminata o una mappa hè stata aduprata , ùn pò micca esse aghjurnata. Ci hè una mancanza simili cù variabili CSS quandu sò usati per cumpone altre variabili CSS.

Hè per quessa chì e persunalizazione variabile in Bootstrap anu da vene dopu @import "functions", ma prima @import "variables"è u restu di a nostra pila d'importazione. U stessu s'applica à e carte Sass - duvete annullà i valori predeterminati prima di esse utilizati. E carte seguenti sò state spustate à a nova _maps.scss:

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

I vostri custruzzioni CSS di Bootstrap persunalizati duveranu avà vede qualcosa cusì cù una importazione di carte separata.

  // 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

Novi utilità

Utilità font-weightampliate per include .fw-semiboldper i caratteri semibold.
Utilità border-radiusampliate per include duie dimensioni novi, .rounded-4è .rounded-5, per più opzioni.

Cambiamenti supplementari

Introduce una nova $enable-container-classesopzione. - Avà quandu si sceglie in u layout sperimentale di a Griglia CSS, .container-*e classi seranu sempre compilati, salvu chì questa opzione hè impostata à false. I cuntenituri ancu avà mantenenu i so valori di cantina.
U cumpunente Offcanvas hà avà variazioni responsive . A .offcanvasclasse originale resta immutata - oculta u cuntenutu in tutti i vetri. Per fà responsive, cambia quella .offcanvasclasse à qualsiasi .offcanvas-{sm|md|lg|xl|xxl}classa.
I divisori di tavulinu più grossi sò avà opt-in. - Avemu sguassatu u cunfini più grossu è più difficiuli di annullà trà i gruppi di tavule è l'avete spustatu à una classa opzionale chì pudete applicà, .table-group-divider. Vede i documenti di a tabella per un esempiu.
Scrollspy hè stata riscritta per utilizà l'Intersection Observer API , chì significa chì ùn avete più bisognu di wrappers parenti parenti, deprecatesoffsetconfig, è più. Cercate e vostre implementazioni Scrollspy per esse più precise è coerenti in a so nav highlighting.
Popovers è tooltips usanu avà variabili CSS. Certi variabili CSS sò stati aghjurnati da i so contraparti Sass per riduce u numeru di variàbili. In u risultatu, trè variàbili sò stati deprecati in questa versione: $popover-arrow-color, $popover-arrow-outer-color, è $tooltip-arrow-color.
Aggiunti novi .text-bg-{color}aiutanti. Invece di stabilisce l'individuu .text-*è l' .bg-*utilità, pudete avà aduprà l' .text-bg-*aiutu per stabilisce un background-colorprimu pianu cuntrastanti color.
Aggiuntu .form-check-reverseun modificatore per invertisce l'ordine di l'etichette è e caselle di spunta / radiu assuciate.
Aghjunghjite u supportu di colonne strisce à e tavule via a nova .table-striped-columnsclasse.

Per una lista completa di cambiamenti, vede u prughjettu v5.2.0 in GitHub .

v5.1.0

Aggiuntu supportu sperimentale per u layout CSS Grid . - Questu hè un travagliu in corso, è ùn hè ancu prontu per l'usu di a produzzione, ma pudete optà per a nova funzione via Sass. Per attivà, disattiveghjanu a griglia predeterminata, cunfittendu $enable-grid-classes: falseè attivate a Griglia CSS parendu $enable-cssgrid: true.
Navbars aghjurnati per supportà offcanvas. - Aghjunghjite i cassetti offcanvas in qualsiasi navbar cù e .navbar-expand-*classi responsive è qualchì marcatu offcanvas.
Aggiuntu novu cumpunente di placeholder . - U nostru novu cumpunente, un modu per furnisce blocchi tempurane in u locu di u cuntenutu veru per aiutà à indicà chì qualcosa hè sempre carica in u vostru situ o app.
U plugin collapse supporta avà u colapsamentu horizontale . - Aghjunghjite .collapse-horizontalà u vostru .collapseper colapsà u widthinvece di u height. Evite a riverniciatura di u navigatore mettendu un min-heighto height.
Aghjunghjite una nova pila è aiutanti di regula verticale. - Applica rapidamente parechje proprietà di flexbox per creà rapidamente layout persunalizati cù pile . Sceglite trà pile horizontale ( .hstack) è verticale ( .vstack). Aghjunghjite divisori verticali simili à <hr>elementi cù i novi .vraiutanti .
:rootAghjunghjite novi variabili CSS globale . - Aghjunghjite parechje variabili CSS novi à u :rootlivellu per u cuntrollu di <body>stili. Più sò in l'opere, ancu in i nostri utilità è cumpunenti, ma per avà leghje variabili CSS in a sezione Customize .
Utilità di culore è di fondu rivisionate per utilizà variabili CSS, è aghjunte novi utilità d'opacità di testu è opacità di fondo . - .text-* è l' .bg-*utilità sò avà custruite cù variabili CSS è rgba()valori di culore, chì vi permettenu di persunalizà facilmente qualsiasi utilità cù novi utilità d'opacità.
Aghjunghjite novi esempi di snippet basati per mustrà cumu persunalizà i nostri cumpunenti. — Tire pronta per aduprà cumpunenti persunalizati è altri mudelli di cuncepimentu cumuni cù i nostri novi esempi di Snippets . Include piè di pagina , menu a tendina , gruppi di lista è modali .
Eliminati i stili di posizionamentu inutilizati da popovers è tooltips postu chì questi sò trattati solu da Popper. $tooltip-marginhè statu deprecated è stabilitu nullin u prucessu.

Vulete più infurmazione? Leghjite u blog post v5.1.0.

Ehi! I cambiamenti à a nostra prima versione maiò di Bootstrap 5, v5.0.0, sò documentati quì sottu. Ùn riflettenu micca i cambiamenti supplementari mostrati sopra.

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
Caduta 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 .
RumpenduFunzione 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.
RumpenduI 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).
RumpenduStili di stampa eliminati è $enable-print-stylesvariabili. E classi di visualizazione di stampa sò sempre intornu. Vede # 28339 .
RumpenduDropped color(), theme-color(), e gray()funzioni in favore di variàbili. Vede # 29083 .
RumpenduFunzione rinominata theme-color-level()à color-level()è avà accetta ogni culore chì vulete invece di solu $theme-colorculori. Vede # 29083 Attenti : color-level() hè statu più tardi abbandunatu in v5.0.0-alpha3.
RumpenduRinominatu $enable-prefers-reduced-motion-media-queryè $enable-pointer-cursor-for-buttonsà $enable-reduced-motionè $enable-button-pointersper brevità.
RumpenduEliminatu u bg-gradient-variant()mixin. Aduprate a .bg-gradientclassa per aghjunghje gradienti à elementi invece di e .bg-gradient-*classi generate.
Rumpendu 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()
RumpenduFunzione 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ò avà 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.
- RumpenduRinominatu .no-guttersà .g-0per currisponde à e novi utilità di gutter.
I culonni ùn anu più position: relativeappiicatu, cusì pudete avè da aghjunghje .position-relativeà certi elementi per restaurà quellu cumpurtamentu.
RumpenduAbbandunate parechje .order-*classi chì spessu ùn anu micca usatu. Avemu avà solu furnisce fora .order-1di .order-5a scatula.
RumpenduAbbandunatu u .mediacumpunente perchè pò esse facilmente replicatu cù utilità. Vede #28265 è a pagina di utilità flex per un esempiu .
Rumpendu 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.
RumpenduRevisionatu 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.
RumpenduE tavule nidificate ùn eredite più stili.
Rumpendu .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
RumpenduU 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.
RumpenduClasse abbandunata .pre-scrollable. Vede # 29135
Rumpendu .text-*utilità ùn aghjunghjenu più stati di hover è focus à i ligami. .link-*E classi di helper ponu esse usate invece. Vede # 29267
RumpenduClasse abbandunata .text-justify. Vede # 29793
Rumpendu <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 layout di flexbox - per esempiu, startè endin u locu 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.
Rumpendu 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-control.custom-checkboxhè avà .form-check.
- .custom-control.custom-custom-radiohè avà .form-check.
- .custom-control.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.
RumpenduAbbassatu .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.
Rumpendu 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.
RumpenduL'etichette di forma necessitanu avà .form-label.
Rumpendu .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.
I cuntrolli di forma ùn sò più usati fissi heightquandu hè pussibule, invece di rinvià min-heightper migliurà a persunalizazione è a cumpatibilità cù altri cumpunenti.
L'icone di validazione ùn sò più applicate à <select>s cù multiple.
I fugliali 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

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

Breadcrumbs

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

Rumpendu 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.
Rumpendu 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 disattivati anu avà pointer-events: none;.

Card

RumpenduAbbandunatu .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).
RumpenduAbbandunatu .card-columnsin favore di a Masoneria. Vede # 28922 .
RumpenduSustituitu 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

RumpenduRinominatu .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ì si usa filter: invert(1)per attivà l'icone di cuntrastu più altu nantu à 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.
RumpenduTutti l'avvenimenti per u dropdown sò avà attivati in u buttone di basculante dropdown è poi bubbled up à l'elementu parent.
I menu a tendina anu avà un data-bs-popper="static"attributu stabilitu quandu u posizionamentu di u dropdown hè staticu, o 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.
RumpenduOpzione 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

RumpenduAbbandunatu 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

RumpenduI Navbars necessitanu avà un containeru in (per simplificà drasticamente i requisiti di spaziatura è CSS necessariu).
RumpenduA .activeclassa ùn pò più esse appiicata à .nav-items, deve esse appiicata direttamente à .nav-links.

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

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

Spinners

I spinners onoranu avà 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

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

Utilità

RumpenduRinuminatu 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.
RumpenduDisabilitatu 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à .
RumpenduRinominatu .text-monospaceà .font-monospace.
RumpenduSguassatu .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.
RumpenduUtilità .font-weight-*rinominate .fw-*per a brevità è a coerenza.
RumpenduUtilità .font-style-*rinominate .fst-*per a brevità è a coerenza.
Added .d-gridto display utilità è novi gaputilità ( .gap) per i layout CSS Grid è flexbox.
RumpenduEliminatu .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

Rumpendu L'aiutanti d'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 .
Rumpendu 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.
RumpenduL'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:
```
const modal = new bootstrap.Modal('#myModal')
const 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().