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.
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 incolor-contrast()
quanto non è più correlata allo spazio colore YIQ. Vedi #30168.$yiq-contrasted-threshold
viene rinominato in$min-contrast-ratio
.$yiq-text-dark
e$yiq-text-light
sono rispettivamente rinominati$color-contrast-dark
e$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 dimedia-breakpoint-down(md)
visualizzare finestre di destinazione più piccole dilg
).- 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 dellemedia-breakpoint-between(sm, md)
finestre di destinazione trasm
elg
).
-
RotturaStili di stampa e
$enable-print-styles
variabili rimossi. Le classi di visualizzazione della stampa sono ancora in circolazione. Vedi #28339 . -
RotturaDropped
color()
,theme-color()
, egray()
funzioni a favore delle variabili. Vedi #29083 . -
Rottura
theme-color-level()
La funzione rinominatacolor-level()
e ora accetta qualsiasi colore desiderato invece dei soli$theme-color
colori. Vedi #29083 Attenzione:color-level()
è stato successivamente inseritov5.0.0-alpha3
. -
RotturaRinominato
$enable-prefers-reduced-motion-media-query
e$enable-pointer-cursor-for-buttons
in$enable-reduced-motion
e$enable-button-pointers
per brevità. -
RotturaRimosso il
bg-gradient-variant()
mix. Usa la.bg-gradient
classe 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()
-
Rottura
scale-color()
Funzione rinominata inshift-color()
per evitare collisioni con la funzione di ridimensionamento del colore di Sass. -
box-shadow
mixins ora consentenull
valori e dropnone
da 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. Tuttelighten()
e ledarken()
funzioni nella nostra base di codice sono sostituite datint-color()
eshade-color()
. Queste funzioni mescoleranno il colore con il bianco o il nero invece di cambiarne la luminosità di una quantità fissa. Ilshift-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-900
a$black
. -
Per supportare il nostro sistema di colori, abbiamo aggiunto nuove funzioni personalizzate
tint-color()
eshade-color()
per mescolare i nostri colori in modo appropriato.
Aggiornamenti della griglia
-
Nuovo punto di interruzione! Aggiunto nuovo
xxl
punto di interruzione per1400px
e 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 circa24px
, in basso da30px
). 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-gutters
in.g-0
per abbinare le nuove utilità di grondaia.
- Aggiunta una nuova classe di grondaie (
-
Le colonne non sono più state
position: relative
applicate, quindi potresti dover aggiungere.position-relative
alcuni elementi per ripristinare quel comportamento. -
RotturaAbbandonato diverse
.order-*
classi che spesso non venivano utilizzate. Ora forniamo solo.order-1
fuori.order-5
dagli schemi. -
RotturaEliminato il
.media
componente in quanto può essere facilmente replicato con le utilità. Vedere #28265 e la pagina delle utilità flessibili per un esempio . -
Rottura
bootstrap-grid.css
ora si applica solobox-sizing: border-box
alla 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-classes
non disabilita più la generazione di classi contenitore. Vedi #29146. -
Aggiornato il
make-col
mixin per impostare colonne uguali senza una dimensione specificata.
Contenuto, riavvio, ecc
-
RFS è ora abilitato per impostazione predefinita. Le intestazioni che utilizzano il
font-size()
mixin regoleranno automaticamente la lorofont-size
scala 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-sizes
mappa Sass. Rimosse anche le singole$display-*-weight
variabili per un singolo$display-font-weight
sfont-size
. -
Aggiunte due nuove
.display-*
dimensioni dell'intestazione.display-5
e.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-light
e.thead-dark
vengono eliminate a favore delle.table-*
classi variant che possono essere utilizzate per tutti gli elementi della tabella ( ,thead
,tbody
,tfoot
etr
) .th
td
-
RotturaIl
table-row-variant()
mixin viene rinominatotable-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
-y
e-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-left
Ripristina l' orizzontale predefinito<ul>
e<ol>
gli elementi dal predefinito del browser40px
a2rem
. -
Aggiunto
$enable-smooth-scroll
, che si applicascroll-behavior: smooth
a livello globale, ad eccezione degli utenti che richiedono una riduzione del movimento tramiteprefers-reduced-motion
query 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
start
eend
al posto dileft
eright
.
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-file
e.form-file
sono stati sostituiti da stili personalizzati in cima a.form-control
..custom-range
è ora.form-range
.- Nativo
.form-control-file
e.form-control-range
.
-
RotturaCaduto
.input-group-append
e.input-group-prepend
. Ora puoi semplicemente aggiungere pulsanti e.input-group-text
come 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-validation
classe 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-row
o.form-inline
. -
RotturaLe etichette dei moduli ora richiedono
.form-label
. -
Rottura
.form-text
non è più setdisplay
, 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 conmultiple
. -
File Sass sorgente riorganizzati in
scss/forms/
, inclusi gli stili dei gruppi di input.
Componenti
- Valori unificati
padding
per avvisi, breadcrumb, schede, menu a discesa, gruppi di elenchi, modali, popover e suggerimenti per essere basati sulla nostra$spacer
variabile. 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-primary
invece di.badge-primary
). -
RotturaRilasciato : utilizzare invece
.badge-pill
l'.rounded-pill
utilità. -
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
/.5em
a.35em
/.65em
.
Briciole di pane
-
Semplificato l'aspetto predefinito dei breadcrumb rimuovendo
padding
,background-color
, eborder-radius
. -
Aggiunta nuova proprietà personalizzata CSS
--bs-breadcrumb-divider
per 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-check
a<input>
e abbinalo a qualsiasi.btn
classe su<label>
. Vedi #30650 . I documenti per questo sono stati spostati dalla nostra pagina Pulsanti alla nuova sezione Moduli. -
Rottura Abbandonato
.btn-block
per utilità. Invece di usare.btn-block
su.btn
, avvolgi i tuoi pulsanti con.d-grid
e.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()
ebutton-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-deck
a 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-columns
a favore della Massoneria. Vedi #28922 . -
RotturaSostituita la
.card
fisarmonica basata con un nuovo componente Accordion .
Giostra
-
Aggiunta una nuova
.carousel-dark
variante 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
.close
per.btn-close
un 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-white
variante chefilter: 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-dark
variante 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 edata-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
flip
per 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'fallbackPlacements
opzione nel modificatore di capovolgimento . -
I menu a discesa possono ora essere cliccabili con una nuova
autoClose
opzione 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-item
s 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-numbered
modificatore per elencare i gruppi.
Navigatori e schede
- Aggiunte nuove
null
variabili perfont-size
,font-weight
,color
e:hover
color
alla.nav-link
classe.
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-left
che vengono arrotondati dinamicamente su tutti gli angoli quando separati l'uno dall'altro. -
Aggiunti
transition
messaggi di posta elettronica ai collegamenti di impaginazione.
Popover
-
RotturaRinominato
.arrow
in.popover-arrow
nel nostro modello popover predefinito. -
whiteList
Opzione rinominata inallowList
.
Filatori
-
Gli spinner ora onorano
prefers-reduced-motion: reduce
rallentando le animazioni. Vedi #31882 . -
Allineamento verticale dello spinner migliorato.
Brindisi
-
I toast possono ora essere posizionati in a
.toast-container
con l'aiuto delle utilità di posizionamento . -
Durata del brindisi predefinita modificata a 5 secondi.
-
Rimosso
overflow: hidden
dai brindisi e sostituito conborder-radius
s appropriati concalc()
funzioni.
Suggerimenti
-
RotturaRinominato
.arrow
in.tooltip-arrow
nel nostro modello di descrizione comando predefinito. -
RotturaIl valore predefinito per
fallbackPlacements
viene modificato in['top', 'right', 'bottom', 'left']
per un migliore posizionamento degli elementi popper. -
Rottura
whiteList
Opzione rinominata inallowList
.
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-left
e.float-right
in.float-start
e.float-end
. - Rinominato
.border-left
e.border-right
in.border-start
e.border-end
. - Rinominato
.rounded-left
e.rounded-right
in.rounded-start
e.rounded-end
. - Rinominato
.ml-*
e.mr-*
in.ms-*
e.me-*
. - Rinominato
.pl-*
e.pr-*
in.ps-*
e.pe-*
. - Rinominato
.text-left
e.text-right
in.text-start
e.text-end
.
- Rinominato
-
RotturaMargini negativi disabilitati per impostazione predefinita.
-
Aggiunta una nuova
.bg-body
classe per impostare rapidamente lo<body>
sfondo di ' su elementi aggiuntivi. -
Aggiunte nuove utilità di posizione per
top
,right
,bottom
eleft
. I valori includono0
,50%
e100%
per ogni proprietà. -
Aggiunte nuove
.translate-middle-x
e.translate-middle-y
utilità per centrare orizzontalmente o verticalmente gli elementi posizionati assoluti/fissi. -
Aggiunte nuove
border-width
utilità . -
RotturaRinominato
.text-monospace
in.font-monospace
. -
RotturaRimosso
.text-hide
in quanto metodo antiquato per nascondere il testo che non dovrebbe più essere utilizzato. -
Aggiunte
.fs-*
utilità perfont-size
le 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-grid
per visualizzare utilità e nuovegap
utilità (.gap
) per layout CSS Grid e flexbox. -
RotturaRimosso
.rounded-sm
erounded-lg
, e introdotta una nuova scala di classi,.rounded-0
a.rounded-3
. Vedi #31687 . -
Aggiunte nuove
line-height
utilità:.lh-1
,.lh-sm
,.lh-base
e.lh-lg
. Vedi qui . -
Spostata l'
.d-none
utilità nel nostro CSS per darle più peso rispetto ad altre utilità di visualizzazione. -
Esteso l'
.visually-hidden-focusable
helper 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.
by
Le classi sono state rinominate per cambiarex
le proporzioni. Ad esempio,.ratio-16by9
è ora.ratio-16x9
.- Abbiamo eliminato il
.embed-responsive-item
selettore 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-ratios
mappa Sass è stata rinominata$aspect-ratios
e i suoi valori sono stati semplificati per includere il nome della classe e la percentuale comekey: value
coppia. - Le variabili CSS vengono ora generate e incluse per ogni valore nella mappa Sass. Modificare la
--bs-aspect-ratio
variabile su.ratio
per creare qualsiasi rapporto di aspetto personalizzato .
-
Rottura Le classi "Screen reader" ora sono classi "visivamente nascoste" .
- Modificato il file Sass da
scss/helpers/_screenreaders.scss
ascss/helpers/_visually-hidden.scss
- Rinominato
.sr-only
e.sr-only-focusable
in.visually-hidden
e.visually-hidden-focusable
- Rinominato
sr-only()
esr-only-focusable()
mixin invisually-hidden()
evisually-hidden-focusable()
.
- Modificato il file Sass da
-
bootstrap-utilities.css
ora 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-toggle
invece didata-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"]')
-
popperConfig
può 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
fallbackPlacements
viene 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()
.