in English

Migrerar till v5

Spåra och granska ändringar av Bootstrap-källfilerna, dokumentationen och komponenterna för att hjälpa dig migrera från v4 till v5.

På den här sidan

v5.2.0

Uppfräschad design

Bootstrap v5.2.0 har en subtil designuppdatering för en handfull komponenter och egenskaper i hela projektet, framför allt genom förfinade border-radiusvärden på knappar och formulärkontroller . Vår dokumentation har också uppdaterats med en ny hemsida, enklare dokumentlayout som inte längre kollapsar delar av sidofältet och mer framträdande exempel på Bootstrap Icons .

Fler CSS-variabler

Vi har uppdaterat alla våra komponenter för att använda CSS-variabler. Medan Sass fortfarande underbygger allt, har varje komponent uppdaterats för att inkludera CSS-variabler på komponentbasklasserna (t.ex. .btn), vilket möjliggör mer realtidsanpassning av Bootstrap. I efterföljande utgåvor kommer vi att fortsätta att utöka vår användning av CSS-variabler till vår layout, formulär, hjälpare och verktyg. Läs mer om CSS-variabler i varje komponent på deras respektive dokumentationssidor.

Vår CSS-variabelanvändning kommer att vara något ofullständig fram till Bootstrap 6. Även om vi skulle älska att implementera dessa fullt ut över hela linjen, riskerar de att orsaka brytande förändringar. Till exempel, inställning $alert-border-width: var(--bs-border-width)i vår källkod bryter potentiell Sass i din egen kod om du gjorde det $alert-border-width * 2av någon anledning.

Som sådan kommer vi, när det är möjligt, att fortsätta att sträva mot fler CSS-variabler, men inser att vår implementering kan vara något begränsad i v5.

Ny`_maps.scss`

Bootstrap v5.2.0 introducerade en ny Sass-fil med _maps.scss. Den tar ut flera Sass-kartor _variables.scssför att åtgärda ett problem där uppdateringar av en originalkarta inte tillämpades på sekundära kartor som utökar dem. Till exempel, uppdateringar till $theme-colorstillämpades inte på andra temakartor som förlitade sig på $theme-colors, vilket bryter viktiga anpassningsarbetsflöden. Kort sagt, Sass har en begränsning där när en standardvariabel eller karta väl har använts kan den inte uppdateras. Det finns en liknande brist med CSS-variabler när de används för att komponera andra CSS-variabler.

Det är därför variabla anpassningar i Bootstrap måste komma efter @import "functions", men före @import "variables"och resten av vår importstack. Detsamma gäller för Sass-kartor – du måste åsidosätta standardinställningarna innan de kan användas. Följande kartor har flyttats till den nya _maps.scss:

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

Dina anpassade Bootstrap CSS-byggen ska nu se ut ungefär så här 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

Nya verktyg

Utökade font-weightverktyg för .fw-semiboldhalvfetstilta teckensnitt.
Utökade border-radiusverktyg för att inkludera två nya storlekar .rounded-4och .rounded-5, för fler alternativ.

Ytterligare ändringar

Infört nytt $enable-container-classesalternativ. — Nu när du väljer den experimentella CSS Grid-layouten kommer .container-*klasser fortfarande att kompileras, om inte det här alternativet är inställt på false. Containers behåller nu också sina rännstensvärden.
Offcanvas-komponenten har nu responsiva varianter . Den ursprungliga .offcanvasklassen förblir oförändrad – den döljer innehåll i alla visningsportar. För att göra den responsiv, ändra den .offcanvasklassen till valfri .offcanvas-{sm|md|lg|xl|xxl}klass.
Tjockare bordsavdelare är nu opt-in. — Vi har tagit bort den tjockare och svårare att åsidosätta gränsen mellan tabellgrupper och flyttat den till en valfri klass som du kan använda, .table-group-divider. Se tabelldokumentationen för ett exempel.
Scrollspy har skrivits om för att använda Intersection Observer API , vilket innebär att du inte längre behöver relativa överordnade omslag, fasaroffsetut konfigurationer och mer. Leta efter att dina Scrollspy-implementeringar blir mer exakta och konsekventa i deras navigeringsmarkering.
Popovers och verktygstips använder nu CSS-variabler. Vissa CSS-variabler har uppdaterats från sina Sass-motsvarigheter för att minska antalet variabler. Som ett resultat av detta har tre variabler fasats ut i den här versionen: $popover-arrow-color, $popover-arrow-outer-color, och $tooltip-arrow-color.
Lade till nya .text-bg-{color}hjälpare. Istället för att ställa in individuella .text-*och .bg-*verktyg kan du nu använda hjälparna för.text-bg-* att ställa in en background-colormed kontrasterande förgrund color.
Tillagd .form-check-reversemodifierare för att vända ordningen på etiketterna och tillhörande kryssrutor/radioapparater.
Lade till stöd för randiga kolumner i tabeller via den nya .table-striped-columnsklassen.

För en fullständig lista över ändringar, se v5.2.0-projektet på GitHub .

v5.1.0

Lade till experimentellt stöd för CSS Grid-layout . — Det här är ett pågående arbete och är ännu inte redo för produktionsanvändning, men du kan välja den nya funktionen via Sass. För att aktivera det, inaktivera standardrutnätet genom att ställa in $enable-grid-classes: falseoch aktivera CSS-rutnätet genom att ställa in $enable-cssgrid: true.
Uppdaterade navigeringsfält för att stödja offcanvas. — Lägg till offcanvas-lådor i valfri navbar med de responsiva .navbar-expand-*klasserna och lite offcanvas-uppmärkning.
Ny platshållarkomponent har lagts till . — Vår senaste komponent, ett sätt att tillhandahålla tillfälliga blockeringar i stället för verkligt innehåll för att indikera att något fortfarande laddas på din webbplats eller app.
Collapse plugin stöder nu horisontell kollapsning . — Lägg .collapse-horizontaltill .collapseför att komprimera widthistället för height. Undvik ommålning av webbläsaren genom att ställa in a min-heighteller height.
Lade till nya stack och vertikala regelhjälpare. — Tillämpa snabbt flera flexbox-egenskaper för att snabbt skapa anpassade layouter med stackar . Välj mellan horisontella ( .hstack) och vertikala ( .vstack) staplar. Lägg till vertikala avdelare som liknar <hr>element med de nya .vrmedhjälparna .
Lade till nya globala :rootCSS-variabler. — Lade till flera nya CSS-variabler på :rootnivån för att kontrollera <body>stilar. Fler är på gång, inklusive över våra verktyg och komponenter, men läs för närvarande upp CSS-variabler i avsnittet Anpassa .
Reviderade färg- och bakgrundsverktyg för att använda CSS-variabler och lade till nya verktyg för textopacitet och bakgrundsopacitet . — .text-* och .bg-*verktyg är nu byggda med CSS-variabler och rgba()färgvärden, så att du enkelt kan anpassa alla verktyg med nya opacitetsverktyg.
Lade till nya utdragsexempel baserade för att visa hur man anpassar våra komponenter. — Dra färdiga att använda anpassade komponenter och andra vanliga designmönster med våra nya Snippets-exempel . Inkluderar sidfötter , rullgardinsmenyer , listgrupper och modaler .
Tog bort oanvända positioneringsstilar från popovers och verktygstips eftersom dessa enbart hanteras av Popper. $tooltip-marginhar fasats ut och ställts in på nulli processen.

Vill du ha mer information? Läs v5.1.0 blogginlägget.

Hallå där! Ändringar av vår första stora version av Bootstrap 5, v5.0.0, dokumenteras nedan. De återspeglar inte de ytterligare ändringarna som visas ovan.

Beroenden

Släppt jQuery.
Uppgraderad från Popper v1.x till Popper v2.x.
Ersatte Libsass med Dart Sass eftersom vår Sass-kompilator med tanke på Libsass var utfasad.
Migrerade från Jekyll till Hugo för att bygga vår dokumentation

Webbläsarstöd

Har tappat Internet Explorer 10 och 11
Tappade Microsoft Edge < 16 (Legacy Edge)
Släppte Firefox < 60
Släppt Safari < 12
Släppt iOS Safari < 12
Släppte Chrome < 60

Dokumentationsförändringar

Omdesignad hemsida, dokumentlayout och sidfot.
Lagt till ny paketguide .
Lade till en ny sektion Anpassa , ersätter v4:s temasida , med nya detaljer om Sass, globala konfigurationsalternativ, färgscheman, CSS-variabler och mer.
Omorganiserade all formulärdokumentation till det nya Formulärsektionen och delade upp innehållet till mer fokuserade sidor.
På samma sätt uppdaterade avsnittet Layout för att förtydliga innehållet i rutnätet.
Döpte om "Navs"-komponentsidan till "Navs & Tabs".
Bytt namn på sidan "Checks" till "Checks & radios".
Designade om navigeringsfältet och lade till en ny undernavigering för att göra det enklare att ta sig runt på våra webbplatser och dokumentversioner.
Lade till ny kortkommando för sökfältet: Ctrl + /.

Sass

Vi har tagit bort standard Sass kartsammanslagningar för att göra det lättare att ta bort redundanta värden. Tänk på att du nu måste definiera alla värden i Sass-kartorna som $theme-colors. Kolla in hur man handskas med Sass-kartor .
BrytningOmdöpt color-yiq()funktion och relaterade variabler till color-contrast()eftersom den inte längre är relaterad till YIQ-färgrymden. Se #30168.
- $yiq-contrasted-thresholddöps om till $min-contrast-ratio.
- $yiq-text-darkoch $yiq-text-lightdöps om till $color-contrast-darkrespektive $color-contrast-light.
BrytningParametrar för blandningar av mediafrågor har ändrats för ett mer logiskt tillvägagångssätt.
- media-breakpoint-down()använder själva brytpunkten istället för nästa brytpunkt (t.ex. media-breakpoint-down(lg)istället för media-breakpoint-down(md)målvyportar som är mindre än lg).
- På liknande sätt använder den andra parametern media-breakpoint-between()även själva brytpunkten istället för nästa brytpunkt (t.ex. media-between(sm, lg)istället för media-breakpoint-between(sm, md)målvyportar mellan smoch lg).
BrytningTa bort utskriftsstilar och $enable-print-stylesvariabel. Tryckvisningsklasser finns fortfarande kvar. Se #28339 .
BrytningSläppt color(), theme-color(), och gray()fungerar till förmån för variabler. Se #29083 .
BrytningOmdöpt theme-color-level()funktion till color-level()och accepterar nu vilken färg du vill istället för bara $theme-colorfärger. Se #29083 Se upp: color-level() blev senare insläppt v5.0.0-alpha3.
BrytningOmdöpt $enable-prefers-reduced-motion-media-queryoch $enable-pointer-cursor-for-buttonstill $enable-reduced-motionoch $enable-button-pointersför korthet.
BrytningTog bort bg-gradient-variant()blandningen. Använd .bg-gradientklassen för att lägga till övertoningar till element istället för de genererade .bg-gradient-*klasserna.
Brytning Borttagna tidigare utfasade blandningar:
- hover, hover-focus, plain-hover-focus, ochhover-focus-active
- float()
- form-control-mixin()
- nav-divider()
- retina-img()
- text-hide()(har även tagit bort den associerade verktygsklassen, .text-hide)
- visibility()
- form-control-focus()
BrytningOmdöpt scale-color()funktion till shift-color()för att undvika kollision med Sass egen färgskalningsfunktion.
box-shadowmixins tillåter nu nullvärden och släpper nonefrån flera argument. Se #30394 .
Mixin border-radius()har nu ett standardvärde.

Färgsystem

Färgsystemet som fungerade med color-level()och $theme-color-intervaltogs bort till förmån för ett nytt färgsystem. Alla lighten()och darken()funktioner i vår kodbas ersätts av tint-color()och shade-color(). Dessa funktioner kommer att blanda färgen med antingen vit eller svart istället för att ändra dess ljushet med ett fast belopp. Den shift-color()kommer antingen att tona eller skugga en färg beroende på om dess viktparameter är positiv eller negativ. Se #30622 för mer information.
Lade till nya nyanser och nyanser för varje färg, vilket ger nio separata färger för varje basfärg, som nya Sass-variabler.
Förbättrad färgkontrast. Förbättrat färgkontrastförhållande från 3:1 till 4,5:1 och uppdaterade blå, gröna, cyan och rosa färger för att säkerställa WCAG 2.1 AA-kontrast. Ändrade även vår färgkontrastfärg från $gray-900till $black.
För att stödja vårt färgsystem har vi lagt till nya anpassade tint-color()och shade-color()funktioner för att blanda våra färger på rätt sätt.

Rutnätsuppdateringar

Ny brytpunkt! Lade till ny xxlbrytpunkt för 1400pxoch uppåt. Inga ändringar av alla andra brytpunkter.
Förbättrade takrännor. Rännor är nu inställda i rems och är smalare än v4 ( 1.5rem, eller ungefär 24px, ner från 30px). Detta anpassar vårt gallersystems rännor med våra distansverktyg.
- Lade till ny rännorklass ( .g-*, .gx-*, och .gy-*) för att styra horisontella/vertikala rännor, horisontella rännor och vertikala rännor.
- BrytningBytt namn .no-gutterstill .g-0för att matcha nya ränna verktyg.
Kolumner har inte längre position: relativetillämpats, så du kan behöva lägga .position-relativetill vissa element för att återställa det beteendet.
BrytningSlog ner flera .order-*klasser som ofta blev oanvända. Vi tillhandahåller nu bara .order-1till .order-5out of the box.
BrytningTappade .mediakomponenten eftersom den lätt kan replikeras med verktyg. Se #28265 och sidan för flexverktyg för ett exempel .
Brytning bootstrap-grid.cssgäller nu bara box-sizing: border-boxkolumnen istället för att återställa den globala boxstorleken. På så sätt kan våra rutmönster användas på fler ställen utan störningar.
$enable-grid-classesinaktiverar inte längre genereringen av containerklasser längre. Se #29146.
Uppdaterade make-colmixin till standard till lika kolumner utan en angiven storlek.

Innehåll, omstart osv

RFS är nu aktiverat som standard. Rubriker som använderfont-size()mixin kommer automatiskt att justera derasfont-sizeskala med visningsporten. Den här funktionen var tidigare opt-in med v4.
BrytningSe över vår displaytypografi för att ersätta våra $display-*variabler och med en $display-font-sizesSass-karta. Tog även bort de individuella $display-*-weightvariablerna för en enda $display-font-weightoch justerad font-sizes.
Lade till två nya .display-*rubrikstorlekar .display-5och .display-6.
Länkar är understrukna som standard (inte bara när de svävar), såvida de inte är en del av specifika komponenter.
Omdesignade tabeller för att uppdatera deras stilar och bygga om dem med CSS-variabler för mer kontroll över stilen.
BrytningKapslade tabeller ärver inte stilar längre.
Brytning .thead-lightoch tas .thead-darkbort till förmån för .table-*variantklasserna som kan användas för alla tabellelement ( thead, tbody, tfoot, tr, thoch td).
BrytningMixin table-row-variant()byter namn till table-variant()och accepterar endast 2 parametrar: $color(färgnamn) och $value(färgkod). Kantfärgen och accentfärgerna beräknas automatiskt baserat på tabellfaktorvariablerna.
Dela upp tabellcellutfyllnadsvariabler i -yoch -x.
BrytningAvlagd .pre-scrollableklass. Se #29135
Brytning .text-*verktyg lägger inte till hovring och fokus till länkar längre. .link-*hjälparklasser kan användas istället. Se #29267
BrytningAvlagd .text-justifyklass. Se #29793
Brytning <hr>element används nu heightistället för borderatt bättre stödja sizeattributet. Detta gör det också möjligt att använda utfyllnadsverktyg för att skapa tjockare avdelare (t.ex. <hr class="py-1">).
Återställ standard horisontellt padding-leftpå <ul>och <ol>element från webbläsarens standard 40pxtill 2rem.
Tillagd $enable-smooth-scroll, som gäller scroll-behavior: smoothglobalt – förutom för användare som ber om minskad rörelse genom prefers-reduced-motionmediefråga. Se #31877

RTL

Horisontella riktningsspecifika variabler, verktyg och mixins har alla döpts om för att använda logiska egenskaper som de som finns i flexbox-layouter - t.ex. startoch endi stället för leftoch right.

Blanketter

Nya flytande formulär har lagts till! Vi har marknadsfört exemplet med flytande etiketter till formulärkomponenter som stöds fullt ut. Se den nya sidan med flytande etiketter.
Brytning Konsoliderade inbyggda och anpassade formulärelement. Kryssrutor, radioapparater, markeringar och andra ingångar som hade inbyggda och anpassade klasser i v4 har konsoliderats. Nu är nästan alla våra formulärelement helt anpassade, de flesta utan behov av anpassad HTML.
- .custom-control.custom-checkboxär nu .form-check.
- .custom-control.custom-custom-radioär nu .form-check.
- .custom-control.custom-switchär nu .form-check.form-switch.
- .custom-selectär nu .form-select.
- .custom-fileoch .form-filehar ersatts av anpassade stilar ovanpå .form-control.
- .custom-rangeär nu .form-range.
- Släppt infödd .form-control-fileoch .form-control-range.
BrytningTappade .input-group-appendoch .input-group-prepend. Du kan nu bara lägga till knappar och .input-group-textsom direkta barn till inmatningsgrupperna.
Den långvariga Missing border-radien på inmatningsgrupp med valideringsfeedback har äntligen åtgärdats genom att lägga till en extra .has-validationklass till indatagrupper med validering.
Brytning Slopade formspecifika layoutklasser för vårt rutsystem. Använd vårt nät och våra verktyg istället för .form-group, .form-row, eller .form-inline.
BrytningFormuläretiketter kräver nu .form-label.
Brytning .form-textställer inte längre in display, vilket gör att du kan skapa inline eller blockera hjälptext som du vill bara genom att ändra HTML-elementet.
Formulärkontroller används inte längre fast heightnär det är möjligt, istället skjuts upp till min-heightför att förbättra anpassning och kompatibilitet med andra komponenter.
Valideringsikoner tillämpas inte längre på <select>s med multiple.
Omarrangerade Sass-källfiler under scss/forms/, inklusive inmatningsgruppstilar.

Komponenter

Enade paddingvärden för varningar, brödsmulor, kort, rullgardinsmenyer, listgrupper, modaler, popovers och verktygstips som ska baseras på vår $spacervariabel. Se #30564 .

Dragspel

Lagt till ny dragspelskomponent .

Varningar

Varningar har nu exempel med ikoner .
Tog bort anpassade stilar för <hr>s i varje varning eftersom de redan använder currentColor.

Märken

BrytningSläppte alla .badge-*färgklasser för bakgrundsverktyg (t.ex. använd .bg-primaryistället för .badge-primary).
BrytningSläppt .badge-pill— använd .rounded-pillverktyget istället.
BrytningTog bort sväv- och fokusstilar för <a>och <button>element.
Ökad standardutfyllnad för märken från .25em/ .5emtill .35em/ .65em.

Ströbröd

Förenklade standardutseendet för brödsmulor genom att ta bort padding, background-color, och border-radius.
Lade till ny anpassad CSS-egenskap --bs-breadcrumb-dividerför enkel anpassning utan att behöva kompilera om CSS.

Knappar

Brytning Växlingsknappar , med kryssrutor eller radioapparater, kräver inte längre JavaScript och har ny markering. Vi kräver inte längre ett omslagselement, lägg.btn-checktill i<input>, och para det med några.btnklasser på<label>. Se #30650 . Dokumenten för detta har flyttats från vår knappsida till den nya formulärsektionen.
Brytning Släppt .btn-blockför verktyg. Istället för att använda .btn-blockpå .btn, slå in dina knappar med .d-gridett .gap-*verktyg för att placera dem efter behov. Byt till responsiva klasser för ännu mer kontroll över dem. Läs dokumenten för några exempel.
Uppdaterade våra button-variant()och button-outline-variant()mixins för att stödja ytterligare parametrar.
Uppdaterade knappar för att säkerställa ökad kontrast vid hovring och aktiva tillstånd.
Inaktiverade knappar har nu pointer-events: none;.

Kort

BrytningTappade .card-decktill förmån för vårt rutnät. Slå in dina kort i kolumnklasser och lägg till en överordnad .row-cols-*behållare för att återskapa kortlekar (men med mer kontroll över responsiv anpassning).
BrytningTappade .card-columnstill förmån för Masonry. Se #28922 .
BrytningErsatte det .cardbaserade dragspelet med en ny dragspelskomponent .

Karusell

Lade till ny .carousel-darkvariant för mörk text, kontroller och indikatorer (bra för ljusare bakgrunder).
Ersatte chevron-ikoner för karusellkontroller med nya SVG:er från Bootstrap Icons .

Stäng-knapp

BrytningBytt namn .closetill .btn-closeför ett mindre generiskt namn.
Stängknappar använder nu en background-image(inbäddad SVG) istället för en ×i HTML, vilket möjliggör enklare anpassning utan att behöva röra din markering.
Lade till ny .btn-close-whitevariant som används filter: invert(1)för att aktivera högre kontrast för att ta bort ikoner mot mörkare bakgrunder.

Kollaps

Borttagen rullförankring för dragspel.

Dropdowns

Lade till ny .dropdown-menu-darkvariant och associerade variabler för mörka rullgardinsmenyer på begäran.
Lade till ny variabel för $dropdown-padding-x.
Mörkade rullgardinsavdelaren för förbättrad kontrast.
BrytningAlla händelser för rullgardinsmenyn utlöses nu på växlingsknappen för rullgardinsmenyn och bubblas sedan upp till det överordnade elementet.
Rullgardinsmenyer har nu ett data-bs-popper="static"attribut inställt när placeringen av rullgardinsmenyn är statisk, eller rullgardinsmenyn finns i navigeringsfältet. Detta läggs till av vår JavaScript och hjälper oss att använda anpassade positionsstilar utan att störa Poppers positionering.
BrytningBorttaget flipalternativ för dropdown-plugin till förmån för inbyggd Popper-konfiguration. Du kan nu inaktivera vändningsbeteendet genom att skicka en tom array för fallbackPlacementsalternativet i vändningsmodifieraren .
Rullgardinsmenyer kan nu vara klickbara med ett nytt autoClosealternativ för att hantera automatisk stängning . Du kan använda det här alternativet för att acceptera klicket i eller utanför rullgardinsmenyn för att göra det interaktivt.
Dropdown-menyn stöder nu .dropdown-items insvept i <li>s.

Jumbotron

BrytningTappade jumbotronkomponenten eftersom den kan replikeras med verktyg. Se vårt nya Jumbotron-exempel för en demo.

Listgrupp

Ny .list-group-numberedmodifierare har lagts till i listgrupper.

Nav och flikar

Lade till nya nullvariabler för font-size, font-weight, color, och :hover colortill .nav-linkklassen.

Navbars

BrytningNavbars kräver nu en container inom (för att drastiskt förenkla kraven på avstånd och CSS krävs).
BrytningKlassen .activekan inte längre appliceras på .nav-items, den måste appliceras direkt på .nav-links.

Offcanvas

Lade till den nya offcanvas-komponenten .

Paginering

Pagineringslänkar har nu anpassningsbara margin-leftsom är dynamiskt rundade i alla hörn när de är åtskilda från varandra.
Lade transitiontill s till pagineringslänkar.

Popovers

BrytningBytt namn .arrowtill .popover-arrowi vår standard popover-mall.
Omdöpt whiteListalternativ till allowList.

Spinnare

Spinners hedrar nu prefers-reduced-motion: reducegenom att sakta ner animationer. Se #31882 .
Förbättrad spinner vertikal inriktning.

Rostat bröd

Rostat bröd kan nu placeras i en .toast-containermed hjälp av positioneringsverktyg .
Ändrad standardtoastlängd till 5 sekunder.
Borttagen overflow: hiddenfrån rostat bröd och ersatt med ordentliga border-radiuss med calc()funktioner.

Verktygstips

BrytningBytt namn .arrowtill .tooltip-arrowi vår standard mall för verktygstips.
BrytningStandardvärdet för fallbackPlacementsändras till ['top', 'right', 'bottom', 'left']för bättre placering av tryckknappselement.
BrytningOmdöpt whiteListalternativ till allowList.

Verktyg

BrytningDöpte om flera verktyg för att använda logiska egenskapsnamn istället för riktningsnamn med tillägg av RTL-stöd:
- Bytt namn .left-*och .right-*till .start-*och .end-*.
- Bytt namn .float-leftoch .float-righttill .float-startoch .float-end.
- Bytt namn .border-leftoch .border-righttill .border-startoch .border-end.
- Bytt namn .rounded-leftoch .rounded-righttill .rounded-startoch .rounded-end.
- Bytt namn .ml-*och .mr-*till .ms-*och .me-*.
- Bytt namn .pl-*och .pr-*till .ps-*och .pe-*.
- Bytt namn .text-leftoch .text-righttill .text-startoch .text-end.
BrytningInaktiverade negativa marginaler som standard.
Lade till ny .bg-bodyklass för att snabbt ställa in <body>bakgrunden till ytterligare element.
Lade till nya positionsverktyg för top, right, bottom, och left. Värdena inkluderar 0, 50%, och 100%för varje fastighet.
Lade till nya .translate-middle-xoch .translate-middle-yverktyg för att horisontellt eller vertikalt centrera absolut/fast positionerade element.
Lade till nya border-widthverktyg .
BrytningBytt namn .text-monospacetill .font-monospace.
BrytningBorttagen .text-hideeftersom det är en föråldrad metod för att dölja text som inte borde användas längre.
Tillagda .fs-*verktyg för font-sizeverktyg (med RFS aktiverat). Dessa använder samma skala som HTMLs standardrubriker (1-6, stora till små), och kan modifieras via Sass-karta.
BrytningOmdöpta .font-weight-*verktyg .fw-*för korthet och konsekvens.
BrytningOmdöpta .font-style-*verktyg .fst-*för korthet och konsekvens.
Tillagd .d-gridför att visa verktyg och nya gapverktyg ( .gap) för CSS Grid och flexbox layouter.
BrytningTog bort .rounded-smoch rounded-lg, och introducerade en ny klassskala, .rounded-0till .rounded-3. Se #31687 .
Lade till nya line-heightverktyg: .lh-1, .lh-sm, .lh-baseoch .lh-lg. Se här .
Flyttade .d-noneverktyget i vår CSS för att ge det mer vikt jämfört med andra visningsverktyg.
Utökade .visually-hidden-focusablehjälparen till att även arbeta på containrar, med hjälp av :focus-within.

Hjälpare

Brytning Responsiva inbäddningshjälpare har bytt namn till ratiohjälpare med nya klassnamn och förbättrade beteenden, samt en användbar CSS-variabel.
- Klasser har bytt namn för att ändra bytill xi bildförhållandet. Till exempel .ratio-16by9är nu .ratio-16x9.
- Vi har tagit bort .embed-responsive-itemelementgruppväljaren och till förmån för en enklare .ratio > *väljare. Ingen mer klass behövs, och ratio-hjälpen fungerar nu med alla HTML-element.
- Sass $embed-responsive-aspect-ratios-kartan har bytt namn till $aspect-ratiosoch dess värden har förenklats för att inkludera klassnamnet och procentandelen som key: valuepar.
- CSS-variabler genereras nu och inkluderas för varje värde i Sass-kartan. Ändra --bs-aspect-ratiovariabeln på för .ratioatt skapa valfritt anpassat bildförhållande .
Brytning "Skärmläsarklasser" är nu "visuellt dolda" klasser .
- Ändrade Sass-filen från scss/helpers/_screenreaders.scsstillscss/helpers/_visually-hidden.scss
- Bytt namn .sr-onlyoch .sr-only-focusabletill .visually-hiddenoch.visually-hidden-focusable
- Bytt namn sr-only()och sr-only-focusable()blandas till visually-hidden()och visually-hidden-focusable().
bootstrap-utilities.cssomfattar nu även våra medhjälpare. Hjälpare behöver inte längre importeras i anpassade builds.

JavaScript

Släppte jQuery-beroendet och skrev om plugins för att vara i vanligt JavaScript.
BrytningDataattribut för alla JavaScript-plugins är nu namnavgränsade för att hjälpa till att skilja Bootstrap-funktionalitet från tredje part och din egen kod. Till exempel använder vi data-bs-toggleistället för data-toggle.
Alla plugins kan nu acceptera en CSS-väljare som första argument. Du kan antingen skicka ett DOM-element eller någon giltig CSS-väljare för att skapa en ny instans av plugin:
```
const modal = new bootstrap.Modal('#myModal')
const dropdown = new bootstrap.Dropdown('[data-bs-toggle="dropdown"]')
```
popperConfigkan skickas som en funktion som accepterar Bootstraps standard Popper-konfiguration som ett argument, så att du kan slå ihop denna standardkonfiguration på ditt sätt. Gäller rullgardinsmenyer, popovers och verktygstips.
Standardvärdet för fallbackPlacementsändras till ['top', 'right', 'bottom', 'left']för bättre placering av Popper-element. Gäller rullgardinsmenyer, popovers och verktygstips.
Tog bort understreck från offentliga statiska metoder som _getInstance()→ getInstance().