Migrerer til v5

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.

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().