in English

Migrerer til v5

Spor og gjennomgå endringer i Bootstrap-kildefilene, dokumentasjonen og komponentene for å hjelpe deg med å migrere fra v4 til v5.

På denne siden

v5.2.0

Oppdatert design

Bootstrap v5.2.0 har en subtil designoppdatering for en håndfull komponenter og egenskaper på tvers av prosjektet, spesielt gjennom raffinerte border-radiusverdier på knapper og skjemakontroller . Dokumentasjonen vår har også blitt oppdatert med en ny hjemmeside, enklere dokumentoppsett som ikke lenger skjuler deler av sidefeltet, og mer fremtredende eksempler på Bootstrap-ikoner .

Flere CSS-variabler

Vi har oppdatert alle komponentene våre til å bruke CSS-variabler. Mens Sass fortsatt underbygger alt, har hver komponent blitt oppdatert for å inkludere CSS-variabler på komponentbaseklassene (f.eks. .btn), noe som muliggjør mer sanntidstilpasning av Bootstrap. I påfølgende utgivelser vil vi fortsette å utvide bruken av CSS-variabler til layout, skjemaer, hjelpere og verktøy. Les mer om CSS-variabler i hver komponent på deres respektive dokumentasjonssider.

Vår CSS-variabelbruk vil være noe ufullstendig frem til Bootstrap 6. Selv om vi gjerne vil implementere disse fullt ut over hele linja, risikerer de å forårsake ødeleggende endringer. Innstilling $alert-border-width: var(--bs-border-width)i kildekoden vår bryter for eksempel potensiell Sass i din egen kode hvis du gjorde det $alert-border-width * 2av en eller annen grunn.

Som sådan, der det er mulig, vil vi fortsette å presse mot flere CSS-variabler, men vær oppmerksom på at implementeringen vår kan være litt begrenset i v5.

Ny`_maps.scss`

Bootstrap v5.2.0 introduserte en ny Sass-fil med _maps.scss. Den trekker ut flere Sass-kart fra _variables.scssfor å fikse et problem der oppdateringer til et originalt kart ikke ble brukt på sekundære kart som utvider dem. For eksempel ble oppdateringer til $theme-colorsikke brukt på andre temakart som var avhengig av $theme-colors, noe som bryter viktige tilpasningsarbeidsflyter. Kort sagt, Sass har en begrensning der når en standard variabel eller kart er brukt , kan den ikke oppdateres. Det er en lignende mangel med CSS-variabler når de brukes til å komponere andre CSS-variabler.

Dette er grunnen til at variable tilpasninger i Bootstrap må komme etter @import "functions", men før @import "variables"og resten av importstabelen vår. Det samme gjelder Sass-kart – du må overstyre standardinnstillingene før de blir brukt. Følgende kart er flyttet til det nye _maps.scss:

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

Din egendefinerte Bootstrap CSS-bygg skal nå se omtrent slik ut med en separat kartimport.

  // 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 verktøy

Utvidede font-weightverktøy for .fw-semiboldhalvfet skrift.
Utvidede border-radiusverktøy til å inkludere to nye størrelser, .rounded-4og .rounded-5, for flere alternativer.

Ytterligere endringer

Introdusert nytt $enable-container-classesalternativ. — Nå når du velger den eksperimentelle CSS Grid-oppsettet, .container-*vil klasser fortsatt bli kompilert, med mindre dette alternativet er satt til false. Containere beholder nå også sine renneverdier.
Offcanvas-komponenten har nå responsive variasjoner . Den opprinnelige .offcanvasklassen forblir uendret – den skjuler innhold på tvers av alle visningsporter. For å gjøre den responsiv, endre den .offcanvasklassen til en hvilken som helst .offcanvas-{sm|md|lg|xl|xxl}klasse.
Tykkere borddelere er nå opt-in. — Vi har fjernet den tykkere og vanskeligere å overstyre grensen mellom tabellgrupper og flyttet den til en valgfri klasse du kan bruke, .table-group-divider. Se tabelldokumentene for et eksempel.
Scrollspy har blitt omskrevet for å bruke Intersection Observer API , noe som betyr at du ikke lenger trenger relative overordnede innpakninger, avvikleroffsetkonfigurasjon og mer. Se etter at Scrollspy-implementeringene dine er mer nøyaktige og konsistente i nav-uthevingen.
Popovers og verktøytips bruker nå CSS-variabler. Noen CSS-variabler har blitt oppdatert fra sine Sass-motparter for å redusere antallet variabler. Som et resultat har tre variabler blitt avviklet i denne utgivelsen: $popover-arrow-color, $popover-arrow-outer-color, og $tooltip-arrow-color.
Lagt til nye .text-bg-{color}hjelpere. I stedet for å sette individuelle .text-*og .bg-*verktøy, kan du nå bruke hjelperne til.text-bg-* å sette en background-colormed kontrasterende forgrunn color.
Lagt .form-check-reversetil modifikator for å snu rekkefølgen på etiketter og tilhørende avmerkingsbokser/radioer.
Lagt til støtte for stripede kolonner til tabeller via den nye .table-striped-columnsklassen.

For en fullstendig liste over endringer, se v5.2.0-prosjektet på GitHub .

v5.1.0

Lagt til eksperimentell støtte for CSS Grid-layout . — Dette er et arbeid som pågår, og er ennå ikke klart for produksjonsbruk, men du kan melde deg på den nye funksjonen via Sass. For å aktivere det, deaktiver standardrutenettet ved å angi $enable-grid-classes: falseog aktivere CSS-nettet ved å sette $enable-cssgrid: true.
Oppdaterte navbarer for å støtte offcanvas. — Legg til offcanvas-skuffer i hvilken som helst navbar med de responsive .navbar-expand-*klassene og noe offcanvas-oppmerking.
Lagt til ny plassholderkomponent . — Vår nyeste komponent, en måte å gi midlertidige blokkeringer i stedet for ekte innhold for å hjelpe med å indikere at noe fortsatt lastes inn på nettstedet eller appen din.
Collapse plugin støtter nå horisontal kollapsing . — Legg .collapse-horizontaltil .collapsefor å skjule i widthstedet for height. Unngå ommaling av nettleseren ved å angi a min-heighteller height.
Lagt til nye stabel- og vertikale regelhjelpere. — Bruk raskt flere flexbox-egenskaper for raskt å lage tilpassede oppsett med stabler . Velg mellom vannrette ( .hstack) og vertikale ( .vstack) stabler. Legg til vertikale skillelinjer som ligner på <hr>elementer med de nye .vrhjelperne .
Lagt til nye globale :rootCSS-variabler. — Lagt til flere nye CSS-variabler på :rootnivået for å kontrollere <body>stiler. Flere er under arbeid, inkludert på tvers av våre verktøy og komponenter, men foreløpig les opp CSS-variabler i Tilpass-delen .
Overhalt farge- og bakgrunnsverktøy for å bruke CSS-variabler, og lagt til nye tekstopasitets- og bakgrunnsopasitetsverktøy . — .text-* og .bg-*verktøy er nå bygget med CSS-variabler og rgba()fargeverdier, slik at du enkelt kan tilpasse ethvert verktøy med nye opasitetsverktøy.
Lagt til nye utdragseksempler basert for å vise hvordan du kan tilpasse komponentene våre. — Trekk klar til bruk tilpassede komponenter og andre vanlige designmønstre med våre nye Snippets-eksempler . Inkluderer bunntekster , rullegardiner , listegrupper og modaler .
Fjernet ubrukte posisjoneringsstiler fra popovers og verktøytips , da disse kun håndteres av Popper. $tooltip-marginhar blitt avviklet og satt til nulli prosessen.

Ønsker du mer informasjon? Les v5.1.0 blogginnlegget.

Hei der! Endringer i vår første store utgivelse av Bootstrap 5, v5.0.0, er dokumentert nedenfor. De gjenspeiler ikke tilleggsendringene vist ovenfor.

Avhengigheter

Har droppet jQuery.
Oppgradert fra Popper v1.x til Popper v2.x.
Erstattet Libsass med Dart Sass da Sass-kompilatoren vår gitt Libsass ble avskrevet.
Migrerte fra Jekyll til Hugo for å bygge dokumentasjonen vår

Nettleserstøtte

Har droppet Internet Explorer 10 og 11
Droppet Microsoft Edge < 16 (Legacy Edge)
Droppet Firefox < 60
Droppet Safari < 12
Droppet iOS Safari < 12
Droppet Chrome < 60

Dokumentasjonsendringer

Redesignet hjemmeside, dokumentlayout og bunntekst.
Lagt til ny pakkeguide .
Lagt til ny Tilpass-seksjon , og erstattet v4s temaside , med nye detaljer om Sass, globale konfigurasjonsalternativer, fargeskjemaer, CSS-variabler og mer.
Omorganiserte all skjemadokumentasjon til en ny Skjemaer-seksjon , og delte innholdet i mer fokuserte sider.
Tilsvarende oppdaterte Layout-delen for å gjøre rutenettinnhold tydeligere.
Omdøpt "Navs"-komponentsiden til "Navs & Tabs".
Omdøpt «Sjekker»-siden til «Sjekker og radioer».
Redesignet navbaren og lagt til en ny undernavigering for å gjøre det enklere å komme seg rundt på nettstedene og dokumentversjonene våre.
Lagt til ny hurtigtast for søkefeltet: Ctrl + /.

Sass

Vi har droppet standard Sass-kartsammenslåinger for å gjøre det enklere å fjerne overflødige verdier. Husk at du nå må definere alle verdier i Sass-kartene som $theme-colors. Sjekk ut hvordan du skal håndtere Sass-kart .
BreakingOmdøpt color-yiq()funksjon og relaterte variabler til color-contrast()siden den ikke lenger er relatert til YIQ-fargerom. Se #30168.
- $yiq-contrasted-thresholder omdøpt til $min-contrast-ratio.
- $yiq-text-darkog $yiq-text-lighter henholdsvis omdøpt til $color-contrast-darkog $color-contrast-light.
BreakingParametere for blanding av mediaspørringer har endret seg for en mer logisk tilnærming.
- media-breakpoint-down()bruker selve bruddpunktet i stedet for det neste bruddpunktet (f.eks. i media-breakpoint-down(lg)stedet for media-breakpoint-down(md)målvisningsporter som er mindre enn lg).
- På samme måte bruker den andre parameteren media-breakpoint-between()også selve bruddpunktet i stedet for det neste bruddpunktet (f.eks. i media-between(sm, lg)stedet for media-breakpoint-between(sm, md)målvisningsporter mellom smog lg).
BreakingFjernet utskriftsstiler og $enable-print-stylesvariabel. Utskriftsvisningsklasser finnes fortsatt. Se #28339 .
BreakingDroppet color(), theme-color(), og gray()fungerer til fordel for variabler. Se #29083 .
BreakingOmdøpt theme-color-level()funksjonen til color-level()og godtar nå hvilken som helst farge du vil ha i stedet for bare $theme-colorfarger. Se #29083 Se opp: color-level() ble senere droppet inn v5.0.0-alpha3.
BreakingOmdøpt $enable-prefers-reduced-motion-media-queryog $enable-pointer-cursor-for-buttonstil $enable-reduced-motionog $enable-button-pointersfor korthet.
BreakingFjernet bg-gradient-variant()blandingen. Bruk .bg-gradientklassen til å legge til gradienter til elementer i stedet for de genererte .bg-gradient-*klassene.
Breaking Fjernet tidligere avviklede blandinger:
- hover, hover-focus, plain-hover-focus, oghover-focus-active
- float()
- form-control-mixin()
- nav-divider()
- retina-img()
- text-hide()(har også droppet den tilknyttede verktøyklassen, .text-hide)
- visibility()
- form-control-focus()
BreakingOmdøpt scale-color()funksjon til shift-color()for å unngå kollisjon med Sass egen fargeskaleringsfunksjon.
box-shadowmixins tillater nå nullverdier og fall nonefra flere argumenter. Se #30394 .
Blandingen border-radius()har nå en standardverdi.

Fargesystem

Fargesystemet som fungerte med color-level()og $theme-color-intervalble fjernet til fordel for nytt fargesystem. Alle lighten()og darken()funksjoner i kodebasen vår erstattes av tint-color()og shade-color(). Disse funksjonene vil blande fargen med enten hvit eller svart i stedet for å endre lysheten med en fast mengde. Den shift-color()vil enten tone eller skygge en farge avhengig av om vektparameteren er positiv eller negativ. Se #30622 for flere detaljer.
Lagt til nye nyanser og nyanser for hver farge, og gir ni separate farger for hver grunnfarge, som nye Sass-variabler.
Forbedret fargekontrast. Bumpet fargekontrastforhold fra 3:1 til 4,5:1 og oppdaterte blå, grønn, cyan og rosa farger for å sikre WCAG 2.1 AA kontrast. Endret også fargekontrastfargen vår fra $gray-900til $black.
For å støtte fargesystemet vårt har vi lagt til nye tilpassede funksjoner tint-color()for shade-color()å blande fargene våre på riktig måte.

Rutenettoppdateringer

Nytt bruddpunkt! Lagt til nytt xxlbruddpunkt for 1400pxog opp. Ingen endringer i alle andre bruddpunkter.
Forbedrede takrenner. Takrenner er nå satt i rems, og er smalere enn v4 ( 1.5rem, eller ca 24px, ned fra 30px). Dette justerer nettsystemets takrenner med avstandsverktøyene våre.
- Lagt til ny renneklasse ( .g-*, .gx-*, og .gy-*) for å kontrollere horisontale/vertikale takrenner, horisontale takrenner og vertikale takrenner.
- BreakingOmdøpt .no-gutterstil .g-0for å matche nye takrenneverktøy.
Kolonner er ikke lenger position: relativebrukt, så det kan hende du må legge .position-relativetil enkelte elementer for å gjenopprette denne virkemåten.
BreakingDroppet flere .order-*klasser som ofte gikk ubrukt. Vi tilbyr nå kun .order-1til .order-5ut av esken.
BreakingDroppet .mediakomponenten da den lett kan replikeres med verktøy. Se #28265 og flex-verktøysiden for et eksempel .
Breaking bootstrap-grid.cssgjelder nå kun box-sizing: border-boxkolonnen i stedet for å tilbakestille den globale boksstørrelsen. På denne måten kan rutenettstilene våre brukes flere steder uten forstyrrelser.
$enable-grid-classesdeaktiverer ikke lenger generering av containerklasser. Se #29146.
Oppdaterte make-colmixin til standard til like kolonner uten en spesifisert størrelse.

Innhold, omstart osv

RFS er nå aktivert som standard. Overskrifter som brukerfont-size()mixin vil automatisk justere deresfont-sizetil å skalere med viewporten. Denne funksjonen var tidligere opt-in med v4.
BreakingOverhalt skjermtypografien vår for å erstatte $display-*variablene våre og med et $display-font-sizesSass-kart. Fjernet også de individuelle $display-*-weightvariablene for en enkelt $display-font-weightog justert font-sizes.
Lagt til to nye .display-*overskriftsstørrelser, .display-5og .display-6.
Lenker er understreket som standard (ikke bare ved å holde musepekeren), med mindre de er en del av spesifikke komponenter.
Redesignet tabeller for å oppdatere stilene deres og gjenoppbygge dem med CSS-variabler for mer kontroll over stilen.
BreakingNestede tabeller arver ikke stiler lenger.
Breaking .thead-lightog .thead-darkblir droppet til fordel for .table-*variantklassene som kan brukes for alle tabellelementer ( thead, tbody, tfoot, tr, thog td).
BreakingMixin table-row-variant()er omdøpt til table-variant()og aksepterer kun 2 parametere: $color(fargenavn) og $value(fargekode). Kantfargen og aksentfargene beregnes automatisk basert på tabellfaktorvariablene.
Del tabellcelleutfyllingsvariabler i -yog -x.
BreakingDroppet .pre-scrollableklasse. Se #29135
Breaking .text-*verktøy legger ikke til hover- og fokustilstander til lenker lenger. .link-*hjelperklasser kan brukes i stedet. Se #29267
BreakingDroppet .text-justifyklasse. Se #29793
Breaking <hr>elementer brukes nå heighti stedet for borderå støtte sizeattributtet bedre. Dette muliggjør også bruk av polstringsverktøy for å lage tykkere skillevegger (f.eks. <hr class="py-1">).
Tilbakestill standard horisontalt padding-leftpå <ul>og <ol>elementer fra nettleserstandard 40pxtil 2rem.
Lagt til $enable-smooth-scroll, som gjelder scroll-behavior: smoothglobalt – bortsett fra brukere som ber om redusert bevegelse gjennom prefers-reduced-motionmediesøk. Se #31877

RTL

Horisontale retningsspesifikke variabler, verktøy og mixins har alle fått nytt navn for å bruke logiske egenskaper som de som finnes i flexbox-oppsett – f.eks startog endi stedet for leftog right.

Skjemaer

Lagt til nye flytende skjemaer! Vi har promotert eksemplet med flytende etiketter til fullt støttede skjemakomponenter. Se den nye siden for flytende etiketter.
Breaking Konsoliderte integrerte og tilpassede skjemaelementer. Avmerkingsbokser, radioer, utvalg og andre innganger som hadde native og tilpassede klasser i v4, er blitt konsolidert. Nå er nesten alle skjemaelementene våre helt tilpasset, de fleste uten behov for tilpasset HTML.
- .custom-control.custom-checkboxer nå .form-check.
- .custom-control.custom-custom-radioer nå .form-check.
- .custom-control.custom-switcher nå .form-check.form-switch.
- .custom-selecter nå .form-select.
- .custom-fileog .form-filehar blitt erstattet av egendefinerte stiler på toppen av .form-control.
- .custom-rangeer nå .form-range.
- Droppet innfødte .form-control-fileog .form-control-range.
BreakingDroppet .input-group-appendog .input-group-prepend. Du kan nå bare legge til knapper og .input-group-textsom direkte underordnede inndatagrupper.
Den langvarige Missing border-radius på inngangsgruppe med valideringsfeedback er endelig fikset ved å legge til en ekstra .has-validationklasse til inngangsgrupper med validering.
Breaking Har droppet skjemaspesifikke layoutklasser for rutenettsystemet vårt. Bruk rutenettet og verktøyene våre i stedet for .form-group, .form-row, eller .form-inline.
BreakingSkjemaetiketter krever nå .form-label.
Breaking .form-textsetter ikke lenger display, slik at du kan lage innebygd eller blokkere hjelpetekst som du ønsker bare ved å endre HTML-elementet.
Skjemakontroller brukes ikke lenger fast heightnår det er mulig, i stedet utsettes for min-heightå forbedre tilpasning og kompatibilitet med andre komponenter.
Valideringsikoner brukes ikke lenger på <select>s med multiple.
Omorganiserte kilde Sass-filer under scss/forms/, inkludert inndatagruppestiler.

Komponenter

Samlede paddingverdier for varsler, brødsmuler, kort, rullegardiner, listegrupper, modaler, popovers og verktøytips som skal baseres på $spacervariabelen vår. Se #30564 .

Trekkspill

Lagt til ny trekkspillkomponent .

Varsler

Varsler har nå eksempler med ikoner .
Fjernet egendefinerte stiler for <hr>s i hvert varsel siden de allerede bruker currentColor.

Merker

BreakingHar droppet alle .badge-*fargeklasser for bakgrunnsverktøy (f.eks. bruk .bg-primaryi stedet for .badge-primary).
BreakingDroppet — bruk .badge-pillverktøyet .rounded-pilli stedet.
BreakingFjernet sveve- og fokusstiler for <a>og <button>elementer.
Økt standard polstring for merker fra .25em/ .5emtil .35em/ .65em.

Brødsmuler

Forenklet standardutseendet til brødsmuler ved å fjerne padding, background-color, og border-radius.
Lagt til ny egendefinert CSS-egenskap --bs-breadcrumb-dividerfor enkel tilpasning uten å måtte kompilere CSS på nytt.

Knapper

Breaking Veksleknapper , med avmerkingsbokser eller radioer, krever ikke lenger JavaScript og har ny markering. Vi krever ikke lenger et innpakningselement, legger.btn-checktil i<input>, og parer det med eventuelle.btnklasser på<label>. Se #30650 . Dokumentene for dette har flyttet fra vår knappeside til den nye skjemadelen.
Breaking Droppet .btn-blockfor verktøy. I stedet for å bruke .btn-blockpå .btn, pakk inn knappene dine med .d-gridet .gap-*verktøy for å plassere dem etter behov. Bytt til responsive klasser for enda mer kontroll over dem. Les dokumentene for noen eksempler.
Oppdaterte våre button-variant()og button-outline-variant()mixins for å støtte flere parametere.
Oppdaterte knapper for å sikre økt kontrast ved sveving og aktive tilstander.
Deaktiverte knapper har nå pointer-events: none;.

Kort

BreakingDroppet .card-decktil fordel for nettet vårt. Pakk inn kortene dine i kolonneklasser og legg til en overordnet .row-cols-*beholder for å gjenskape kortstokker (men med mer kontroll over responsiv justering).
BreakingDroppet .card-columnstil fordel for murverk. Se #28922 .
BreakingErstattet det .cardbaserte trekkspillet med en ny trekkspillkomponent .

Karusell

Lagt til ny .carousel-darkvariant for mørk tekst, kontroller og indikatorer (flott for lysere bakgrunner).
Erstattet chevron-ikoner for karusellkontroller med nye SVG-er fra Bootstrap Icons .

Lukk-knapp

BreakingOmdøpt .closetil .btn-closefor et mindre generisk navn.
Lukk-knapper bruker nå en background-image(innebygd SVG) i stedet for en ×i HTML-en, noe som gjør det enklere å tilpasse uten å måtte trykke på markeringen.
Lagt til ny .btn-close-whitevariant som bruker filter: invert(1)for å aktivere høyere kontrast for å fjerne ikoner mot mørkere bakgrunner.

Kollapse

Fjernet rulleforankring for trekkspill.

Rullegardiner

Lagt til ny .dropdown-menu-darkvariant og tilhørende variabler for mørke rullegardinmenyene på forespørsel.
Lagt til ny variabel for $dropdown-padding-x.
Mørkede rullegardinskilleren for forbedret kontrast.
BreakingAlle hendelsene for rullegardinmenyen utløses nå på rullegardinknappen og bobles deretter opp til det overordnede elementet.
Rullegardinmenyer har nå et data-bs-popper="static"attributt satt når plasseringen av rullegardinmenyen er statisk, eller rullegardinlisten er i navigasjonslinjen. Dette er lagt til av JavaScript og hjelper oss å bruke tilpassede posisjonsstiler uten å forstyrre Poppers posisjonering.
BreakingDroppet flipalternativ for dropdown-plugin til fordel for native Popper-konfigurasjon. Du kan nå deaktivere vendingsoppførselen ved å sende en tom matrise for fallbackPlacementsalternativet i flip -modifikator.
Rullegardinmenyer kan nå være klikkbare med et nytt autoClosealternativ for å håndtere automatisk lukking . Du kan bruke dette alternativet til å godta klikket i eller utenfor rullegardinmenyen for å gjøre det interaktivt.
Dropdown-menyer støtter nå .dropdown-items pakket inn i <li>s.

Jumbotron

BreakingDroppet jumbotron-komponenten da den kan replikeres med verktøy. Se vårt nye Jumbotron-eksempel for en demo.

Listegruppe

Lagt til ny .list-group-numberedmodifikator til listegrupper.

Nav og faner

Lagt til nye nullvariabler for font-size, font-weight, color, og :hover colortil .nav-linkklassen.

Navbarer

BreakingNavbars krever nå en beholder innenfor (for å drastisk forenkle avstandskrav og CSS nødvendig).
BreakingKlassen .activekan ikke lenger brukes på .nav-items, den må brukes direkte på .nav-links.

Offcanvas

La til den nye offcanvas-komponenten .

Paginering

Pagineringslenker kan nå tilpasses margin-leftsom er dynamisk avrundet i alle hjørner når de er adskilt fra hverandre.
Lagt transitiontil s til pagineringslenker.

Popovers

BreakingOmdøpt .arrowtil .popover-arrowi vår standard popover-mal.
Omdøpt whiteListalternativ til allowList.

Spinnere

Spinnere hedrer nå prefers-reduced-motion: reduceved å bremse animasjoner. Se #31882 .
Forbedret vertikal justering av spinneren.

Skåler

Toasts kan nå plasseres i en .toast-containerved hjelp av posisjoneringsverktøy .
Endret standard toast-varighet til 5 sekunder.
Fjernet overflow: hiddenfra toasts og erstattet med skikkelige border-radiuss med calc()funksjoner.

Verktøytips

BreakingOmdøpt .arrowtil .tooltip-arrowi vår standard verktøytipsmal.
BreakingStandardverdien for fallbackPlacementser endret til ['top', 'right', 'bottom', 'left']for bedre plassering av popper-elementer.
BreakingOmdøpt whiteListalternativ til allowList.

Verktøy

BreakingOmdøpt flere verktøy for å bruke logiske egenskapsnavn i stedet for retningsnavn med tillegg av RTL-støtte:
- Omdøpt .left-*og .right-*til .start-*og .end-*.
- Omdøpt .float-leftog .float-righttil .float-startog .float-end.
- Omdøpt .border-leftog .border-righttil .border-startog .border-end.
- Omdøpt .rounded-leftog .rounded-righttil .rounded-startog .rounded-end.
- Omdøpt .ml-*og .mr-*til .ms-*og .me-*.
- Omdøpt .pl-*og .pr-*til .ps-*og .pe-*.
- Omdøpt .text-leftog .text-righttil .text-startog .text-end.
BreakingDeaktivert negative marginer som standard.
Lagt til ny .bg-bodyklasse for raskt å sette <body>s-bakgrunnen til flere elementer.
Lagt til nye posisjonsverktøy for top, right, bottom, og left. Verdiene inkluderer 0, 50%, og 100%for hver eiendom.
Lagt til nye .translate-middle-xog .translate-middle-yverktøy for horisontalt eller vertikalt sentrering av absolutt/fast posisjonerte elementer.
Lagt til nye border-widthverktøy .
BreakingOmdøpt .text-monospacetil .font-monospace.
BreakingFjernet .text-hideda det er en foreldet metode for å skjule tekst som ikke skal brukes lenger.
Lagt til .fs-*verktøy for font-sizeverktøy (med RFS aktivert). Disse bruker samme skala som HTMLs standardoverskrifter (1-6, store til små), og kan endres via Sass-kart.
BreakingOmdøpt .font-weight-*verktøy .fw-*for korthet og konsistens.
BreakingOmdøpt .font-style-*verktøy .fst-*for korthet og konsistens.
Lagt .d-gridtil visningsverktøy og nye gapverktøy ( .gap) for CSS Grid og flexbox-oppsett.
BreakingFjernet .rounded-smog rounded-lg, og introduserte en ny skala av klasser, .rounded-0til .rounded-3. Se #31687 .
Lagt til nye line-heightverktøy: .lh-1, .lh-sm, .lh-baseog .lh-lg. Se her .
Flyttet .d-noneverktøyet i CSS for å gi det mer vekt over andre skjermverktøy.
Utvidet .visually-hidden-focusablehjelperen til også å fungere på containere, ved hjelp av :focus-within.

Hjelpere

Breaking Responsive embed-hjelpere har blitt omdøpt til ratio-hjelpere med nye klassenavn og forbedret atferd, samt en nyttig CSS-variabel.
- Klasser har fått nytt navn for å endre bytil xi sideforhold. For eksempel .ratio-16by9er nå .ratio-16x9.
- Vi har droppet .embed-responsive-itemog elementgruppevelgeren til fordel for en enklere .ratio > *velger. Ingen mer klasse er nødvendig, og ratio-hjelperen fungerer nå med alle HTML-elementer.
- Sass $embed-responsive-aspect-ratios-kartet har blitt omdøpt til $aspect-ratiosog verdiene er forenklet til å inkludere klassenavnet og prosentandelen som key: valueparet.
- CSS-variabler blir nå generert og inkludert for hver verdi i Sass-kartet. Endre --bs-aspect-ratiovariabelen på for .ratioå lage et tilpasset sideforhold .
Breaking "Skjermleser"-klasser er nå "visuelt skjulte" klasser .
- Endret Sass-filen fra scss/helpers/_screenreaders.scsstilscss/helpers/_visually-hidden.scss
- Omdøpt .sr-onlyog .sr-only-focusabletil .visually-hiddenog.visually-hidden-focusable
- Omdøpt sr-only()og sr-only-focusable()blandes til visually-hidden()og visually-hidden-focusable().
bootstrap-utilities.cssinkluderer nå også våre hjelpere. Hjelpere trenger ikke lenger importeres i egendefinerte bygg.

JavaScript

Droppet jQuery-avhengighet og omskrev plugins til å være i vanlig JavaScript.
BreakingDataattributter for alle JavaScript-plugins er nå navngitt for å hjelpe å skille Bootstrap-funksjonalitet fra tredjeparter og din egen kode. For eksempel bruker vi data-bs-togglei stedet for data-toggle.
Alle plugins kan nå godta en CSS-velger som det første argumentet. Du kan enten sende et DOM-element eller en hvilken som helst gyldig CSS-velger for å opprette en ny forekomst av plugin:
```
const modal = new bootstrap.Modal('#myModal')
const dropdown = new bootstrap.Dropdown('[data-bs-toggle="dropdown"]')
```
popperConfigkan sendes som en funksjon som aksepterer Bootstraps standard Popper-konfigurasjon som et argument, slik at du kan slå sammen denne standardkonfigurasjonen på din måte. Gjelder rullegardinmenyene, popovers og verktøytips.
Standardverdien for fallbackPlacementsendres til ['top', 'right', 'bottom', 'left']for bedre plassering av Popper-elementer. Gjelder rullegardinmenyene, popovers og verktøytips.
Fjernet understrek fra offentlige statiske metoder som _getInstance()→ getInstance().