Migrazione alla v5

Tieni traccia e rivedi le modifiche ai file di origine, alla documentazione e ai componenti di Bootstrap per aiutarti a migrare dalla v4 alla v5.

Su questa pagina

Dipendenze

jQuery eliminato.
Aggiornato da Popper v1.x a Popper v2.x.
Sostituito Libsass con Dart Sass poiché il nostro compilatore Sass dato Libsass era deprecato.
Migrato da Jekyll a Hugo per la creazione della nostra documentazione

Supporto browser

Eliminato Internet Explorer 10 e 11
Eliminato Microsoft Edge < 16 (Legacy Edge)
Firefox abbandonato < 60
Safari abbandonato < 12
Safari iOS abbandonato < 12
Chrome caduto < 60

Modifiche alla documentazione

Home page, layout dei documenti e piè di pagina ridisegnati.
Aggiunta nuova guida ai pacchi .
Aggiunta una nuova sezione Personalizza , che sostituisce la pagina Temi della v4 , con nuovi dettagli su Sass, opzioni di configurazione globale, combinazioni di colori, variabili CSS e altro ancora.
Riorganizzata tutta la documentazione dei moduli nella nuova sezione Moduli , suddividendo il contenuto in pagine più mirate.
Allo stesso modo, è stata aggiornata la sezione Layout , per arricchire il contenuto della griglia in modo più chiaro.
Rinominata la pagina del componente "Navi" in "Navi e schede".
Rinominata la pagina "Assegni" in "Assegni e radio".
Ridisegnata la barra di navigazione e aggiunto un nuovo sottonav per semplificare la navigazione nei nostri siti e nelle versioni dei documenti.
Aggiunta nuova scorciatoia da tastiera per il campo di ricerca: Ctrl + /.

Sass

Abbiamo abbandonato le unioni di mappe Sass predefinite per semplificare la rimozione dei valori ridondanti. Tieni presente che ora devi definire tutti i valori nelle mappe Sass come $theme-colors. Scopri come gestire le mappe Sass .
RotturaFunzione rinominata color-yiq()e variabili correlate in color-contrast()quanto non è più correlata allo spazio colore YIQ. Vedi #30168.
- $yiq-contrasted-thresholdviene rinominato in $min-contrast-ratio.
- $yiq-text-darke $yiq-text-lightsono rispettivamente rinominati $color-contrast-darke $color-contrast-light.
RotturaI parametri dei mixin di query multimediali sono stati modificati per un approccio più logico.
- media-breakpoint-down()utilizza il punto di interruzione stesso invece del punto di interruzione successivo (ad esempio, media-breakpoint-down(lg)invece di media-breakpoint-down(md)visualizzare finestre di destinazione più piccole di lg).
- Allo stesso modo, anche il secondo parametro in media-breakpoint-between()usa il punto di interruzione stesso invece del punto di interruzione successivo (ad esempio, media-between(sm, lg)invece delle media-breakpoint-between(sm, md)finestre di destinazione tra sme lg).
RotturaStili di stampa e $enable-print-stylesvariabili rimossi. Le classi di visualizzazione della stampa sono ancora in circolazione. Vedi #28339 .
RotturaDropped color(), theme-color(), e gray()funzioni a favore delle variabili. Vedi #29083 .
Rotturatheme-color-level()La funzione rinominata color-level()e ora accetta qualsiasi colore desiderato invece dei soli $theme-colorcolori. Vedi #29083 Attenzione: color-level() è stato successivamente inserito v5.0.0-alpha3.
RotturaRinominato $enable-prefers-reduced-motion-media-querye $enable-pointer-cursor-for-buttonsin $enable-reduced-motione $enable-button-pointersper brevità.
RotturaRimosso il bg-gradient-variant()mix. Usa la .bg-gradientclasse per aggiungere sfumature agli elementi invece delle .bg-gradient-*classi generate.
Rottura Mixin precedentemente deprecati rimossi:
- hover, hover-focus, plain-hover-focus, ehover-focus-active
- float()
- form-control-mixin()
- nav-divider()
- retina-img()
- text-hide()(ha anche eliminato la classe di utilità associata, .text-hide)
- visibility()
- form-control-focus()
Rotturascale-color()Funzione rinominata in shift-color()per evitare collisioni con la funzione di ridimensionamento del colore di Sass.
box-shadowmixins ora consente nullvalori e drop noneda più argomenti. Vedi #30394 .
Il border-radius()mixin ora ha un valore predefinito.

Sistema di colore

Il sistema di colori con cui funzionava color-level()ed $theme-color-intervalè stato rimosso a favore di un nuovo sistema di colori. Tutte lighten()e le darken()funzioni nella nostra base di codice sono sostituite da tint-color()e shade-color(). Queste funzioni mescoleranno il colore con il bianco o il nero invece di cambiarne la luminosità di una quantità fissa. Il shift-color()colore o ombreggerà un colore a seconda che il suo parametro di peso sia positivo o negativo. Vedere #30622 per maggiori dettagli.
Aggiunte nuove tinte e sfumature per ogni colore, fornendo nove colori separati per ogni colore di base, come nuove variabili Sass.
Contrasto cromatico migliorato. Rapporto di contrasto del colore aumentato da 3:1 a 4,5:1 e colori blu, verde, ciano e rosa aggiornati per garantire un contrasto WCAG 2.1 AA. Anche cambiato il nostro colore di contrasto del colore da $gray-900a $black.
Per supportare il nostro sistema di colori, abbiamo aggiunto nuove funzioni personalizzate tint-color()e shade-color()per mescolare i nostri colori in modo appropriato.

Aggiornamenti della griglia

Nuovo punto di interruzione! Aggiunto nuovo xxlpunto di interruzione per 1400pxe su. Nessuna modifica a tutti gli altri punti di interruzione.
Grondaie migliorate. Le grondaie ora sono impostate in rem e sono più strette di v4 ( 1.5rem, o circa 24px, in basso da 30px). Questo allinea le grondaie del nostro sistema di griglia con le nostre utilità di spaziatura.
- Aggiunta una nuova classe di grondaie ( .g-*, .gx-*, e .gy-*) per controllare le grondaie orizzontali/verticali, le grondaie orizzontali e le grondaie verticali.
- RotturaRinominato .no-guttersin .g-0per abbinare le nuove utilità di grondaia.
Le colonne non sono più state position: relativeapplicate, quindi potresti dover aggiungere .position-relativealcuni elementi per ripristinare quel comportamento.
RotturaAbbandonato diverse .order-*classi che spesso non venivano utilizzate. Ora forniamo solo .order-1fuori .order-5dagli schemi.
RotturaEliminato il .mediacomponente in quanto può essere facilmente replicato con le utilità. Vedere #28265 e la pagina delle utilità flessibili per un esempio .
Rottura bootstrap-grid.cssora si applica solo box-sizing: border-boxalla colonna invece di reimpostare il ridimensionamento globale della casella. In questo modo, i nostri stili di griglia possono essere utilizzati in più posti senza interferenze.
$enable-grid-classesnon disabilita più la generazione di classi contenitore. Vedi #29146.
Aggiornato il make-colmixin per impostare colonne uguali senza una dimensione specificata.

Contenuto, riavvio, ecc

RFS è ora abilitato per impostazione predefinita. Le intestazioni che utilizzano ilfont-size()mixin regoleranno automaticamente la lorofont-sizescala con il viewport. Questa funzione è stata precedentemente attivata con la v4.
RotturaRevisionata la nostra tipografia di visualizzazione per sostituire le nostre $display-*variabili e con una $display-font-sizesmappa Sass. Rimosse anche le singole $display-*-weightvariabili per un singolo $display-font-weights font-size.
Aggiunte due nuove .display-*dimensioni dell'intestazione .display-5e .display-6.
I collegamenti sono sottolineati per impostazione predefinita (non solo al passaggio del mouse), a meno che non facciano parte di componenti specifici.
Tabelle riprogettate per aggiornare i loro stili e ricostruirle con variabili CSS per un maggiore controllo sullo stile.
RotturaLe tabelle nidificate non ereditano più gli stili.
Rottura .thead-lighte .thead-darkvengono eliminate a favore delle .table-*classi variant che possono essere utilizzate per tutti gli elementi della tabella ( , thead, tbody, tfoote tr) .thtd
RotturaIl table-row-variant()mixin viene rinominato table-variant()e accetta solo 2 parametri: $color(nome colore) e $value(codice colore). Il colore del bordo e i colori degli accenti vengono calcolati automaticamente in base alle variabili dei fattori della tabella.
Dividi le variabili di riempimento della cella della tabella in -ye -x.
RotturaClasse abbandonata .pre-scrollable. Vedi #29135
Rottura .text-*le utility non aggiungono più stati al passaggio del mouse e focus ai collegamenti. .link-*invece possono essere utilizzate classi helper. Vedi #29267
RotturaClasse abbandonata .text-justify. Vedi #29793
padding-leftRipristina l' orizzontale predefinito <ul>e <ol>gli elementi dal predefinito del browser 40pxa 2rem.
Aggiunto $enable-smooth-scroll, che si applica scroll-behavior: smootha livello globale, ad eccezione degli utenti che richiedono una riduzione del movimento tramite prefers-reduced-motionquery multimediali. Vedi #31877

RTL

Le variabili, le utilità e i mixin specifici della direzione orizzontale sono stati tutti rinominati per utilizzare proprietà logiche come quelle che si trovano nei layout flexbox, ad esempio starte endal posto di lefte right.

Le forme

Aggiunte nuove forme fluttuanti! Abbiamo promosso l'esempio di etichette mobili a componenti di moduli completamente supportati. Vedi la nuova pagina Etichette mobili.
Rottura Elementi di moduli nativi e personalizzati consolidati. Caselle di controllo, radio, selezioni e altri input che avevano classi native e personalizzate nella v4 sono stati consolidati. Ora quasi tutti i nostri elementi del modulo sono interamente personalizzati, la maggior parte senza la necessità di HTML personalizzato.
- .custom-checkè ora .form-check.
- .custom-check.custom-switchè ora .form-check.form-switch.
- .custom-selectè ora .form-select.
- .custom-filee .form-filesono stati sostituiti da stili personalizzati in cima a .form-control.
- .custom-rangeè ora .form-range.
- Nativo .form-control-filee .form-control-range.
RotturaCaduto .input-group-appende .input-group-prepend. Ora puoi semplicemente aggiungere pulsanti e .input-group-textcome figli diretti dei gruppi di input.
Il lungo raggio di confine mancante sul gruppo di input con bug di feedback di convalida è stato finalmente risolto aggiungendo una .has-validationclasse aggiuntiva ai gruppi di input con la convalida.
Rottura Classi di layout specifiche del modulo eliminate per il nostro sistema di griglia. Usa la nostra griglia e le nostre utility invece di .form-group, .form-rowo .form-inline.
RotturaLe etichette dei moduli ora richiedono .form-label.
Rottura .form-textnon è più set display, permettendoti di creare in linea o bloccare il testo della guida come desideri semplicemente modificando l'elemento HTML.
Le icone di convalida non vengono più applicate ai messaggi di posta <select>elettronica con multiple.
File Sass sorgente riorganizzati in scss/forms/, inclusi gli stili dei gruppi di input.

Componenti

Valori unificati paddingper avvisi, breadcrumb, schede, menu a discesa, gruppi di elenchi, modali, popover e suggerimenti per essere basati sulla nostra $spacervariabile. Vedi #30564 .

Fisarmonica

Aggiunto nuovo componente per fisarmonica .

Avvisi

Gli avvisi ora hanno esempi con icone .
Rimossi gli stili personalizzati per messaggi di posta <hr>elettronica in ogni avviso poiché utilizzano già currentColor.

Distintivi

RotturaEliminate tutte le .badge-*classi di colore per le utilità di sfondo (ad esempio, usa .bg-primaryinvece di .badge-primary).
RotturaRilasciato : utilizzare invece .badge-pilll' .rounded-pillutilità.
RotturaRimossi gli stili al passaggio del mouse e di messa a fuoco per <a>e <button>gli elementi.
Aumentato il riempimento predefinito per i badge da .25em/ .5ema .35em/ .65em.

Briciole di pane

Semplificato l'aspetto predefinito dei breadcrumb rimuovendo padding, background-color, e border-radius.
Aggiunta nuova proprietà personalizzata CSS --bs-breadcrumb-dividerper una facile personalizzazione senza la necessità di ricompilare CSS.

Bottoni

Rottura I pulsanti di commutazione , con caselle di controllo o radio, non richiedono più JavaScript e hanno un nuovo markup. Non abbiamo più bisogno di un elemento di avvolgimento, aggiungilo.btn-checka<input>e abbinalo a qualsiasi.btnclasse su<label>. Vedi #30650 . I documenti per questo sono stati spostati dalla nostra pagina Pulsanti alla nuova sezione Moduli.
Rottura Abbandonato .btn-blockper utilità. Invece di usare .btn-blocksu .btn, avvolgi i tuoi pulsanti con .d-gride .gap-*un'utilità per distanziarli secondo necessità. Passa alle classi reattive per un controllo ancora maggiore su di esse. Leggi i documenti per alcuni esempi.
Aggiornato our button-variant()e button-outline-variant()mixin per supportare parametri aggiuntivi.
Pulsanti aggiornati per garantire un maggiore contrasto al passaggio del mouse e negli stati attivi.
I pulsanti disabilitati ora hanno pointer-events: none;.

Carta

RotturaAbbattuto .card-decka favore della nostra griglia. Avvolgi le tue carte in classi di colonne e aggiungi un .row-cols-*contenitore principale per ricreare i mazzi di carte (ma con un maggiore controllo sull'allineamento reattivo).
RotturaAbbandonato .card-columnsa favore della Massoneria. Vedi #28922 .
RotturaSostituita la .cardfisarmonica basata con un nuovo componente Accordion .

Giostra

Aggiunta una nuova .carousel-darkvariante per testo scuro, controlli e indicatori (ottimo per sfondi più chiari).
Sostituite le icone chevron per i controlli del carosello con i nuovi SVG di Bootstrap Icons .

Pulsante Chiudi

RotturaRinominato .closeper .btn-closeun nome meno generico.
I pulsanti di chiusura ora utilizzano un background-image(SVG incorporato) invece di un ×nell'HTML, consentendo una personalizzazione più semplice senza la necessità di modificare il markup.
Aggiunta una nuova .btn-close-whitevariante che filter: invert(1)consente di abilitare le icone di eliminazione del contrasto più elevato su sfondi più scuri.

Crollo

Rimosso l'ancoraggio a scorrimento per le fisarmoniche.

Dropdown

Aggiunta una nuova .dropdown-menu-darkvariante e variabili associate per i menu a discesa scuri su richiesta.
Aggiunta nuova variabile per $dropdown-padding-x.
Scurito il divisore a discesa per migliorare il contrasto.
RotturaTutti gli eventi per il menu a discesa vengono ora attivati sul pulsante di attivazione/disattivazione del menu a discesa e quindi visualizzati in bolla nell'elemento padre.
I menu a discesa ora hanno un data-bs-popper="static"attributo impostato quando il posizionamento del menu a discesa è statico e data-bs-popper="none"quando il menu a discesa è nella barra di navigazione. Questo è aggiunto dal nostro JavaScript e ci aiuta a utilizzare stili di posizione personalizzati senza interferire con il posizionamento di Popper.
RotturaOpzione eliminata flipper il plug-in a discesa a favore della configurazione nativa di Popper. Ora puoi disabilitare il comportamento di capovolgimento passando un array vuoto per l' fallbackPlacementsopzione nel modificatore di capovolgimento .
I menu a discesa possono ora essere cliccabili con una nuova autoCloseopzione per gestire il comportamento di chiusura automatica . Puoi utilizzare questa opzione per accettare il clic all'interno o all'esterno del menu a discesa per renderlo interattivo.
I menu a discesa ora supportano .dropdown-items racchiusi in <li>s.

Jumbotron

RotturaEliminato il componente jumbotron in quanto può essere replicato con le utilità. Guarda il nostro nuovo esempio Jumbotron per una demo.

Gruppo elenco

Aggiunto nuovo .list-group-numberedmodificatore per elencare i gruppi.

Navigatori e schede

Aggiunte nuove nullvariabili per font-size, font-weight, colore :hover coloralla .nav-linkclasse.

barre di navigazione

RotturaLe barre di navigazione ora richiedono un contenitore all'interno (per semplificare drasticamente i requisiti di spaziatura e CSS richiesti).

Fuori tela

Aggiunto il nuovo componente offcanvas .

Impaginazione

I collegamenti di impaginazione ora sono personalizzabili margin-leftche vengono arrotondati dinamicamente su tutti gli angoli quando separati l'uno dall'altro.
Aggiunti transitionmessaggi di posta elettronica ai collegamenti di impaginazione.

Popover

RotturaRinominato .arrowin .popover-arrownel nostro modello popover predefinito.
whiteListOpzione rinominata in allowList.

Filatori

Gli spinner ora onorano prefers-reduced-motion: reducerallentando le animazioni. Vedi #31882 .
Allineamento verticale dello spinner migliorato.

Brindisi

I toast possono ora essere posizionati in a .toast-containercon l'aiuto delle utilità di posizionamento .
Durata del brindisi predefinita modificata a 5 secondi.
Rimosso overflow: hiddendai brindisi e sostituito con border-radiuss appropriati con calc()funzioni.

Suggerimenti

RotturaRinominato .arrowin .tooltip-arrownel nostro modello di descrizione comando predefinito.
RotturaIl valore predefinito per fallbackPlacementsviene modificato in ['top', 'right', 'bottom', 'left']per un migliore posizionamento degli elementi popper.
RotturawhiteListOpzione rinominata in allowList.

Utilità

RotturaRinominate diverse utilità per utilizzare nomi di proprietà logiche invece di nomi direzionali con l'aggiunta del supporto RTL:
- Rinominato .left-*e .right-*in .start-*e .end-*.
- Rinominato .float-lefte .float-rightin .float-starte .float-end.
- Rinominato .border-lefte .border-rightin .border-starte .border-end.
- Rinominato .rounded-lefte .rounded-rightin .rounded-starte .rounded-end.
- Rinominato .ml-*e .mr-*in .ms-*e .me-*.
- Rinominato .pl-*e .pr-*in .ps-*e .pe-*.
- Rinominato .text-lefte .text-rightin .text-starte .text-end.
RotturaMargini negativi disabilitati per impostazione predefinita.
Aggiunta una nuova .bg-bodyclasse per impostare rapidamente lo <body>sfondo di ' su elementi aggiuntivi.
Aggiunte nuove utilità di posizione per top, right, bottome left. I valori includono 0, 50%e 100%per ogni proprietà.
Aggiunte nuove .translate-middle-xe .translate-middle-yutilità per centrare orizzontalmente o verticalmente gli elementi posizionati assoluti/fissi.
Aggiunte nuove border-widthutilità .
RotturaRinominato .text-monospacein .font-monospace.
RotturaRimosso .text-hidein quanto metodo antiquato per nascondere il testo che non dovrebbe più essere utilizzato.
Aggiunte .fs-*utilità per font-sizele utilità (con RFS abilitato). Questi utilizzano la stessa scala delle intestazioni predefinite dell'HTML (1-6, da grande a piccolo) e possono essere modificati tramite la mappa Sass.
Rottura.font-weight-*Utilità rinominate .fw-*per brevità e coerenza.
Rottura.font-style-*Utilità rinominate .fst-*per brevità e coerenza.
Aggiunte .d-gridper visualizzare utilità e nuove gaputilità ( .gap) per layout CSS Grid e flexbox.
RotturaRimosso .rounded-sme rounded-lg, e introdotta una nuova scala di classi, .rounded-0a .rounded-3. Vedi #31687 .
Aggiunte nuove line-heightutilità: .lh-1, .lh-sm, .lh-basee .lh-lg. Vedi qui .
Spostata l' .d-noneutilità nel nostro CSS per darle più peso rispetto ad altre utilità di visualizzazione.
Esteso l' .visually-hidden-focusablehelper per lavorare anche sui contenitori, usando :focus-within.

Aiutanti

Rottura Gli helper di incorporamento reattivi sono stati rinominati per proporzionare gli helper con nuovi nomi di classe e comportamenti migliorati, oltre a un'utile variabile CSS.
- byLe classi sono state rinominate per cambiare xle proporzioni. Ad esempio, .ratio-16by9è ora .ratio-16x9.
- Abbiamo eliminato il .embed-responsive-itemselettore del gruppo di elementi e a favore di un .ratio > *selettore più semplice. Non è necessaria più la classe e l'helper del rapporto ora funziona con qualsiasi elemento HTML.
- La $embed-responsive-aspect-ratiosmappa Sass è stata rinominata $aspect-ratiose i suoi valori sono stati semplificati per includere il nome della classe e la percentuale come key: valuecoppia.
- Le variabili CSS vengono ora generate e incluse per ogni valore nella mappa Sass. Modificare la --bs-aspect-ratiovariabile su .ratioper creare qualsiasi rapporto di aspetto personalizzato .
Rottura Le classi "Screen reader" ora sono classi "visivamente nascoste" .
- Modificato il file Sass da scss/helpers/_screenreaders.scssascss/helpers/_visually-hidden.scss
- Rinominato .sr-onlye .sr-only-focusablein .visually-hiddene.visually-hidden-focusable
- Rinominato sr-only()e sr-only-focusable()mixin in visually-hidden()e visually-hidden-focusable().
bootstrap-utilities.cssora include anche i nostri aiutanti. Gli helper non devono più essere importati nelle build personalizzate.

JavaScript

Rilasciata la dipendenza da jQuery e riscritti i plugin in modo che fossero in JavaScript normale.
RotturaGli attributi dei dati per tutti i plug-in JavaScript ora hanno uno spazio dei nomi per aiutare a distinguere la funzionalità Bootstrap da terze parti e dal tuo codice. Ad esempio, utilizziamo data-bs-toggleinvece di data-toggle.
Tutti i plugin ora possono accettare un selettore CSS come primo argomento. Puoi passare un elemento DOM o qualsiasi selettore CSS valido per creare una nuova istanza del plugin:
```
var modal = new bootstrap.Modal('#myModal')
var dropdown = new bootstrap.Dropdown('[data-bs-toggle="dropdown"]')
```
popperConfigpuò essere passato come una funzione che accetta la configurazione Popper predefinita di Bootstrap come argomento, in modo da poter unire questa configurazione predefinita a modo tuo. Si applica a menu a discesa, popover e suggerimenti.
Il valore predefinito per fallbackPlacementsviene modificato in ['top', 'right', 'bottom', 'left']per un migliore posizionamento degli elementi Popper. Si applica a menu a discesa, popover e suggerimenti.
Rimosso il trattino basso dai metodi statici pubblici come _getInstance()→ getInstance().