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

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-fargerommet. 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-checker nå .form-check.
- .custom-check.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.
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 angitt når plasseringen av rullegardinmenyen er statisk og data-bs-popper="none"når rullegardinmenyen 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).

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:
```
var modal = new bootstrap.Modal('#myModal')
var 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().