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.
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 tillcolor-contrast()
eftersom den inte längre är relaterad till YIQ-färgrymd. Se #30168.$yiq-contrasted-threshold
döps om till$min-contrast-ratio
.$yiq-text-dark
och$yiq-text-light
döps om till$color-contrast-dark
respektive$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örmedia-breakpoint-down(md)
målvyportar som är mindre änlg
).- 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örmedia-breakpoint-between(sm, md)
målvyportar mellansm
ochlg
).
-
BrytningTa bort utskriftsstilar och
$enable-print-styles
variabel. Tryckvisningsklasser finns fortfarande kvar. Se #28339 . -
BrytningSläppt
color()
,theme-color()
, ochgray()
fungerar till förmån för variabler. Se #29083 . -
BrytningOmdöpt
theme-color-level()
funktion tillcolor-level()
och accepterar nu vilken färg du vill istället för bara$theme-color
färger. Se #29083 Se upp:color-level()
blev senare insläpptv5.0.0-alpha3
. -
BrytningOmdöpt
$enable-prefers-reduced-motion-media-query
och$enable-pointer-cursor-for-buttons
till$enable-reduced-motion
och$enable-button-pointers
för korthet. -
BrytningTog bort
bg-gradient-variant()
blandningen. Använd.bg-gradient
klassen 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 tillshift-color()
för att undvika kollision med Sass egen färgskalningsfunktion. -
box-shadow
mixins tillåter nunull
värden och släppernone
frå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-interval
togs bort till förmån för ett nytt färgsystem. Allalighten()
ochdarken()
funktioner i vår kodbas ersätts avtint-color()
ochshade-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. Denshift-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-900
till$black
. -
För att stödja vårt färgsystem har vi lagt till nya anpassade
tint-color()
ochshade-color()
funktioner för att blanda våra färger på rätt sätt.
Rutnätsuppdateringar
-
Ny brytpunkt! Lade till ny
xxl
brytpunkt för1400px
och 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är24px
, ner från30px
). 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-gutters
till.g-0
för att matcha nya ränna verktyg.
- Lade till ny rännorklass (
-
Kolumner har inte längre
position: relative
tillämpats, så du kan behöva lägga.position-relative
till 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-1
till.order-5
out of the box. -
BrytningTappade
.media
komponenten eftersom den lätt kan replikeras med verktyg. Se #28265 och sidan för flexverktyg för ett exempel . -
Brytning
bootstrap-grid.css
gäller nu barabox-sizing: border-box
kolumnen 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-classes
inaktiverar inte längre genereringen av containerklasser längre. Se #29146. -
Uppdaterade
make-col
mixin till standard till lika kolumner utan en angiven storlek.
Innehåll, omstart osv
-
RFS är nu aktiverat som standard. Rubriker som använder
font-size()
mixin kommer automatiskt att justera derasfont-size
skala 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-sizes
Sass-karta. Tog även bort de individuella$display-*-weight
variablerna för en enda$display-font-weight
och justeradfont-size
s. -
Lade till två nya
.display-*
rubrikstorlekar.display-5
och.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-light
och tas.thead-dark
bort till förmån för.table-*
variantklasserna som kan användas för alla tabellelement (thead
,tbody
,tfoot
,tr
,th
ochtd
). -
BrytningMixin
table-row-variant()
byter namn tilltable-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
-y
och-x
. -
BrytningTappad
.pre-scrollable
klass. 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 -
BrytningTappad
.text-justify
klass. Se #29793 -
Återställ standard horisontellt
padding-left
på<ul>
och<ol>
element från webbläsarens standard40px
till2rem
. -
Tillagd
$enable-smooth-scroll
, som gällerscroll-behavior: smooth
globalt – förutom för användare som ber om minskad rörelse genomprefers-reduced-motion
mediefrå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.
start
ochend
i stället förleft
ochright
.
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-file
och.form-file
har ersatts av anpassade stilar ovanpå.form-control
..custom-range
är nu.form-range
.- Släppt infödd
.form-control-file
och.form-control-range
.
-
BrytningTappade
.input-group-append
och.input-group-prepend
. Du kan nu bara lägga till knappar och.input-group-text
som 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-validation
klass 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-text
ställer inte längre indisplay
, 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 medmultiple
. -
Omarrangerade Sass-källfiler under
scss/forms/
, inklusive inmatningsgruppstilar.
Komponenter
- Enade
padding
värden för varningar, brödsmulor, kort, rullgardinsmenyer, listgrupper, modaler, popovers och verktygstips som ska baseras på vår$spacer
variabel. 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ändercurrentColor
.
Märken
-
BrytningSläppte alla
.badge-*
färgklasser för bakgrundsverktyg (t.ex. använd.bg-primary
istället för.badge-primary
). -
BrytningSläppt
.badge-pill
— använd.rounded-pill
verktyget istället. -
BrytningTog bort sväv- och fokusstilar för
<a>
och<button>
element. -
Ökad standardutfyllnad för märken från
.25em
/.5em
till.35em
/.65em
.
Ströbröd
-
Förenklade standardutseendet för brödsmulor genom att ta bort
padding
,background-color
, ochborder-radius
. -
Lade till ny anpassad CSS-egenskap
--bs-breadcrumb-divider
fö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-check
till i<input>
, och para det med några.btn
klasser på<label>
. Se #30650 . Dokumenten för detta har flyttats från vår knappsida till den nya formulärsektionen. -
Brytning Släppt
.btn-block
för verktyg. Istället för att använda.btn-block
på.btn
, slå in dina knappar med.d-grid
ett.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()
ochbutton-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-deck
till 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-columns
till förmån för Masonry. Se #28922 . -
BrytningErsatte det
.card
baserade dragspelet med en ny dragspelskomponent .
Karusell
-
Lade till ny
.carousel-dark
variant 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
.close
till.btn-close
fö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-white
variant som användsfilter: 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.
Dropdown-meny
-
Lade till ny
.dropdown-menu-dark
variant 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 ochdata-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
flip
alternativ 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örfallbackPlacements
alternativet i vändningsmodifieraren . -
Rullgardinsmenyer kan nu vara klickbara med ett nytt
autoClose
alternativ 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-item
s 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-numbered
modifierare har lagts till i listgrupper.
Nav och flikar
- Lade till nya
null
variabler förfont-size
,font-weight
,color
, och:hover
color
till.nav-link
klassen.
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-left
som är dynamiskt rundade i alla hörn när de är åtskilda från varandra. -
Lade
transition
till s till pagineringslänkar.
Popovers
-
BrytningBytt namn
.arrow
till.popover-arrow
i vår standard popover-mall. -
Omdöpt
whiteList
alternativ tillallowList
.
Spinnare
-
Spinners hedrar nu
prefers-reduced-motion: reduce
genom att sakta ner animationer. Se #31882 . -
Förbättrad spinner vertikal inriktning.
Rostat bröd
-
Rostat bröd kan nu placeras i en
.toast-container
med hjälp av positioneringsverktyg . -
Ändrad standardtoastlängd till 5 sekunder.
-
Borttagen
overflow: hidden
från rostat bröd och ersatt med ordentligaborder-radius
s medcalc()
funktioner.
Verktygstips
-
BrytningBytt namn
.arrow
till.tooltip-arrow
i 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
whiteList
alternativ tillallowList
.
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-left
och.float-right
till.float-start
och.float-end
. - Bytt namn
.border-left
och.border-right
till.border-start
och.border-end
. - Bytt namn
.rounded-left
och.rounded-right
till.rounded-start
och.rounded-end
. - Bytt namn
.ml-*
och.mr-*
till.ms-*
och.me-*
. - Bytt namn
.pl-*
och.pr-*
till.ps-*
och.pe-*
. - Bytt namn
.text-left
och.text-right
till.text-start
och.text-end
.
- Bytt namn
-
BrytningInaktiverade negativa marginaler som standard.
-
Lade till ny
.bg-body
klass för att snabbt ställa in<body>
bakgrunden till ytterligare element. -
Lade till nya positionsverktyg för
top
,right
,bottom
, ochleft
. Värdena inkluderar0
,50%
, och100%
för varje fastighet. -
Lade till nya
.translate-middle-x
och.translate-middle-y
verktyg för att horisontellt eller vertikalt centrera absolut/fast positionerade element. -
Lade till nya
border-width
verktyg . -
BrytningBytt namn
.text-monospace
till.font-monospace
. -
BrytningBorttagen
.text-hide
eftersom det är en föråldrad metod för att dölja text som inte borde användas längre. -
Tillagda
.fs-*
verktyg förfont-size
verktyg (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-grid
för att visa verktyg och nyagap
verktyg (.gap
) för CSS Grid och flexbox layouter. -
BrytningTog bort
.rounded-sm
ochrounded-lg
, och introducerade en ny klassskala,.rounded-0
till.rounded-3
. Se #31687 . -
Lade till nya
line-height
verktyg:.lh-1
,.lh-sm
,.lh-base
och.lh-lg
. Se här . -
Flyttade
.d-none
verktyget i vår CSS för att ge det mer vikt jämfört med andra visningsverktyg. -
Utökade
.visually-hidden-focusable
hjä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
by
tillx
i bildförhållandet. Till exempel.ratio-16by9
är nu.ratio-16x9
. - Vi har tagit bort
.embed-responsive-item
elementgruppvä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-ratios
och dess värden har förenklats för att inkludera klassnamnet och procentandelen somkey: value
par. - CSS-variabler genereras nu och inkluderas för varje värde i Sass-kartan. Ändra
--bs-aspect-ratio
variabeln på för.ratio
att skapa valfritt anpassat bildförhållande .
- Klasser har bytt namn för att ändra
-
Brytning "Skärmläsarklasser" är nu "visuellt dolda" klasser .
- Ändrade Sass-filen från
scss/helpers/_screenreaders.scss
tillscss/helpers/_visually-hidden.scss
- Bytt namn
.sr-only
och.sr-only-focusable
till.visually-hidden
och.visually-hidden-focusable
- Bytt namn
sr-only()
ochsr-only-focusable()
blandas tillvisually-hidden()
ochvisually-hidden-focusable()
.
- Ändrade Sass-filen från
-
bootstrap-utilities.css
omfattar 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-toggle
istället fördata-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"]')
-
popperConfig
kan 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()
.