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

Beroenden

Släppte 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ärgrymd. 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-checkär nu .form-check.
- .custom-check.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.
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 och data-bs-popper="none"när 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).

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