Migrerer til v5
Spor og gennemgå ændringer af Bootstrap-kildefilerne, dokumentationen og komponenterne for at hjælpe dig med at migrere fra v4 til v5.
v5.2.0
Fornyet design
Bootstrap v5.2.0 har en subtil designopdatering til en håndfuld komponenter og egenskaber på tværs af projektet, især gennem raffinerede border-radius
værdier på knapper og formularkontroller . Vores dokumentation er også blevet opdateret med en ny hjemmeside, enklere dokumentlayout, der ikke længere skjuler sektioner af sidebjælken, og mere fremtrædende eksempler på Bootstrap-ikoner .
Flere CSS-variabler
Vi har opdateret alle vores komponenter til at bruge CSS-variabler. Mens Sass stadig understøtter alt, er hver komponent blevet opdateret til at inkludere CSS-variabler på komponentbaseklasserne (f.eks. .btn
), hvilket giver mulighed for mere real-time tilpasning af Bootstrap. I efterfølgende udgivelser vil vi fortsætte med at udvide vores brug af CSS-variabler til vores layout, formularer, hjælpere og hjælpeprogrammer. Læs mere om CSS-variabler i hver komponent på deres respektive dokumentationssider.
Vores CSS-variable brug vil være noget ufuldstændig indtil Bootstrap 6. Selvom vi ville elske at implementere disse fuldt ud over hele linjen, risikerer de at forårsage brydende ændringer. For eksempel $alert-border-width: var(--bs-border-width)
bryder indstilling i vores kildekode potentielle Sass i din egen kode, hvis du gjorde det $alert-border-width * 2
af en eller anden grund.
Som sådan vil vi, hvor det er muligt, fortsætte med at skubbe mod flere CSS-variabler, men vær opmærksom på, at vores implementering kan være lidt begrænset i v5.
Ny_maps.scss
Bootstrap v5.2.0 introducerede en ny Sass-fil med _maps.scss
. Det trækker flere Sass-kort ud _variables.scss
for at løse et problem, hvor opdateringer til et originalt kort ikke blev anvendt på sekundære kort, der udvider dem. For eksempel blev opdateringer til $theme-colors
ikke anvendt på andre temakort, der var afhængige af $theme-colors
, hvilket bryder vigtige tilpasningsarbejdsgange. Kort sagt har Sass en begrænsning, hvor når en standardvariabel eller et standardkort er blevet brugt , kan det ikke opdateres. Der er en lignende mangel med CSS-variabler, når de bruges til at komponere andre CSS-variabler.
Dette er grunden til, at variable tilpasninger i Bootstrap skal komme efter @import "functions"
, men før @import "variables"
og resten af vores importstak. Det samme gælder for Sass-kort - du skal tilsidesætte standardindstillingerne, før de bliver brugt. Følgende kort er blevet flyttet til det nye _maps.scss
:
$theme-colors-rgb
$utilities-colors
$utilities-text
$utilities-text-colors
$utilities-bg
$utilities-bg-colors
$negative-spacers
$gutters
Dine brugerdefinerede Bootstrap CSS-bygninger skulle nu se nogenlunde sådan ud med en separat kortimport.
// 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
Nye hjælpeprogrammer
- Udvidede
font-weight
hjælpeprogrammer til.fw-semibold
halvfede skrifttyper. - Udvidede
border-radius
hjælpeprogrammer til at omfatte to nye størrelser.rounded-4
og.rounded-5
, for flere muligheder.
Yderligere ændringer
-
Introduceret ny
$enable-container-classes
mulighed. — Når nu tilvælges det eksperimentelle CSS Grid-layout,.container-*
vil klasser stadig blive kompileret, medmindre denne mulighed er indstillet tilfalse
. Containere beholder nu også deres rendeværdier. -
Offcanvas-komponenten har nu responsive variationer . Den originale
.offcanvas
klasse forbliver uændret - den skjuler indhold på tværs af alle visningsporte. For at gøre den responsiv skal du ændre den.offcanvas
klasse til en hvilken som helst.offcanvas-{sm|md|lg|xl|xxl}
klasse. -
Tykkere borddelere er nu opt-in. — Vi har fjernet den tykkere og sværere at tilsidesætte grænsen mellem tabelgrupper og flyttet den til en valgfri klasse, du kan anvende,
.table-group-divider
. Se tabeldokumenterne for et eksempel. -
Scrollspy er blevet omskrevet til at bruge Intersection Observer API , hvilket betyder, at du ikke længere har brug for relative overordnede wrappers, udfaser
offset
konfiguration og mere. Se efter, at dine Scrollspy-implementeringer er mere nøjagtige og konsistente i deres nav-fremhævning. -
Popovers og værktøjstip bruger nu CSS-variabler. Nogle CSS-variabler er blevet opdateret fra deres Sass-modstykker for at reducere antallet af variabler. Som følge heraf er tre variabler blevet forældet i denne udgivelse:
$popover-arrow-color
,$popover-arrow-outer-color
, og$tooltip-arrow-color
. -
Tilføjet nye
.text-bg-{color}
hjælpere. I stedet for at indstille individuelle.text-*
og.bg-*
hjælpeprogrammer, kan du nu bruge hjælperne til.text-bg-*
at indstille enbackground-color
med kontrasterende forgrundcolor
. -
Tilføjet
.form-check-reverse
modifikator for at vende rækkefølgen af etiketter og tilhørende afkrydsningsfelter/radioer. -
Tilføjet understøttelse af stribede kolonner til tabeller via den nye
.table-striped-columns
klasse.
For en komplet liste over ændringer, se v5.2.0-projektet på GitHub .
v5.1.0
-
Tilføjet eksperimentel understøttelse af CSS Grid-layout . — Dette er et igangværende arbejde og er endnu ikke klar til produktionsbrug, men du kan tilmelde dig den nye funktion via Sass. For at aktivere det skal du deaktivere standardgitteret ved at indstille
$enable-grid-classes: false
og aktivere CSS-gitteret ved at indstille$enable-cssgrid: true
. -
Opdaterede navbarer for at understøtte offcanvas. — Tilføj offcanvas-skuffer i enhver navbar med de responsive
.navbar-expand-*
klasser og noget offcanvas-markering. -
Tilføjet ny pladsholder-komponent . — Vores nyeste komponent, en måde at give midlertidige blokeringer i stedet for rigtigt indhold for at hjælpe med at indikere, at noget stadig indlæses på dit websted eller din app.
-
Collapse plugin understøtter nu horisontal kollaps . — Føj
.collapse-horizontal
til din.collapse
for at skjule iwidth
stedet forheight
. Undgå ommaling af browseren ved at indstille amin-height
ellerheight
. -
Tilføjet nye stak- og lodrette regelhjælpere. — Anvend hurtigt flere flexbox-egenskaber for hurtigt at skabe brugerdefinerede layouts med stakke . Vælg mellem vandrette (
.hstack
) og lodrette (.vstack
) stakke. Tilføj lodrette skillevægge svarende til<hr>
elementer med de nye.vr
hjælpere . -
Tilføjet nye globale
:root
CSS-variabler. — Tilføjet flere nye CSS-variabler til:root
niveauet for styring af<body>
stilarter. Flere er på vej, herunder på tværs af vores hjælpeprogrammer og komponenter, men læs nu CSS-variabler i Tilpas-sektionen . -
Reviderede farve- og baggrundsværktøjer for at bruge CSS-variabler og tilføjede nye tekstopacitets- og baggrundsopacitetsværktøjer . —
.text-*
og.bg-*
hjælpeprogrammer er nu bygget med CSS-variabler ogrgba()
farveværdier, så du nemt kan tilpasse ethvert hjælpeprogram med nye opacitetsværktøjer. -
Tilføjet nye uddragseksempler baseret for at vise, hvordan man tilpasser vores komponenter. — Træk klar til at bruge tilpassede komponenter og andre almindelige designmønstre med vores nye Snippets-eksempler . Indeholder sidefødder , rullemenuer , listegrupper og modaler .
-
Fjernede ubrugte positioneringsstile fra popovers og værktøjstip , da disse udelukkende håndteres af Popper.
$tooltip-margin
er blevet forældet og indstillet tilnull
i processen.
Vil du have mere information? Læs v5.1.0 blogindlægget.
Afhængigheder
- Droppede jQuery.
- Opgraderet fra Popper v1.x til Popper v2.x.
- Udskiftede Libsass med Dart Sass, da vores Sass-kompiler givet Libsass blev forældet.
- Migrerede fra Jekyll til Hugo for at bygge vores dokumentation
Browser support
- Droppede Internet Explorer 10 og 11
- Droppet Microsoft Edge < 16 (Legacy Edge)
- Droppede Firefox < 60
- Droppet Safari < 12
- Droppede iOS Safari < 12
- Droppet Chrome < 60
Dokumentationsændringer
- Redesignet hjemmeside, dokumentlayout og sidefod.
- Tilføjet ny pakkeguide .
- Tilføjet ny Tilpas sektion , der erstatter v4's temaside , med nye detaljer om Sass, globale konfigurationsmuligheder, farveskemaer, CSS-variabler og mere.
- Omorganiserede al formulardokumentation til den nye formularsektion , hvorved indholdet blev opdelt i mere fokuserede sider.
- Tilsvarende opdaterede Layout-sektionen for at udfylde gitterindholdet mere tydeligt.
- Omdøbt "Navs"-komponentsiden til "Navs & Tabs".
- Omdøbt "Checks"-siden til "Checks & radios".
- Omdesignet navbaren og tilføjet en ny undernavigering for at gøre det nemmere at komme rundt på vores websteder og docs-versioner.
- Tilføjet ny tastaturgenvej til søgefeltet: Ctrl + /.
Sass
-
Vi har droppet standard Sass-kortsammenlægninger for at gøre det nemmere at fjerne overflødige værdier. Husk, at du nu skal definere alle værdier i Sass-kortene som
$theme-colors
. Se, hvordan du håndterer Sass-kort . -
Går i stykkerOmdøbt
color-yiq()
funktion og relaterede variabler tilcolor-contrast()
, da den ikke længere er relateret til YIQ-farverum. Se #30168.$yiq-contrasted-threshold
er omdøbt til$min-contrast-ratio
.$yiq-text-dark
og$yiq-text-light
er henholdsvis omdøbt til$color-contrast-dark
og$color-contrast-light
.
-
Går i stykkerMedieforespørgselsmixins parametre er ændret for en mere logisk tilgang.
media-breakpoint-down()
bruger selve brudpunktet i stedet for det næste brudpunkt (f.eks. imedia-breakpoint-down(lg)
stedet formedia-breakpoint-down(md)
målvisningsporte mindre endlg
).- På samme måde bruger den anden parameter i
media-breakpoint-between()
også selve brudpunktet i stedet for det næste brudpunkt (f.eks. imedia-between(sm, lg)
stedet formedia-breakpoint-between(sm, md)
målvisningsporte mellemsm
oglg
).
-
Går i stykkerFjernede udskriftsstile og
$enable-print-styles
variabel. Trykvisningsklasser findes stadig. Se #28339 . -
Går i stykkerDroppet
color()
,theme-color()
, oggray()
fungerer til fordel for variabler. Se #29083 . -
Går i stykkerOmdøbt
theme-color-level()
funktion tilcolor-level()
og accepterer nu enhver farve, du ønsker i stedet for kun$theme-color
farver. Se #29083 Pas på:color-level()
blev senere droppet indv5.0.0-alpha3
. -
Går i stykkerOmdøbt
$enable-prefers-reduced-motion-media-query
og$enable-pointer-cursor-for-buttons
til$enable-reduced-motion
og$enable-button-pointers
for kortheds skyld. -
Går i stykkerFjernede
bg-gradient-variant()
blandingen. Brug.bg-gradient
klassen til at tilføje gradienter til elementer i stedet for de genererede.bg-gradient-*
klasser. -
Går i stykker Fjernede tidligere forældede blandinger:
hover
,hover-focus
,plain-hover-focus
, oghover-focus-active
float()
form-control-mixin()
nav-divider()
retina-img()
text-hide()
(også droppet den tilknyttede hjælpeklasse,.text-hide
)visibility()
form-control-focus()
-
Går i stykkerOmdøbt
scale-color()
funktion tilshift-color()
for at undgå kollision med Sass egen farveskaleringsfunktion. -
box-shadow
mixins tillader nunull
værdier og dropnone
fra flere argumenter. Se #30394 . -
Blandingen
border-radius()
har nu en standardværdi.
Farvesystem
-
Farvesystemet som fungerede med
color-level()
og$theme-color-interval
blev fjernet til fordel for et nyt farvesystem. Allelighten()
ogdarken()
funktioner i vores kodebase erstattes aftint-color()
ogshade-color()
. Disse funktioner vil blande farven med enten hvid eller sort i stedet for at ændre dens lyshed med en fast mængde. Denshift-color()
vil enten tone eller skygge en farve afhængigt af om dens vægtparameter er positiv eller negativ. Se #30622 for flere detaljer. -
Tilføjet nye nuancer og nuancer for hver farve, hvilket giver ni separate farver for hver basisfarve, som nye Sass-variabler.
-
Forbedret farvekontrast. Bumpet farvekontrastforhold fra 3:1 til 4,5:1 og opdaterede blå, grøn, cyan og pink farver for at sikre WCAG 2.1 AA kontrast. Ændrede også vores farvekontrastfarve fra
$gray-900
til$black
. -
For at understøtte vores farvesystem har vi tilføjet nye brugerdefinerede
tint-color()
ogshade-color()
funktioner til at blande vores farver passende.
Gitteropdateringer
-
Nyt brudpunkt! Tilføjet nyt
xxl
breakpoint for1400px
og op. Ingen ændringer til alle andre brudpunkter. -
Forbedrede tagrender. Tagrender er nu sat i rems, og er smallere end v4 (
1.5rem
, eller ca24px
, ned fra30px
). Dette justerer vores netsystems tagrender med vores afstandsværktøjer.- Tilføjet ny tagrendeklasse (
.g-*
,.gx-*
, og.gy-*
) for at kontrollere vandrette/lodrette tagrender, vandrette tagrender og vertikale tagrender. - Går i stykkerOmdøbt
.no-gutters
til.g-0
for at matche nye tagrender.
- Tilføjet ny tagrendeklasse (
-
Kolonner er ikke længere
position: relative
anvendt, så du skal muligvis tilføje.position-relative
nogle elementer for at gendanne denne adfærd. -
Går i stykkerDroppede flere
.order-*
klasser, der ofte gik ubrugte. Vi leverer nu kun.order-1
til.order-5
out of the box. -
Går i stykkerDroppede
.media
komponenten, da den nemt kan replikeres med hjælpeprogrammer. Se #28265 og siden med flex-værktøjer for et eksempel . -
Går i stykker
bootstrap-grid.css
gælder nu kunbox-sizing: border-box
for kolonnen i stedet for at nulstille den globale boksstørrelse. På denne måde kan vores gitterstile bruges flere steder uden forstyrrelser. -
$enable-grid-classes
deaktiverer ikke længere genereringen af containerklasser længere. Se #29146. -
Opdaterede
make-col
mixin til standard til lige store kolonner uden en specificeret størrelse.
Indhold, genstart osv
-
RFS er nu aktiveret som standard. Overskrifter ved hjælp af
font-size()
mixin vil automatisk justere deresfont-size
til skalering med viewporten. Denne funktion var tidligere tilvalgt med v4. -
Går i stykkerRevideret vores displaytypografi for at erstatte vores
$display-*
variabler og med et$display-font-sizes
Sass-kort. Fjernede også de individuelle$display-*-weight
variable for en enkelt$display-font-weight
og justeretfont-size
s. -
Tilføjet to nye
.display-*
overskriftsstørrelser,.display-5
og.display-6
. -
Links er som standard understreget (ikke kun ved svæv), medmindre de er en del af specifikke komponenter.
-
Omdesignede tabeller for at genopfriske deres stilarter og genopbygge dem med CSS-variabler for mere kontrol over stil.
-
Går i stykkerIndlejrede tabeller arver ikke stilarter længere.
-
Går i stykker
.thead-light
og.thead-dark
udgår til fordel for.table-*
variantklasserne, som kan bruges til alle tabelelementer (thead
,tbody
,tfoot
,tr
,th
ogtd
). -
Går i stykkerMixin
table-row-variant()
omdøbes tiltable-variant()
og accepterer kun 2 parametre:$color
(farvenavn) og$value
(farvekode). Kantfarven og accentfarverne beregnes automatisk baseret på tabelfaktorvariablerne. -
Opdel tabelcelleudfyldningsvariabler i
-y
og-x
. -
Går i stykkerFaldt
.pre-scrollable
klasse. Se #29135 -
Går i stykker
.text-*
hjælpeprogrammer tilføjer ikke svæve- og fokustilstande til links længere..link-*
hjælperklasser kan bruges i stedet. Se #29267 -
Går i stykkerFaldt
.text-justify
klasse. Se #29793 -
Går i stykker
<hr>
elementer bruges nuheight
i stedet forborder
at understøttesize
attributten bedre. Dette gør det også muligt at bruge polstringsværktøjer til at skabe tykkere skillevægge (f.eks.<hr class="py-1">
). -
Nulstil standard vandret
padding-left
til<ul>
og<ol>
elementer fra browserstandard40px
til2rem
. -
Tilføjet
$enable-smooth-scroll
, som gælderscroll-behavior: smooth
globalt – undtagen for brugere, der beder om reduceret bevægelse gennemprefers-reduced-motion
medieforespørgsel. Se #31877
RTL
- Horisontale retningsspecifikke variabler, hjælpeprogrammer og mixins er alle blevet omdøbt til at bruge logiske egenskaber som dem, der findes i flexbox-layouts - f.eks.
start
ogend
i stedet forleft
ogright
.
Formularer
-
Tilføjet nye flydende formularer! Vi har promoveret eksemplet med flydende etiketter til fuldt understøttede formularkomponenter. Se den nye side med flydende etiketter.
-
Går i stykker Konsoliderede native og brugerdefinerede formularelementer. Afkrydsningsfelter, radioer, udvalgte og andre input, der havde native og brugerdefinerede klasser i v4, er blevet konsolideret. Nu er næsten alle vores formularelementer helt tilpassede, de fleste uden behov for tilpasset HTML.
.custom-control.custom-checkbox
er nu.form-check
..custom-control.custom-custom-radio
er nu.form-check
..custom-control.custom-switch
er nu.form-check.form-switch
..custom-select
er nu.form-select
..custom-file
og.form-file
er blevet erstattet af brugerdefinerede stilarter oven på.form-control
..custom-range
er nu.form-range
.- Droppet indfødte
.form-control-file
og.form-control-range
.
-
Går i stykkerDroppet
.input-group-append
og.input-group-prepend
. Du kan nu blot tilføje knapper og.input-group-text
som direkte børn af inputgrupperne. -
Den langvarige Missing border-radius på inputgruppe med valideringsfeedback-fejl er endelig rettet ved at tilføje en ekstra
.has-validation
klasse til inputgrupper med validering. -
Går i stykker Droppede formularspecifikke layoutklasser for vores gittersystem. Brug vores gitter og hjælpeprogrammer i stedet for
.form-group
,.form-row
, eller.form-inline
. -
Går i stykkerFormularetiketter kræver nu
.form-label
. -
Går i stykker
.form-text
indstiller ikke længeredisplay
, hvilket giver dig mulighed for at oprette inline eller blokere hjælpetekst, som du ønsker, blot ved at ændre HTML-elementet. -
Formkontrolelementer, der ikke længere bruges, er faste
height
, når det er muligt, men udskydes i stedet formin-height
at forbedre tilpasning og kompatibilitet med andre komponenter. -
Valideringsikoner anvendes ikke længere på
<select>
s medmultiple
. -
Omarrangerede Sass-kildefiler under
scss/forms/
, inklusive inputgruppetypografier.
Komponenter
- Samlede
padding
værdier for advarsler, brødkrummer, kort, rullemenuer, listegrupper, modaler, popovers og værktøjstip skal være baseret på vores$spacer
variabel. Se #30564 .
Harmonika
- Tilføjet ny harmonika-komponent .
Advarsler
-
Advarsler har nu eksempler med ikoner .
-
Fjernede brugerdefinerede stilarter for
<hr>
s i hver advarsel, da de allerede brugercurrentColor
.
Badges
-
Går i stykkerDroppede alle
.badge-*
farveklasser for baggrundsværktøjer (f.eks. brug.bg-primary
i stedet for.badge-primary
). -
Går i stykkerDroppet
.badge-pill
— brug.rounded-pill
værktøjet i stedet. -
Går i stykkerFjernede svæve- og fokusstile for
<a>
og<button>
elementer. -
Øget standardpolstring for badges fra
.25em
/.5em
til.35em
/.65em
.
Brødkrummer
-
Forenklet standardudseendet for brødkrummer ved at fjerne
padding
,background-color
, ogborder-radius
. -
Tilføjet ny tilpasset CSS-egenskab
--bs-breadcrumb-divider
for nem tilpasning uden at skulle kompilere CSS igen.
Knapper
-
Går i stykker Skift-knapper , med afkrydsningsfelter eller radioer, kræver ikke længere JavaScript og har ny markering. Vi kræver ikke længere et indpakningselement, føj
.btn-check
til<input>
, og parre det med eventuelle.btn
klasser på<label>
. Se #30650 . Dokumenterne til dette er flyttet fra vores knapside til den nye formularsektion. -
Går i stykker Droppet
.btn-block
for forsyningsselskaber. I stedet for at bruge.btn-block
på.btn
, skal du pakke dine knapper med.d-grid
og et.gap-*
værktøj til at placere dem efter behov. Skift til responsive klasser for at få endnu mere kontrol over dem. Læs dokumenterne for nogle eksempler. -
Opdateret vores
button-variant()
ogbutton-outline-variant()
mixins for at understøtte yderligere parametre. -
Opdaterede knapper for at sikre øget kontrast ved svævning og aktive tilstande.
-
Deaktiverede knapper har nu
pointer-events: none;
.
Kort
-
Går i stykkerFaldt
.card-deck
til fordel for vores net. Pak dine kort ind i kolonneklasser, og tilføj en forældrebeholder.row-cols-*
for at genskabe kortbunker (men med mere kontrol over responsiv justering). -
Går i stykkerFaldt
.card-columns
til fordel for murværk. Se #28922 . -
Går i stykkerUdskiftede den
.card
baserede harmonika med en ny harmonika-komponent .
Karrusel
-
Tilføjet ny
.carousel-dark
variant til mørk tekst, kontroller og indikatorer (fantastisk til lysere baggrunde). -
Udskiftet chevron-ikoner til karruselkontroller med nye SVG'er fra Bootstrap Icons .
Luk knap
-
Går i stykkerOmdøbt
.close
til.btn-close
for et mindre generisk navn. -
Luk-knapper bruger nu en
background-image
(indlejret SVG) i stedet for en×
i HTML, hvilket muliggør lettere tilpasning uden at skulle røre ved din markering. -
Tilføjet ny
.btn-close-white
variant, der brugesfilter: invert(1)
til at aktivere højere kontrast afvisningsikoner mod mørkere baggrunde.
Bryder sammen
- Fjernet rulleforankring til harmonikaer.
Dropdowns
-
Tilføjet ny
.dropdown-menu-dark
variant og tilhørende variabler til on-demand mørke dropdowns. -
Tilføjet ny variabel for
$dropdown-padding-x
. -
Mørkede dropdown-deleren for forbedret kontrast.
-
Går i stykkerAlle hændelser for rullemenuen udløses nu på rullemenuknappen og bobles derefter op til det overordnede element.
-
Rullemenuer har nu en
data-bs-popper="static"
egenskab indstillet, når placeringen af rullemenuen er statisk, eller rullemenuen er i navigeringslinjen. Dette er tilføjet af vores JavaScript og hjælper os med at bruge tilpassede positionsstile uden at forstyrre Poppers positionering. -
Går i stykkerDroppede
flip
mulighed for dropdown-plugin til fordel for native Popper-konfiguration. Du kan nu deaktivere vendeadfærden ved at sende et tomt array tilfallbackPlacements
option i flip - modifikator. -
Rullemenuer kan nu klikkes med en ny
autoClose
mulighed for at håndtere autoluk-adfærden . Du kan bruge denne mulighed til at acceptere klikket i eller uden for rullemenuen for at gøre den interaktiv. -
Dropdowns understøtter nu
.dropdown-item
s pakket ind i<li>
s.
Jumbotron
- Går i stykkerDroppede jumbotron-komponenten, da den kan replikeres med hjælpeprogrammer. Se vores nye Jumbotron-eksempel for en demo.
Listegruppe
- Tilføjet ny
.list-group-numbered
modifikator til listegrupper.
Navs og faner
- Tilføjet nye
null
variabler forfont-size
,font-weight
,color
, og:hover
color
til.nav-link
klassen.
Navbars
- Går i stykkerNavbars kræver nu en beholder indeni (for drastisk at forenkle krav til mellemrum og påkrævet CSS).
- Går i stykkerKlassen
.active
kan ikke længere anvendes på.nav-item
s, den skal anvendes direkte på.nav-link
s.
Offcanvas
- Tilføjet den nye offcanvas-komponent .
Sideinddeling
-
Sideinddelingslinks kan nu tilpasses
margin-left
, som er dynamisk afrundet i alle hjørner, når de er adskilt fra hinanden. -
Tilføjet
transition
s til pagineringslinks.
Popovers
-
Går i stykkerOmdøbt
.arrow
til.popover-arrow
i vores standard popover-skabelon. -
Omdøbt
whiteList
mulighed tilallowList
.
Spinnere
-
Spinnere ærer nu
prefers-reduced-motion: reduce
ved at bremse animationerne. Se #31882 . -
Forbedret spinner vertikal justering.
Toasts
-
Toasts kan nu placeres i a
.toast-container
ved hjælp af positioneringsværktøjer . -
Ændret standard toastvarighed til 5 sekunder.
-
Fjernet
overflow: hidden
fra toasts og erstattet med ordentligeborder-radius
s medcalc()
funktioner.
Værktøjstip
-
Går i stykkerOmdøbt
.arrow
til.tooltip-arrow
i vores standard værktøjstip-skabelon. -
Går i stykkerStandardværdien for
fallbackPlacements
ændres til['top', 'right', 'bottom', 'left']
for bedre placering af popperelementer. -
Går i stykkerOmdøbt
whiteList
mulighed tilallowList
.
Hjælpeprogrammer
-
Går i stykkerOmdøbt flere værktøjer til at bruge logiske egenskabsnavne i stedet for retningsbestemte navne med tilføjelse af RTL-understøttelse:
- Omdøbt
.left-*
og.right-*
til.start-*
og.end-*
. - Omdøbt
.float-left
og.float-right
til.float-start
og.float-end
. - Omdøbt
.border-left
og.border-right
til.border-start
og.border-end
. - Omdøbt
.rounded-left
og.rounded-right
til.rounded-start
og.rounded-end
. - Omdøbt
.ml-*
og.mr-*
til.ms-*
og.me-*
. - Omdøbt
.pl-*
og.pr-*
til.ps-*
og.pe-*
. - Omdøbt
.text-left
og.text-right
til.text-start
og.text-end
.
- Omdøbt
-
Går i stykkerDeaktiveret negative marginer som standard.
-
Tilføjet ny
.bg-body
klasse for hurtigt at indstille<body>
's-baggrunden til yderligere elementer. -
Tilføjet nye positionsværktøjer til
top
,right
,bottom
, ogleft
. Værdier inkluderer0
,50%
, og100%
for hver ejendom. -
Tilføjet nye
.translate-middle-x
og.translate-middle-y
hjælpeprogrammer til vandret eller lodret centrering af absolut/fast placerede elementer. -
Tilføjet nye
border-width
hjælpeprogrammer . -
Går i stykkerOmdøbt
.text-monospace
til.font-monospace
. -
Går i stykkerFjernet
.text-hide
, da det er en forældet metode til at skjule tekst, som ikke bør bruges længere. -
Tilføjede
.fs-*
hjælpeprogrammer tilfont-size
hjælpeprogrammer (med RFS aktiveret). Disse bruger samme skala som HTMLs standardoverskrifter (1-6, store til små), og kan ændres via Sass-kort. -
Går i stykkerOmdøbt
.font-weight-*
hjælpeprogrammer.fw-*
for korthed og konsistens. -
Går i stykkerOmdøbt
.font-style-*
hjælpeprogrammer.fst-*
for korthed og konsistens. -
Tilføjet
.d-grid
til visningsværktøjer og nyegap
hjælpeprogrammer (.gap
) til CSS Grid- og flexbox-layouts. -
Går i stykkerFjernede
.rounded-sm
ogrounded-lg
, og introducerede en ny skala af klasser,.rounded-0
til.rounded-3
. Se #31687 . -
Tilføjet nye
line-height
hjælpeprogrammer:.lh-1
,.lh-sm
,.lh-base
og.lh-lg
. Se her . -
Flyttede
.d-none
værktøjet i vores CSS for at give det mere vægt i forhold til andre skærmværktøjer. -
Udvidet
.visually-hidden-focusable
hjælperen til også at arbejde på containere ved hjælp af:focus-within
.
Hjælpere
-
Går i stykker Responsive embed-hjælpere er blevet omdøbt til ratio-hjælpere med nye klassenavne og forbedret adfærd samt en nyttig CSS-variabel.
- Klasser er blevet omdøbt til at skifte
by
tilx
i billedformatet. For eksempel.ratio-16by9
er nu.ratio-16x9
. - Vi har droppet
.embed-responsive-item
og elementgruppevælgeren til fordel for en enklere.ratio > *
vælger. Der kræves ikke mere klasse, og ratio-hjælperen fungerer nu med ethvert HTML-element. - Sass -
$embed-responsive-aspect-ratios
kortet er blevet omdøbt til,$aspect-ratios
og dets værdier er blevet forenklet til at inkludere klassenavnet og procentdelen somkey: value
parret. - CSS-variabler genereres nu og inkluderes for hver værdi i Sass-kortet. Rediger
--bs-aspect-ratio
variablen på for.ratio
at oprette et tilpasset billedformat .
- Klasser er blevet omdøbt til at skifte
-
Går i stykker "Skærmlæser" klasser er nu "visuelt skjulte" klasser .
- Ændrede Sass-filen fra
scss/helpers/_screenreaders.scss
tilscss/helpers/_visually-hidden.scss
- Omdøbt
.sr-only
og.sr-only-focusable
til.visually-hidden
og.visually-hidden-focusable
- Omdøbt
sr-only()
ogsr-only-focusable()
mixins tilvisually-hidden()
ogvisually-hidden-focusable()
.
- Ændrede Sass-filen fra
-
bootstrap-utilities.css
omfatter nu også vores hjælpere. Hjælpere behøver ikke længere at blive importeret i brugerdefinerede builds.
JavaScript
-
Droppede jQuery-afhængighed og omskrev plugins til at være i almindelig JavaScript.
-
Går i stykkerDataattributter for alle JavaScript-plugins er nu navngivet for at hjælpe med at skelne Bootstrap-funktionalitet fra tredjeparter og din egen kode. For eksempel bruger vi
data-bs-toggle
i stedet fordata-toggle
. -
Alle plugins kan nu acceptere en CSS-vælger som det første argument. Du kan enten sende et DOM-element eller en hvilken som helst gyldig CSS-vælger for at oprette en ny forekomst af pluginnet:
const modal = new bootstrap.Modal('#myModal') const dropdown = new bootstrap.Dropdown('[data-bs-toggle="dropdown"]')
-
popperConfig
kan videregives som en funktion, der accepterer Bootstraps standard Popper-konfiguration som et argument, så du kan flette denne standardkonfiguration på din måde. Gælder for dropdowns, popovers og værktøjstip. -
Standardværdien for
fallbackPlacements
ændres til['top', 'right', 'bottom', 'left']
for bedre placering af Popper-elementer. Gælder for dropdowns, popovers og værktøjstip. -
Fjernet understregning fra offentlige statiske metoder som
_getInstance()
→getInstance()
.