Siirtyminen v5:een
Seuraa ja tarkista Bootstrap-lähdetiedostojen, -dokumentaation ja -komponenttien muutoksia, jotta voit siirtyä v4:stä v5:een.
Riippuvuudet
- jQuery poistettiin.
- Päivitetty Popper v1.x:stä Popper v2.x:ään.
- Korvattiin Libsass Dart Sassilla, koska Libsassin Sass-kääntäjämme oli vanhentunut.
- Siirtyi Jekyllistä Hugoon dokumentaatiomme rakentamiseksi
Selaimen tuki
- Internet Explorer 10 ja 11 poistettiin
- Microsoft Edge hylätty < 16 (Legacy Edge)
- Pudotettu Firefox < 60
- Pudonnut Safari < 12
- Poistettu iOS Safari < 12
- Pudonnut kromi < 60
Muutoksia dokumentaatioon
- Uudelleen suunniteltu kotisivu, asiakirjojen asettelu ja alatunniste.
- Lisätty uusi pakettiopas .
- Lisätty uusi Mukauta-osio , joka korvaa v4:n Teema-sivun ja sisältää uusia tietoja Sassista, yleisistä määritysvaihtoehdoista, värimalleista, CSS-muuttujista ja paljon muuta.
- Kaikki lomakedokumentaatio järjestettiin uudelleen uudeksi Lomakkeet-osioon ja jaettiin sisältö tarkempiin sivuihin.
- Samoin päivitettiin Asettelu-osio täsmentämään ruudukon sisältöä selkeämmin.
- Nimettiin Navs-komponenttisivu uudelleen nimellä Navs & Tabs.
- "Sekit"-sivu nimettiin uudelleen "Sekit ja radiot".
- Suunnittelemme navigointipalkin uudelleen ja lisäsimme uuden alivalvontalaitteen, joka helpottaa sivustojemme ja dokumenttiversioiden liikkumista.
- Lisätty uusi pikanäppäin hakukenttään: Ctrl + /.
Sass
-
Olemme luopuneet oletusarvoisista Sass-karttayhdistelmistä helpottaaksemme tarpeettomien arvojen poistamista. Muista, että sinun on nyt määritettävä kaikki Sass-karttojen arvot, kuten
$theme-colors
. Katso kuinka käsitellä Sass-karttoja . -
Murtumassa
color-yiq()
Funktio ja siihen liittyvät muuttujat nimettiin uudelleen muotoon,color-contrast()
koska se ei enää liity YIQ-väriavaruuteen. Katso #30168.$yiq-contrasted-threshold
on nimetty uudelleen muotoon$min-contrast-ratio
.$yiq-text-dark
ja$yiq-text-light
on vastaavasti nimetty uudelleen muotoon$color-contrast-dark
ja$color-contrast-light
.
-
MurtumassaMediakyselyn mixins-parametrit ovat muuttuneet loogisemman lähestymistavan vuoksi.
media-breakpoint-down()
käyttää itse keskeytyspistettä seuraavan keskeytyskohdan sijasta (esim.media-breakpoint-down(lg)
sen sijaan, ettämedia-breakpoint-down(md)
kohteena on pienempiä kuinlg
).- Vastaavasti myös toinen parametri
media-breakpoint-between()
käyttää itse keskeytyspistettä seuraavan keskeytyskohdan sijasta (esim. kohteen ja välillä olevien näkymäporttienmedia-between(sm, lg)
sijaan ).media-breakpoint-between(sm, md)
sm
lg
-
MurtumassaPoistettu tulostustyylit ja
$enable-print-styles
muuttuja. Tulostusnäytön luokat ovat edelleen noin. Katso #28339 . -
MurtumassaPudotettu
color()
,theme-color()
, jagray()
toimii muuttujien puolesta. Katso #29083 . -
Murtumassa
theme-color-level()
Toiminto on nimetty uudelleencolor-level()
ja hyväksyy nyt minkä tahansa värin vain$theme-color
värien sijaan. Katso #29083 Varo:color-level()
putosi myöhemminv5.0.0-alpha3
. -
MurtumassaNimetty uudelleen ja
$enable-prefers-reduced-motion-media-query
lyhyyden vuoksi .$enable-pointer-cursor-for-buttons
$enable-reduced-motion
$enable-button-pointers
-
MurtumassaSekoitin poistettiin
bg-gradient-variant()
. Käytä.bg-gradient
luokkaa liukuvärien lisäämiseen elementteihin luotujen.bg-gradient-*
luokkien sijaan. -
Murtumassa Poistetut aiemmin käytöstä poistetut miksaukset:
hover
,hover-focus
,plain-hover-focus
, jahover-focus-active
float()
form-control-mixin()
nav-divider()
retina-img()
text-hide()
(poisti myös siihen liittyvän hyödyllisyysluokan,.text-hide
)visibility()
form-control-focus()
-
Murtumassa
scale-color()
Toiminto nimettiin uudelleen muotoonshift-color()
, jotta vältetään törmäys Sassin oman väriskaalaustoiminnon kanssa. -
box-shadow
mixins sallii nytnull
arvot ja pudotanone
useista argumenteista. Katso #30394 . -
Mixinillä
border-radius()
on nyt oletusarvo.
Värijärjestelmä
-
Värijärjestelmä, joka toimi
color-level()
ja$theme-color-interval
poistettiin uuden värijärjestelmän hyväksi. Kaikki koodikantaammelighten()
jadarken()
toiminnot on korvattutint-color()
jashade-color()
. Nämä toiminnot sekoittavat värin joko valkoiseen tai mustaan sen sijaan, että muuttaisivat sen vaaleutta tietyllä määrällä. Seshift-color()
joko sävyttää tai varjostaa väriä riippuen siitä, onko sen painoparametri positiivinen vai negatiivinen. Katso #30622 lisätietoja varten. -
Lisätty uusia sävyjä ja sävyjä jokaiselle värille, tarjoten jokaiselle perusvärille yhdeksän erillistä väriä uusina Sass-muuttujina.
-
Parannettu värikontrasti. Värikontrastisuhde 3:1:stä 4,5:1:een ja päivitetyt siniset, vihreät, syaanit ja vaaleanpunaiset värit varmistavat WCAG 2.1 AA -kontrastin. Muutti myös värikontrastivärimme
$gray-900
arvosta$black
. -
Tukeaksemme värijärjestelmäämme olemme lisänneet uusia mukautettuja
tint-color()
jashade-color()
toimintoja värien sekoittamiseksi asianmukaisesti.
Verkkopäivitykset
-
Uusi keskeytyspiste! Lisätty uusi
xxl
keskeytyskohta kohdalle1400px
ja ylöspäin. Ei muutoksia kaikkiin muihin keskeytyskohtiin. -
Parannetut vesikourut. Kourut on nyt asetettu rems-muotoon, ja ne ovat kapeampia kuin v4 (
1.5rem
, tai noin24px
, alas kohdasta30px
). Tämä kohdistaa verkkojärjestelmämme räystäskourut välitystyökalujemme kanssa.- Lisätty uusi kouruluokka (
.g-*
,.gx-*
, ja.gy-*
) vaaka-/pystykourujen, vaakakourujen ja pystykourujen ohjaamiseen. - MurtumassaNimetty uudelleen
.no-gutters
vastaamaan.g-0
uusia kouruapuohjelmia.
- Lisätty uusi kouruluokka (
-
Sarakkeet eivät ole enää
position: relative
käytössä, joten saatat joutua lisäämään.position-relative
joitain elementtejä palauttaaksesi toiminnan. -
MurtumassaLopetti useita
.order-*
luokkia, jotka jäivät usein käyttämättä. Tarjoamme nyt vain.order-1
pakkauksesta.order-5
otettuja. -
MurtumassaKomponentti pudotettiin,
.media
koska se voidaan helposti kopioida apuohjelmilla. Katso esimerkki #28265 ja flex utilities -sivulta . -
Murtumassa
bootstrap-grid.css
koskee nyt vainbox-sizing: border-box
saraketta yleisen laatikon koon nollaamisen sijaan. Näin ruudukkotyylejämme voidaan käyttää useammissa paikoissa ilman häiriöitä. -
$enable-grid-classes
ei enää poista säilöluokkien luomista käytöstä. Katso #29146. -
Mixin päivitettiin
make-col
oletusarvoisesti yhtäläisiksi sarakkeiksi ilman määritettyä kokoa.
Sisältö, uudelleenkäynnistys jne
-
RFS on nyt oletuksena käytössä. Otsikot, joissa käytetään
font-size()
mixinia, mukautuvat automaattisestifont-size
mittakaavaansa kuvaportin kanssa. Tämä ominaisuus oli aiemmin käytössä v4:ssä. -
MurtumassaUudistimme näyttötypografiamme korvataksemme
$display-*
muuttujamme ja$display-font-sizes
Sass-kartalla. Poistettiin myös yksittäiset$display-*-weight
muuttujat yksittäiselle$display-font-weight
ja säädetyllefont-size
s:lle. -
Lisätty kaksi uutta
.display-*
otsikkokokoa.display-5
ja.display-6
. -
Linkit on alleviivattu oletusarvoisesti (ei vain hiiren ollessa päällä), elleivät ne ole osa tiettyjä osia.
-
Uudelleen suunnitellut taulukot päivittämään tyylinsä ja rakentamaan ne uudelleen CSS-muuttujilla, jotta tyyliä voidaan hallita paremmin.
-
MurtumassaSisäkkäiset taulukot eivät enää peri tyylejä.
-
Murtumassa
.thead-light
ja.thead-dark
hylätään.table-*
vaihtoehtoluokkien hyväksi, joita voidaan käyttää kaikille taulukon elementeille (thead
,tbody
,tfoot
,tr
,th
jatd
). -
Murtumassa
table-row-variant()
Mixin nimetään uudelleen jatable-variant()
hyväksyy vain 2 parametria:$color
(värin nimi) ja$value
(värikoodi). Reunuksen väri ja korostusvärit lasketaan automaattisesti taulukon tekijämuuttujien perusteella. -
Jaa taulukon solujen täytemuuttujat muotoihin
-y
ja-x
. -
MurtumassaPudonnut
.pre-scrollable
luokka. Katso #29135 -
Murtumassa
.text-*
apuohjelmat eivät enää lisää hover- ja focus -tiloja linkkeihin..link-*
sen sijaan voidaan käyttää auttajaluokkia. Katso #29267 -
MurtumassaPudonnut
.text-justify
luokka. Katso #29793 -
Murtumassa
<hr>
elementtejä käytetään nytheight
sen sijaan, että ne tukevat attribuuttiaborder
paremmin .size
Tämä mahdollistaa myös täyteapuohjelmien käytön paksumpien jakajien luomiseksi (esim.<hr class="py-1">
). -
Palauta oletusvaaka
padding-left
ja elementit selaimen oletusasetuksista<ul>
arvoon .<ol>
40px
2rem
-
Lisätty
$enable-smooth-scroll
, joka koskeescroll-behavior: smooth
maailmanlaajuisesti – paitsi käyttäjiä, jotka pyytävät vähennettyä liikettä mediakyselyn kauttaprefers-reduced-motion
. Katso #31877
RTL
- Vaakasuuntaiset muuttujat, apuohjelmat ja mixiinit on kaikki nimetty uudelleen käyttämään loogisia ominaisuuksia, kuten flexbox-asetteluissa esiintyviä ominaisuuksia, esim.
start
jaend
sijastaleft
jaright
.
Lomakkeet
-
Lisätty uusia kelluvia lomakkeita! Olemme edistäneet kelluvien tarrojen esimerkkiä täysin tuetuiksi lomakekomponenteiksi. Katso uusi Kelluvat tarrat -sivu.
-
Murtumassa Yhdistetyt alkuperäiset ja mukautetut lomakeelementit. Valintaruudut, radiot, valinnat ja muut syötteet, joissa oli alkuperäisiä ja mukautettuja luokkia v4:ssä, on yhdistetty. Nyt lähes kaikki lomakeelementtimme ovat täysin mukautettuja, useimmat ilman mukautettua HTML-koodia.
.custom-check
on nyt.form-check
..custom-check.custom-switch
on nyt.form-check.form-switch
..custom-select
on nyt.form-select
..custom-file
ja.form-file
ne on korvattu mukautetuilla tyyleillä.form-control
..custom-range
on nyt.form-range
.- Poistettu syntyperäinen
.form-control-file
ja.form-control-range
.
-
MurtumassaPudonnut
.input-group-append
ja.input-group-prepend
. Voit nyt vain lisätä painikkeita ja.input-group-text
syöteryhmien suorina lapsina. -
Pitkäaikainen puuttuvan rajan säde syöteryhmässä, jossa on validointipalautevirhe, on vihdoin korjattu lisäämällä ylimääräinen
.has-validation
luokka vahvistusta sisältäviin syöttöryhmiin. -
Murtumassa Poistettiin lomakekohtaiset asetteluluokat ruudukkojärjestelmästämme. Käytä verkkoa ja apuohjelmia
.form-group
,.form-row
, tai.form-inline
. -
MurtumassaLomaketarrat vaativat nyt
.form-label
. -
Murtumassa
.form-text
ei enää asetadisplay
, jolloin voit luoda tekstin tekstin tekstiä tai estää sen haluamallasi tavalla vaihtamalla HTML-elementtiä. -
Vahvistuskuvakkeita ei enää käytetä
<select>
s:lle, jossa onmultiple
. -
Uudelleenjärjestetty Sass-lähdetiedostot kohdassa
scss/forms/
, mukaan lukien syöttöryhmien tyylit.
Komponentit
- Yhdistetyt
padding
arvot hälytyksille, navigointipoluille, korteille, pudotusvalikoille, luetteloryhmille, modaaleille, ponnahdusikkunille ja työkaluvihjeille$spacer
muuttujamme pohjalta. Katso #30564 .
Harmonikka
- Lisätty uusi harmonikkakomponentti .
Hälytykset
-
Hälytyksissä on nyt esimerkkejä kuvakkeista .
-
Kustakin hälytyksestä poistettiin mukautetut tyylit
<hr>
s:lle, koska ne jo käyttävätcurrentColor
.
Tunnusmerkit
-
MurtumassaHylättiin kaikki
.badge-*
taustaohjelmien väriluokat (esim. käytä.bg-primary
:n sijaan.badge-primary
). -
MurtumassaPudotettu
.badge-pill
— käytä sen.rounded-pill
sijaan apuohjelmaa. -
MurtumassaKohdistus- ja tarkennustyylit poistettiin kohteille
<a>
ja<button>
elementeille. -
Parannettu oletustäyte merkkejä
.25em
/.5em
kohtaan.35em
/.65em
.
korppujauhoja
-
Yksinkertaisti navigointipolkujen oletusulkonäköä poistamalla
padding
,background-color
jaborder-radius
. -
Lisätty uusi mukautettu CSS-ominaisuus
--bs-breadcrumb-divider
helppoa mukauttamista varten ilman, että CSS:ää tarvitsee kääntää uudelleen.
Painikkeet
-
Murtumassa Vaihtopainikkeet , joissa on valintaruutuja tai radioita, eivät enää vaadi JavaScriptiä ja niissä on uudet merkinnät. Emme enää vaadi kääreelementtiä, lisäämme
.btn-check
sen<input>
ja yhdistämme sen minkä tahansa.btn
luokkiin<label>
. Katso #30650 . Tätä koskevat asiakirjat on siirretty Painikkeet-sivultamme uuteen Lomakkeet-osioon. -
Murtumassa Pudotettu
.btn-block
apuohjelmien takia. Sen sijaan, että käyttäisit.btn-block
painiketta.btn
, kääri painikkeet.d-grid
ja.gap-*
apuohjelma, jotta voit sijoittaa ne tarvittaessa. Vaihda reagoiviin luokkiin hallitaksesi niitä entistä paremmin. Lue asiakirjoista joitain esimerkkejä. -
Päivitettiin meidän
button-variant()
jabutton-outline-variant()
mixins tukemaan lisäparametreja. -
Päivitetyt painikkeet lisäävät kontrastia hiiri- ja aktiivisissa tiloissa.
-
Pois käytöstä poistetuissa painikkeissa on nyt
pointer-events: none;
.
Kortti
-
MurtumassaPudonnut verkkomme
.card-deck
hyväksi. Kääri korttisi sarakeluokkiin ja lisää.row-cols-*
pääsäiliö luodaksesi uudelleen korttipakkoja (mutta hallitsee paremmin reagoivaa kohdistusta). -
MurtumassaPudotettiin muurarin
.card-columns
hyväksi. Katso #28922 . -
Murtumassa
.card
Perustettu harmonikka korvattiin uudella harmonikkakomponentilla .
Karuselli
-
Lisätty uusi
.carousel-dark
versio tummalle tekstille, säätimille ja ilmaisimille (sopii vaaleammille taustoille). -
Karuselliohjaimien chevron-kuvakkeet on korvattu uusilla Bootstrap Iconsin SVG-tiedostoilla .
Sulje-painike
-
MurtumassaNimetty uudelleen
.close
nimellä.btn-close
vähemmän yleisnimi. -
Sulje-painikkeet käyttävät nyt
background-image
(upotettua SVG×
:tä) HTML:n a:n sijaan, mikä mahdollistaa helpomman mukauttamisen ilman, että sinun tarvitsee koskea merkintöihin. -
Lisätty uusi
.btn-close-white
versio,filter: invert(1)
joka mahdollistaa suuremman kontrastin hylkäämisen kuvakkeet tummemmilla taustoilla.
Romahdus
- Haitarien rullaankkurointi poistettu.
Pudotusvalikosta
-
Lisätty uusi
.dropdown-menu-dark
versio ja siihen liittyvät muuttujat pyynnöstä tummiin pudotusvalikoihin. -
Lisätty uusi muuttuja kohteelle
$dropdown-padding-x
. -
Tummenna pudotusvalikon jakajaa kontrastin parantamiseksi.
-
MurtumassaKaikki avattavan valikon tapahtumat käynnistetään nyt pudotusvalikon vaihtopainikkeella ja kuplitetaan sitten yläelementtiin.
-
Pudotusvalikoissa on nyt
data-bs-popper="static"
määrite asetettuna, kun pudotusvalikon sijainti on staattinen jadata-bs-popper="none"
kun avattava valikko on navigointipalkissa. Tämän lisää JavaScript, ja se auttaa meitä käyttämään mukautettuja sijaintityylejä häiritsemättä Popperin paikannusta. -
MurtumassaPoistettu
flip
vaihtoehto pudotusvalikon laajennukselle alkuperäisen Popper-kokoonpanon hyväksi. Voit nyt poistaa kääntökäyttäytymisen käytöstä välittämällä tyhjän taulukon kääntömuuntimenfallbackPlacements
valinnalle . -
Pudotusvalikoita voidaan nyt napsauttaa uudella
autoClose
vaihtoehdolla, jolla voidaan käsitellä automaattisen sulkemisen toimintaa . Voit käyttää tätä vaihtoehtoa hyväksyäksesi napsautuksen avattavan valikon sisällä tai ulkopuolella tehdäksesi siitä interaktiivisen. -
Avattavat valikot tukevat nyt
.dropdown-item
s-tekstiä käärittynä<li>
.
Jumbotron
- MurtumassaPudotettiin jumbotron-komponentti, koska se voidaan kopioida apuohjelmilla. Katso esittely uudesta Jumbotron-esimerkistämme.
Listaa ryhmä
- Listaryhmiin lisätty uusi
.list-group-numbered
muokkaaja .
Navit ja välilehdet
- Luokkaan lisätty uudet
null
muuttujatfont-size
,font-weight
,color
ja:hover
color
..nav-link
Navigointipalkit
- MurtumassaNavigointipalkit vaativat nyt säilön sisällä (jotka yksinkertaistavat huomattavasti välivaatimukset ja vaaditaan CSS).
Offcanvas
- Lisätty uusi offcanvas-komponentti .
Sivunumerointi
-
Sivutuslinkeissä on nyt muokattavissa olevia
margin-left
, jotka pyöristetään dynaamisesti kaikista kulmista, kun ne erotetaan toisistaan. -
transition
Sivutuslinkkeihin lisätty s.
Popovers
-
MurtumassaNimetty uudelleen
.arrow
oletusponnahdusmallissamme.popover-arrow
. -
whiteList
Vaihtoehto nimettiin uudelleen muotoonallowList
.
Spinnerit
-
Spinnerit kunnioittavat nyt
prefers-reduced-motion: reduce
hidastamalla animaatioita. Katso #31882 . -
Parannettu kehrän pystysuuntainen kohdistus.
Paahtoleipää
-
Paahtoleipää voidaan nyt sijoittaa paikannusapuohjelmien avulla
.toast-container
. -
Paahtoleivän oletuskestoksi muutettu 5 sekuntia.
-
Poistettu
overflow: hidden
paahtoleipäistä ja korvattu oikeillaborder-radius
funktioillacalc()
.
Työkaluvinkit
-
MurtumassaNimetty uudelleen
.arrow
oletustyökaluvihjemallissamme.tooltip-arrow
. -
MurtumassaOletusarvo
fallbackPlacements
on muutettu arvoon['top', 'right', 'bottom', 'left']
popper-elementtien paremman sijoittamisen vuoksi. -
Murtumassa
whiteList
Vaihtoehto nimettiin uudelleen muotoonallowList
.
Apuohjelmat
-
MurtumassaUseita apuohjelmia nimettiin uudelleen käyttämään loogisia ominaisuusnimiä suuntanimien sijaan lisäten RTL-tukea:
- Nimetty uudelleen
.left-*
ja.right-*
nimeksi.start-*
ja.end-*
. - Nimetty uudelleen
.float-left
ja.float-right
nimeksi.float-start
ja.float-end
. - Nimetty uudelleen
.border-left
ja.border-right
nimeksi.border-start
ja.border-end
. - Nimetty uudelleen
.rounded-left
ja.rounded-right
nimeksi.rounded-start
ja.rounded-end
. - Nimetty uudelleen
.ml-*
ja.mr-*
nimeksi.ms-*
ja.me-*
. - Nimetty uudelleen
.pl-*
ja.pr-*
nimeksi.ps-*
ja.pe-*
. - Nimetty uudelleen
.text-left
ja.text-right
nimeksi.text-start
ja.text-end
.
- Nimetty uudelleen
-
MurtumassaNegatiiviset marginaalit poistettu käytöstä oletuksena.
-
Lisätty uusi
.bg-body
luokka, jolla voit nopeasti asettaa<body>
taustan lisäelementteihin. -
Lisätty uudet sijaintiapuohjelmat kohteille ,
top
,right
,bottom
jaleft
. Arvot sisältävät0
,50%
, ja100%
jokaiselle omaisuudelle. -
Lisätty uusia
.translate-middle-x
ja.translate-middle-y
apuohjelmia absoluuttisten/kiinteästi sijoitettujen elementtien vaakasuoraan tai pystysuoraan keskittämiseen. -
Lisätty uusia
border-width
apuohjelmia . -
MurtumassaNimetty uudelleen
.text-monospace
muotoon.font-monospace
. -
MurtumassaPoistettu
.text-hide
, koska se on vanhentunut tapa piilottaa tekstiä, jota ei pitäisi enää käyttää. -
Lisätty
.fs-*
apuohjelmia vartenfont-size
(RFS käytössä). Nämä käyttävät samaa mittakaavaa kuin HTML:n oletusotsikot (1-6, suuresta pieneen), ja niitä voidaan muokata Sass-kartalla. -
Murtumassa
.font-weight-*
Apuohjelmat nimettiin uudelleen.fw-*
lyhyyden ja johdonmukaisuuden vuoksi. -
Murtumassa
.font-style-*
Apuohjelmat nimettiin uudelleen.fst-*
lyhyyden ja johdonmukaisuuden vuoksi. -
Lisätty näyttöapuohjelmiin
.d-grid
ja uusiingap
apuohjelmiin (.gap
) CSS Grid- ja flexbox-asetteluille. -
MurtumassaPoistettiin
.rounded-sm
jarounded-lg
, ja otettiin käyttöön uusi luokka.rounded-0
- asteikko.rounded-3
. Katso #31687 . -
Lisätty uusia
line-height
apuohjelmia:.lh-1
,.lh-sm
,.lh-base
ja.lh-lg
. Katso tästä . -
Siirrettiin
.d-none
apuohjelma CSS-palvelussamme, jotta se olisi enemmän painoarvoa muihin näyttöapuohjelmiin verrattuna. -
Apua laajennettiin
.visually-hidden-focusable
työskentelemään myös konteissa käyttämällä:focus-within
.
Auttajat
-
Murtumassa Responsiiviset upotusavustajat on nimetty uudelleen suhde-avustimiksi , joilla on uudet luokkien nimet ja parannettu käyttäytyminen sekä hyödyllinen CSS-muuttuja.
- Luokat on nimetty uudelleen muotosuhteen
by
muuttamiseksi .x
Esimerkiksi.ratio-16by9
on nyt.ratio-16x9
. - Olemme hylänneet
.embed-responsive-item
ja elementtiryhmän valitsimen yksinkertaisemman.ratio > *
valitsimen hyväksi. Enempää luokkaa ei tarvita, ja suhdeapuohjelma toimii nyt minkä tahansa HTML-elementin kanssa. - Sass -
$embed-responsive-aspect-ratios
kartta on nimetty uudelleen$aspect-ratios
ja sen arvoja on yksinkertaistettu sisältämään luokan nimi ja prosenttiosuuskey: value
parina. - CSS-muuttujat luodaan nyt ja sisällytetään jokaiselle Sass-kartan arvolle. Muokkaa
--bs-aspect-ratio
muuttujaa , jotta.ratio
voit luoda mukautetun kuvasuhteen .
- Luokat on nimetty uudelleen muotosuhteen
-
Murtumassa "Näytönlukija"-luokat ovat nyt "visuaalisesti piilotettuja" luokkia .
- Vaihdettiin Sass-tiedosto arvosta
scss/helpers/_screenreaders.scss
muotoonscss/helpers/_visually-hidden.scss
- Nimetty uudelleen
.sr-only
ja.sr-only-focusable
nimeksi.visually-hidden
ja.visually-hidden-focusable
- Nimetty uudelleen
sr-only()
jasr-only-focusable()
sekoittuu muotoonvisually-hidden()
javisually-hidden-focusable()
.
- Vaihdettiin Sass-tiedosto arvosta
-
bootstrap-utilities.css
sisältää nyt myös avustajamme. Apuohjelmia ei enää tarvitse tuoda mukautettuina koontiversioina.
JavaScript
-
Poistettiin jQuery-riippuvuus ja kirjoitettiin uudelleen laajennukset tavalliseen JavaScriptiin.
-
MurtumassaKaikkien JavaScript-laajennusten tietomääritteet on nyt jaettu nimiavaruuteen, jotta Bootstrap-toiminnot voidaan erottaa kolmansista osapuolista ja omasta koodistasi. Käytämme
data-bs-toggle
esimerkiksidata-toggle
. -
Kaikki laajennukset voivat nyt hyväksyä CSS-valitsimen ensimmäisenä argumenttina. Voit joko välittää DOM-elementin tai minkä tahansa kelvollisen CSS-valitsimen luodaksesi laajennuksen uuden esiintymän:
var modal = new bootstrap.Modal('#myModal') var dropdown = new bootstrap.Dropdown('[data-bs-toggle="dropdown"]')
-
popperConfig
voidaan välittää funktiona, joka hyväksyy Bootstrapin Popperin oletusasetuksen argumenttina, jotta voit yhdistää tämän oletuskokoonpanon haluamallasi tavalla. Koskee avattavia valikoita, ponnahdusikkunoita ja työkaluvihjeitä. -
Oletusarvo
fallbackPlacements
muutetaan arvoon['top', 'right', 'bottom', 'left']
Popper-elementtien paremman sijoittamisen vuoksi. Koskee avattavia valikoita, ponnahdusikkunoita ja työkaluvihjeitä. -
Poistettu alaviiva julkisista staattisista menetelmistä, kuten
_getInstance()
→getInstance()
.