Migrerer til v5
Spor og gjennomgå endringer i Bootstrap-kildefilene, dokumentasjonen og komponentene for å hjelpe deg med å migrere fra v4 til v5.
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 tilcolor-contrast()
siden den ikke lenger er relatert til YIQ-fargerommet. Se #30168.$yiq-contrasted-threshold
er omdøpt til$min-contrast-ratio
.$yiq-text-dark
og$yiq-text-light
er henholdsvis omdøpt til$color-contrast-dark
og$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. imedia-breakpoint-down(lg)
stedet formedia-breakpoint-down(md)
målvisningsporter som er mindre ennlg
).- På samme måte bruker den andre parameteren
media-breakpoint-between()
også selve bruddpunktet i stedet for det neste bruddpunktet (f.eks. imedia-between(sm, lg)
stedet formedia-breakpoint-between(sm, md)
målvisningsporter mellomsm
oglg
).
-
BreakingFjernet utskriftsstiler og
$enable-print-styles
variabel. Utskriftsvisningsklasser finnes fortsatt. Se #28339 . -
BreakingDroppet
color()
,theme-color()
, oggray()
fungerer til fordel for variabler. Se #29083 . -
BreakingOmdøpt
theme-color-level()
funksjonen tilcolor-level()
og godtar nå hvilken som helst farge du vil ha i stedet for bare$theme-color
farger. Se #29083 Se opp:color-level()
ble senere droppet innv5.0.0-alpha3
. -
BreakingOmdøpt
$enable-prefers-reduced-motion-media-query
og$enable-pointer-cursor-for-buttons
til$enable-reduced-motion
og$enable-button-pointers
for korthet. -
BreakingFjernet
bg-gradient-variant()
blandingen. Bruk.bg-gradient
klassen 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 tilshift-color()
for å unngå kollisjon med Sass egen fargeskaleringsfunksjon. -
box-shadow
mixins tillater nånull
verdier og fallnone
fra flere argumenter. Se #30394 . -
Blandingen
border-radius()
har nå en standardverdi.
Fargesystem
-
Fargesystemet som fungerte med
color-level()
og$theme-color-interval
ble fjernet til fordel for nytt fargesystem. Allelighten()
ogdarken()
funksjoner i kodebasen vår erstattes avtint-color()
ogshade-color()
. Disse funksjonene vil blande fargen med enten hvit eller svart i stedet for å endre lysheten med en fast mengde. Denshift-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-900
til$black
. -
For å støtte fargesystemet vårt har vi lagt til nye tilpassede funksjoner
tint-color()
forshade-color()
å blande fargene våre på riktig måte.
Rutenettoppdateringer
-
Nytt bruddpunkt! Lagt til nytt
xxl
bruddpunkt for1400px
og opp. Ingen endringer i alle andre bruddpunkter. -
Forbedrede takrenner. Takrenner er nå satt i rems, og er smalere enn v4 (
1.5rem
, eller ca24px
, ned fra30px
). 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-gutters
til.g-0
for å matche nye takrenneverktøy.
- Lagt til ny renneklasse (
-
Kolonner er ikke lenger
position: relative
brukt, så det kan hende du må legge.position-relative
til enkelte elementer for å gjenopprette denne virkemåten. -
BreakingDroppet flere
.order-*
klasser som ofte gikk ubrukt. Vi tilbyr nå kun.order-1
til.order-5
ut av esken. -
BreakingDroppet
.media
komponenten da den lett kan replikeres med verktøy. Se #28265 og flex-verktøysiden for et eksempel . -
Breaking
bootstrap-grid.css
gjelder nå kunbox-sizing: border-box
kolonnen i stedet for å tilbakestille den globale boksstørrelsen. På denne måten kan rutenettstilene våre brukes flere steder uten forstyrrelser. -
$enable-grid-classes
deaktiverer ikke lenger generering av containerklasser. Se #29146. -
Oppdaterte
make-col
mixin til standard til like kolonner uten en spesifisert størrelse.
Innhold, omstart osv
-
RFS er nå aktivert som standard. Overskrifter som bruker
font-size()
mixin vil automatisk justere deresfont-size
til å 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-sizes
Sass-kart. Fjernet også de individuelle$display-*-weight
variablene for en enkelt$display-font-weight
og justertfont-size
s. -
Lagt til to nye
.display-*
overskriftsstørrelser,.display-5
og.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-light
og.thead-dark
blir droppet til fordel for.table-*
variantklassene som kan brukes for alle tabellelementer (thead
,tbody
,tfoot
,tr
,th
ogtd
). -
BreakingMixin
table-row-variant()
er omdøpt tiltable-variant()
og aksepterer kun 2 parametere:$color
(fargenavn) og$value
(fargekode). Kantfargen og aksentfargene beregnes automatisk basert på tabellfaktorvariablene. -
Del tabellcelleutfyllingsvariabler i
-y
og-x
. -
BreakingDroppet
.pre-scrollable
klasse. 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-justify
klasse. Se #29793 -
Tilbakestill standard horisontalt
padding-left
på<ul>
og<ol>
elementer fra nettleserstandard40px
til2rem
. -
Lagt til
$enable-smooth-scroll
, som gjelderscroll-behavior: smooth
globalt – bortsett fra brukere som ber om redusert bevegelse gjennomprefers-reduced-motion
mediesø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.
start
ogend
i stedet forleft
ogright
.
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-check
er nå.form-check
..custom-check.custom-switch
er nå.form-check.form-switch
..custom-select
er nå.form-select
..custom-file
og.form-file
har blitt erstattet av egendefinerte stiler på toppen av.form-control
..custom-range
er nå.form-range
.- Droppet innfødte
.form-control-file
og.form-control-range
.
-
BreakingDroppet
.input-group-append
og.input-group-prepend
. Du kan nå bare legge til knapper og.input-group-text
som direkte underordnede inndatagrupper. -
Den langvarige Missing border-radius på inngangsgruppe med valideringsfeedback er endelig fikset ved å legge til en ekstra
.has-validation
klasse 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-text
setter ikke lengerdisplay
, slik at du kan lage innebygd eller blokkere hjelpetekst som du ønsker bare ved å endre HTML-elementet. -
Valideringsikoner brukes ikke lenger på
<select>
s medmultiple
. -
Omorganiserte kilde Sass-filer under
scss/forms/
, inkludert inndatagruppestiler.
Komponenter
- Samlede
padding
verdier for varsler, brødsmuler, kort, rullegardiner, listegrupper, modaler, popovers og verktøytips som skal baseres på$spacer
variabelen 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 brukercurrentColor
.
Merker
-
BreakingHar droppet alle
.badge-*
fargeklasser for bakgrunnsverktøy (f.eks. bruk.bg-primary
i stedet for.badge-primary
). -
BreakingDroppet — bruk
.badge-pill
verktøyet.rounded-pill
i stedet. -
BreakingFjernet sveve- og fokusstiler for
<a>
og<button>
elementer. -
Økt standard polstring for merker fra
.25em
/.5em
til.35em
/.65em
.
Brødsmuler
-
Forenklet standardutseendet til brødsmuler ved å fjerne
padding
,background-color
, ogborder-radius
. -
Lagt til ny egendefinert CSS-egenskap
--bs-breadcrumb-divider
for 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-check
til i<input>
, og parer det med eventuelle.btn
klasser på<label>
. Se #30650 . Dokumentene for dette har flyttet fra vår knappeside til den nye skjemadelen. -
Breaking Droppet
.btn-block
for verktøy. I stedet for å bruke.btn-block
på.btn
, pakk inn knappene dine med.d-grid
et.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()
ogbutton-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-deck
til 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-columns
til fordel for murverk. Se #28922 . -
BreakingErstattet det
.card
baserte trekkspillet med en ny trekkspillkomponent .
Karusell
-
Lagt til ny
.carousel-dark
variant 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
.close
til.btn-close
for 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-white
variant som brukerfilter: 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-dark
variant 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 ogdata-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
flip
alternativ for dropdown-plugin til fordel for native Popper-konfigurasjon. Du kan nå deaktivere vendingsoppførselen ved å sende en tom matrise forfallbackPlacements
alternativet i flip -modifikator. -
Rullegardinmenyer kan nå være klikkbare med et nytt
autoClose
alternativ 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-item
s 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-numbered
modifikator til listegrupper.
Nav og faner
- Lagt til nye
null
variabler forfont-size
,font-weight
,color
, og:hover
color
til.nav-link
klassen.
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-left
som er dynamisk avrundet i alle hjørner når de er adskilt fra hverandre. -
Lagt
transition
til s til pagineringslenker.
Popovers
-
BreakingOmdøpt
.arrow
til.popover-arrow
i vår standard popover-mal. -
Omdøpt
whiteList
alternativ tilallowList
.
Spinnere
-
Spinnere hedrer nå
prefers-reduced-motion: reduce
ved å bremse animasjoner. Se #31882 . -
Forbedret vertikal justering av spinneren.
Skåler
-
Toasts kan nå plasseres i en
.toast-container
ved hjelp av posisjoneringsverktøy . -
Endret standard toast-varighet til 5 sekunder.
-
Fjernet
overflow: hidden
fra toasts og erstattet med skikkeligeborder-radius
s medcalc()
funksjoner.
Verktøytips
-
BreakingOmdøpt
.arrow
til.tooltip-arrow
i vår standard verktøytipsmal. -
BreakingStandardverdien for
fallbackPlacements
er endret til['top', 'right', 'bottom', 'left']
for bedre plassering av popper-elementer. -
BreakingOmdøpt
whiteList
alternativ tilallowList
.
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-left
og.float-right
til.float-start
og.float-end
. - Omdøpt
.border-left
og.border-right
til.border-start
og.border-end
. - Omdøpt
.rounded-left
og.rounded-right
til.rounded-start
og.rounded-end
. - Omdøpt
.ml-*
og.mr-*
til.ms-*
og.me-*
. - Omdøpt
.pl-*
og.pr-*
til.ps-*
og.pe-*
. - Omdøpt
.text-left
og.text-right
til.text-start
og.text-end
.
- Omdøpt
-
BreakingDeaktivert negative marginer som standard.
-
Lagt til ny
.bg-body
klasse for raskt å sette<body>
s-bakgrunnen til flere elementer. -
Lagt til nye posisjonsverktøy for
top
,right
,bottom
, ogleft
. Verdiene inkluderer0
,50%
, og100%
for hver eiendom. -
Lagt til nye
.translate-middle-x
og.translate-middle-y
verktøy for horisontalt eller vertikalt sentrering av absolutt/fast posisjonerte elementer. -
Lagt til nye
border-width
verktøy . -
BreakingOmdøpt
.text-monospace
til.font-monospace
. -
BreakingFjernet
.text-hide
da det er en foreldet metode for å skjule tekst som ikke skal brukes lenger. -
Lagt til
.fs-*
verktøy forfont-size
verktø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-grid
til visningsverktøy og nyegap
verktøy (.gap
) for CSS Grid og flexbox-oppsett. -
BreakingFjernet
.rounded-sm
ogrounded-lg
, og introduserte en ny skala av klasser,.rounded-0
til.rounded-3
. Se #31687 . -
Lagt til nye
line-height
verktøy:.lh-1
,.lh-sm
,.lh-base
og.lh-lg
. Se her . -
Flyttet
.d-none
verktøyet i CSS for å gi det mer vekt over andre skjermverktøy. -
Utvidet
.visually-hidden-focusable
hjelperen 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
by
tilx
i sideforhold. For eksempel.ratio-16by9
er nå.ratio-16x9
. - Vi har droppet
.embed-responsive-item
og 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-ratios
og verdiene er forenklet til å inkludere klassenavnet og prosentandelen somkey: value
paret. - CSS-variabler blir nå generert og inkludert for hver verdi i Sass-kartet. Endre
--bs-aspect-ratio
variabelen på for.ratio
å lage et tilpasset sideforhold .
- Klasser har fått nytt navn for å endre
-
Breaking "Skjermleser"-klasser er nå "visuelt skjulte" klasser .
- Endret Sass-filen fra
scss/helpers/_screenreaders.scss
tilscss/helpers/_visually-hidden.scss
- Omdøpt
.sr-only
og.sr-only-focusable
til.visually-hidden
og.visually-hidden-focusable
- Omdøpt
sr-only()
ogsr-only-focusable()
blandes tilvisually-hidden()
ogvisually-hidden-focusable()
.
- Endret Sass-filen fra
-
bootstrap-utilities.css
inkluderer 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-toggle
i stedet fordata-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"]')
-
popperConfig
kan 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
fallbackPlacements
endres 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()
.