Migrazione à v5
Track and review changes to the Bootstrap file source, documentation, and components to help you migrate from v4 to v5.
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 cunnessicolor-contrast()
cum'è ùn hè più ligata à u spaziu di culore YIQ. Vede # 30168.$yiq-contrasted-threshold
hè rinominatu in$min-contrast-ratio
.$yiq-text-dark
è$yiq-text-light
sò 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 dimedia-breakpoint-down(md)
mira à i punti di vista più chjuchi dilg
).- 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 dimedia-breakpoint-between(sm, md)
vista tràsm
èlg
).
-
RuptureStili di stampa eliminati è
$enable-print-styles
variabili. E classi di visualizazione di stampa sò sempre intornu. Vede # 28339 . -
RuptureDropped
color()
,theme-color()
, egray()
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-color
culori. Vede # 29083 Attenti :color-level()
hè stata più tardi abbandunata inv5.0.0-alpha3
. -
RuptureRinominatu
$enable-prefers-reduced-motion-media-query
è$enable-pointer-cursor-for-buttons
à$enable-reduced-motion
è$enable-button-pointers
per brevità. -
RuptureEliminatu u
bg-gradient-variant()
mixin. Aduprate a.bg-gradient
classa 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()
pershift-color()
evità a collisione cù a funzione di scala di culore di Sass. -
box-shadow
I mixins ora permettenu inull
valori è abbandunànone
da 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-interval
hè statu eliminatu in favore di un novu sistema di culore. Tuttelighten()
edarken()
funzioni in a nostra basa di codice sò rimpiazzate datint-color()
èshade-color()
. Queste funzioni mischjeranu u culore cù biancu o neru invece di cambià a so ligerezza per una quantità fissa. Ushift-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-900
a$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
xxl
breakpoint per1400px
è 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 circa24px
, falà da30px
). 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-0
per currisponde à e novi utilità di gutter.
- Aggiunta una nova classe di goutte (
-
I culonni ùn anu più
position: relative
appiicatu, 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-1
di.order-5
a scatula. -
RuptureAbbandunatu u
.media
cumpunente perchè pò esse facilmente replicatu cù utilità. Vede #28265 è a pagina di utilità flex per un esempiu . -
Rupture
bootstrap-grid.css
avà s'applica solubox-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-col
mixin per difettu à e colonne uguali senza una dimensione specifica.
Cuntenutu, reboot, etc
-
RFS hè avà attivatu per difettu. Intestazioni chì utilizanu u
font-size()
mixin aghjustà automaticamente a sofont-size
scala 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-sizes
mappa Sass.$display-*-weight
Eliminate ancu e variàbili individuali per un s unicu$display-font-weight
è aghjustatufont-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-dark
sò abbandunati in favore di e classi.table-*
varianti chì ponu esse usatu per tutti l'elementi di a tavola (thead
,tbody
,tfoot
,tr
è ).th
td
-
RuptureU
table-row-variant()
mixin hè rinominatutable-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
-y
e-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 -
Ripristina l'horizontale predefinitu è
padding-left
l' elementi da u navigatore predefinitu à .<ul>
<ol>
40px
2rem
-
Added
$enable-smooth-scroll
, chì s'applicascroll-behavior: smooth
in u mondu, eccettu per l'utilizatori chì dumandanu un muvimentu ridottu attraversuprefers-reduced-motion
media 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
èend
invece dileft
è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-check
hè avà.form-check
..custom-check.custom-switch
hè avà.form-check.form-switch
..custom-select
hè avà.form-select
..custom-file
è.form-file
sò stati rimpiazzati da stili persunalizati in cima à.form-control
..custom-range
hè 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-text
cum'è 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-validation
classa 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
padding
per avvisi, breadcrumbs, cards, dropdowns, list groups, modali, popovers, è tooltips per esse basatu nantu à a nostra$spacer
variabile. 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à utilizatucurrentColor
.
Badges
-
RuptureEliminate tutte
.badge-*
e classi di culore per l'utilità di fondo (per esempiu, utilizate.bg-primary
invece di.badge-primary
). -
RuptureDropped - utilizate invece
.badge-pill
l'.rounded-pill
utilità. -
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-divider
per 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.btn
classi nantu à u<label>
. Vede # 30650 . I documenti per questu sò passati da a nostra pagina di Buttons à a nova sezione Forme. -
Rupture Abbandunatu
.btn-block
per utilità. Invece d'utilizà.btn-block
nantu à u.btn
, imbulighjate i vostri buttoni cù.d-grid
una.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()
è ibutton-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-deck
in 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-columns
in favore di a Masoneria. Vede # 28922 . -
RuptureSustituitu l'
.card
accordione basatu cù un novu cumpunente di Accordion .
Carrusel
-
Aggiunta una nova
.carousel-dark
variante 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
.close
per.btn-close
un 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-white
variante chì usafilter: 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-dark
variante è 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
flip
abbandunata per u plugin dropdown in favore di a cunfigurazione Popper nativa. Pudete avà disattivà u cumpurtamentu di flipping passendu un array viotu perfallbackPlacements
l'opzione in flip modificatore. -
I menu a tendina ponu avà cliccà cù una nova
autoClose
opzione 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-item
s 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-numbered
modificatore à i gruppi di lista.
Navs è tabs
- Aghjunghjite novi
null
variàbili perfont-size
,font-weight
,color
, è:hover
color
à a.nav-link
classe.
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-left
chì sò dinamicamente arrotondati in tutti i cantoni quandu sò separati l'un da l'altru. -
Aggiuntu
transition
s à i ligami di paginazione.
Popovers
-
RuptureRinominatu
.arrow
in.popover-arrow
u nostru mudellu popover predeterminatu. -
Opzione
whiteList
rinominata àallowList
.
Spinners
-
I spinners ora onoranu
prefers-reduced-motion: reduce
rallentendu l'animazioni. Vede # 31882 . -
Allineamentu verticale di spinner miglioratu.
Toasts
-
Toasts ponu avà esse posizionati in una
.toast-container
cù l'aiutu di l'utilità di pusizzioni . -
A durata predeterminata di toast hè cambiata à 5 seconde.
-
Sguassatu
overflow: hidden
da toast è rimpiazzatu cùborder-radius
s propiu cùcalc()
funzioni.
Tooltips
-
RuptureRinominatu
.arrow
in.tooltip-arrow
u nostru mudellu di tooltip predeterminatu. -
RuptureU valore predeterminatu per u
fallbackPlacements
hè cambiatu in['top', 'right', 'bottom', 'left']
per una megliu piazzamentu di elementi popper. -
RuptureOpzione
whiteList
rinominata àallowList
.
Utilità
-
RuptureRinuminatu parechji 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
.
- Rinominatu
-
RuptureDisabilitatu i margini negativi per difettu.
-
Aggiunta una nova
.bg-body
classe per stabilisce rapidamente u<body>
sfondate à elementi supplementari. -
Aghjunghjite novi utilità di pusizioni per
top
,right
,bottom
, èleft
. I valori includenu0
,50%
, è100%
per ogni pruprietà. -
Aggiunti novi
.translate-middle-x
è.translate-middle-y
utilità per centru orizzontalmente o verticalmente elementi posizionati assoluti / fissi. -
Aghjunghjite novi
border-width
utilità . -
RuptureRinominatu
.text-monospace
à.font-monospace
. -
RuptureSguassatu
.text-hide
postu chì hè un metudu anticu per ammuccià u testu chì ùn deve micca esse usatu più. -
Utilità
.fs-*
aghjunte perfont-size
utilità (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-grid
to display utilità è novigap
utilità (.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-height
utilità:.lh-1
,.lh-sm
,.lh-base
è.lh-lg
. Vede quì . -
Sposta l'
.d-none
utilità in u nostru CSS per dà più pesu à l'altri utilità di visualizazione. -
Estendu l'
.visually-hidden-focusable
aiutu 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à
by
inx
u rapportu d'aspettu. Per esempiu,.ratio-16by9
hè avà.ratio-16x9
. - Avemu abbandunatu u
.embed-responsive-item
selettore 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-ratios
mappa Sass hè stata rinominata$aspect-ratios
è i so valori sò simplificati per include u nome di a classa è u percentualità cum'è akey: value
coppia. - Variabili CSS sò avà generati è inclusi per ogni valore in a mappa Sass. Mudificà a
--bs-aspect-ratio
variabile nantu à.ratio
per creà qualsiasi rapportu d'aspettu persunalizatu .
- E classi sò state rinominate per cambià
-
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()
.
- Cambiatu u schedariu Sass da
-
bootstrap-utilities.css
avà 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-toggle
invece didata-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"]')
-
popperConfig
pò 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
fallbackPlacements
hè 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()
.