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.

På denne side

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-radiusvæ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 * 2af 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.scssfor 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-colorsikke 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-weighthjælpeprogrammer til .fw-semiboldhalvfede skrifttyper.
Udvidede border-radiushjælpeprogrammer til at omfatte to nye størrelser .rounded-4og .rounded-5, for flere muligheder.

Yderligere ændringer

Introduceret ny $enable-container-classesmulighed. — Når nu tilvælges det eksperimentelle CSS Grid-layout, .container-*vil klasser stadig blive kompileret, medmindre denne mulighed er indstillet til false. Containere beholder nu også deres rendeværdier.
Offcanvas-komponenten har nu responsive variationer . Den originale .offcanvasklasse forbliver uændret - den skjuler indhold på tværs af alle visningsporte. For at gøre den responsiv skal du ændre den .offcanvasklasse 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, udfaseroffsetkonfiguration 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 en background-colormed kontrasterende forgrund color.
Tilføjet .form-check-reversemodifikator 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-columnsklasse.

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: falseog 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-horizontaltil din .collapsefor at skjule i widthstedet for height. Undgå ommaling af browseren ved at indstille a min-heighteller height.
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 .vrhjælpere .
Tilføjet nye globale :rootCSS-variabler. — Tilføjet flere nye CSS-variabler til :rootniveauet 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 og rgba()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-marginer blevet forældet og indstillet til nulli processen.

Vil du have mere information? Læs v5.1.0 blogindlægget.

Hej med dig! Ændringer til vores første større udgivelse af Bootstrap 5, v5.0.0, er dokumenteret nedenfor. De afspejler ikke de yderligere ændringer, der er vist ovenfor.

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 til color-contrast(), da den ikke længere er relateret til YIQ-farverum. Se #30168.
- $yiq-contrasted-thresholder omdøbt til $min-contrast-ratio.
- $yiq-text-darkog $yiq-text-lighter henholdsvis omdøbt til $color-contrast-darkog $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. i media-breakpoint-down(lg)stedet for media-breakpoint-down(md)målvisningsporte mindre end lg).
- På samme måde bruger den anden parameter i media-breakpoint-between()også selve brudpunktet i stedet for det næste brudpunkt (f.eks. i media-between(sm, lg)stedet for media-breakpoint-between(sm, md)målvisningsporte mellem smog lg).
Går i stykkerFjernede udskriftsstile og $enable-print-stylesvariabel. Trykvisningsklasser findes stadig. Se #28339 .
Går i stykkerDroppet color(), theme-color(), og gray()fungerer til fordel for variabler. Se #29083 .
Går i stykkerOmdøbt theme-color-level()funktion til color-level()og accepterer nu enhver farve, du ønsker i stedet for kun $theme-colorfarver. Se #29083 Pas på: color-level() blev senere droppet ind v5.0.0-alpha3.
Går i stykkerOmdøbt $enable-prefers-reduced-motion-media-queryog $enable-pointer-cursor-for-buttonstil $enable-reduced-motionog $enable-button-pointersfor kortheds skyld.
Går i stykkerFjernede bg-gradient-variant()blandingen. Brug .bg-gradientklassen 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 til shift-color()for at undgå kollision med Sass egen farveskaleringsfunktion.
box-shadowmixins tillader nu nullværdier og drop nonefra flere argumenter. Se #30394 .
Blandingen border-radius()har nu en standardværdi.

Farvesystem

Farvesystemet som fungerede med color-level()og $theme-color-intervalblev fjernet til fordel for et nyt farvesystem. Alle lighten()og darken()funktioner i vores kodebase erstattes af tint-color()og shade-color(). Disse funktioner vil blande farven med enten hvid eller sort i stedet for at ændre dens lyshed med en fast mængde. Den shift-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-900til $black.
For at understøtte vores farvesystem har vi tilføjet nye brugerdefinerede tint-color()og shade-color()funktioner til at blande vores farver passende.

Gitteropdateringer

Nyt brudpunkt! Tilføjet nyt xxlbreakpoint for 1400pxog op. Ingen ændringer til alle andre brudpunkter.
Forbedrede tagrender. Tagrender er nu sat i rems, og er smallere end v4 ( 1.5rem, eller ca 24px, ned fra 30px). 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-gutterstil .g-0for at matche nye tagrender.
Kolonner er ikke længere position: relativeanvendt, så du skal muligvis tilføje .position-relativenogle elementer for at gendanne denne adfærd.
Går i stykkerDroppede flere .order-*klasser, der ofte gik ubrugte. Vi leverer nu kun .order-1til .order-5out of the box.
Går i stykkerDroppede .mediakomponenten, 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.cssgælder nu kun box-sizing: border-boxfor kolonnen i stedet for at nulstille den globale boksstørrelse. På denne måde kan vores gitterstile bruges flere steder uden forstyrrelser.
$enable-grid-classesdeaktiverer ikke længere genereringen af containerklasser længere. Se #29146.
Opdaterede make-colmixin til standard til lige store kolonner uden en specificeret størrelse.

Indhold, genstart osv

RFS er nu aktiveret som standard. Overskrifter ved hjælp affont-size()mixin vil automatisk justere deresfont-sizetil 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-sizesSass-kort. Fjernede også de individuelle $display-*-weightvariable for en enkelt $display-font-weightog justeret font-sizes.
Tilføjet to nye .display-*overskriftsstørrelser, .display-5og .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-lightog .thead-darkudgår til fordel for .table-*variantklasserne, som kan bruges til alle tabelelementer ( thead, tbody, tfoot, tr, thog td).
Går i stykkerMixin table-row-variant()omdøbes til table-variant()og accepterer kun 2 parametre: $color(farvenavn) og $value(farvekode). Kantfarven og accentfarverne beregnes automatisk baseret på tabelfaktorvariablerne.
Opdel tabelcelleudfyldningsvariabler i -yog -x.
Går i stykkerFaldt .pre-scrollableklasse. 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-justifyklasse. Se #29793
Går i stykker <hr>elementer bruges nu heighti stedet for borderat understøtte sizeattributten 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-lefttil <ul>og <ol>elementer fra browserstandard 40pxtil 2rem.
Tilføjet $enable-smooth-scroll, som gælder scroll-behavior: smoothglobalt – undtagen for brugere, der beder om reduceret bevægelse gennem prefers-reduced-motionmedieforespø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. startog endi stedet for leftog right.

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-checkboxer nu .form-check.
- .custom-control.custom-custom-radioer nu .form-check.
- .custom-control.custom-switcher nu .form-check.form-switch.
- .custom-selecter nu .form-select.
- .custom-fileog .form-fileer blevet erstattet af brugerdefinerede stilarter oven på .form-control.
- .custom-rangeer nu .form-range.
- Droppet indfødte .form-control-fileog .form-control-range.
Går i stykkerDroppet .input-group-appendog .input-group-prepend. Du kan nu blot tilføje knapper og .input-group-textsom 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-validationklasse 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-textindstiller ikke længere display, 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 for min-heightat forbedre tilpasning og kompatibilitet med andre komponenter.
Valideringsikoner anvendes ikke længere på <select>s med multiple.
Omarrangerede Sass-kildefiler under scss/forms/, inklusive inputgruppetypografier.

Komponenter

Samlede paddingværdier for advarsler, brødkrummer, kort, rullemenuer, listegrupper, modaler, popovers og værktøjstip skal være baseret på vores $spacervariabel. 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 bruger currentColor.

Badges

Går i stykkerDroppede alle .badge-*farveklasser for baggrundsværktøjer (f.eks. brug .bg-primaryi stedet for .badge-primary).
Går i stykkerDroppet .badge-pill— brug .rounded-pillværktøjet i stedet.
Går i stykkerFjernede svæve- og fokusstile for <a>og <button>elementer.
Øget standardpolstring for badges fra .25em/ .5emtil .35em/ .65em.

Brødkrummer

Forenklet standardudseendet for brødkrummer ved at fjerne padding, background-color, og border-radius.
Tilføjet ny tilpasset CSS-egenskab --bs-breadcrumb-dividerfor 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-checktil<input>, og parre det med eventuelle.btnklasser på<label>. Se #30650 . Dokumenterne til dette er flyttet fra vores knapside til den nye formularsektion.
Går i stykker Droppet .btn-blockfor forsyningsselskaber. I stedet for at bruge .btn-blockpå .btn, skal du pakke dine knapper med .d-gridog 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()og button-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-decktil 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-columnstil fordel for murværk. Se #28922 .
Går i stykkerUdskiftede den .cardbaserede harmonika med en ny harmonika-komponent .

Karrusel

Tilføjet ny .carousel-darkvariant 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 .closetil .btn-closefor 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-whitevariant, der bruges filter: 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-darkvariant 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 flipmulighed for dropdown-plugin til fordel for native Popper-konfiguration. Du kan nu deaktivere vendeadfærden ved at sende et tomt array til fallbackPlacementsoption i flip - modifikator.
Rullemenuer kan nu klikkes med en ny autoClosemulighed 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-items 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-numberedmodifikator til listegrupper.

Navs og faner

Tilføjet nye nullvariabler for font-size, font-weight, color, og :hover colortil .nav-linkklassen.

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 .activekan ikke længere anvendes på .nav-items, den skal anvendes direkte på .nav-links.

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 transitions til pagineringslinks.

Popovers

Går i stykkerOmdøbt .arrowtil .popover-arrowi vores standard popover-skabelon.
Omdøbt whiteListmulighed til allowList.

Spinnere

Spinnere ærer nu prefers-reduced-motion: reduceved at bremse animationerne. Se #31882 .
Forbedret spinner vertikal justering.

Toasts

Toasts kan nu placeres i a .toast-containerved hjælp af positioneringsværktøjer .
Ændret standard toastvarighed til 5 sekunder.
Fjernet overflow: hiddenfra toasts og erstattet med ordentlige border-radiuss med calc()funktioner.

Værktøjstip

Går i stykkerOmdøbt .arrowtil .tooltip-arrowi 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 whiteListmulighed til allowList.

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-leftog .float-righttil .float-startog .float-end.
- Omdøbt .border-leftog .border-righttil .border-startog .border-end.
- Omdøbt .rounded-leftog .rounded-righttil .rounded-startog .rounded-end.
- Omdøbt .ml-*og .mr-*til .ms-*og .me-*.
- Omdøbt .pl-*og .pr-*til .ps-*og .pe-*.
- Omdøbt .text-leftog .text-righttil .text-startog .text-end.
Går i stykkerDeaktiveret negative marginer som standard.
Tilføjet ny .bg-bodyklasse for hurtigt at indstille <body>'s-baggrunden til yderligere elementer.
Tilføjet nye positionsværktøjer til top, right, bottom, og left. Værdier inkluderer 0, 50%, og 100%for hver ejendom.
Tilføjet nye .translate-middle-xog .translate-middle-yhjælpeprogrammer til vandret eller lodret centrering af absolut/fast placerede elementer.
Tilføjet nye border-widthhjælpeprogrammer .
Går i stykkerOmdøbt .text-monospacetil .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 til font-sizehjæ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-gridtil visningsværktøjer og nye gaphjælpeprogrammer ( .gap) til CSS Grid- og flexbox-layouts.
Går i stykkerFjernede .rounded-smog rounded-lg, og introducerede en ny skala af klasser, .rounded-0til .rounded-3. Se #31687 .
Tilføjet nye line-heighthjælpeprogrammer: .lh-1, .lh-sm, .lh-baseog .lh-lg. Se her .
Flyttede .d-noneværktøjet i vores CSS for at give det mere vægt i forhold til andre skærmværktøjer.
Udvidet .visually-hidden-focusablehjæ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 bytil xi billedformatet. For eksempel .ratio-16by9er nu .ratio-16x9.
- Vi har droppet .embed-responsive-itemog 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-ratioskortet er blevet omdøbt til, $aspect-ratiosog dets værdier er blevet forenklet til at inkludere klassenavnet og procentdelen som key: valueparret.
- CSS-variabler genereres nu og inkluderes for hver værdi i Sass-kortet. Rediger --bs-aspect-ratiovariablen på for .ratioat oprette et tilpasset billedformat .
Går i stykker "Skærmlæser" klasser er nu "visuelt skjulte" klasser .
- Ændrede Sass-filen fra scss/helpers/_screenreaders.scsstilscss/helpers/_visually-hidden.scss
- Omdøbt .sr-onlyog .sr-only-focusabletil .visually-hiddenog.visually-hidden-focusable
- Omdøbt sr-only()og sr-only-focusable()mixins til visually-hidden()og visually-hidden-focusable().
bootstrap-utilities.cssomfatter 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-togglei stedet for data-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"]')
```
popperConfigkan 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().