Siirry pääsisältöön Siirry dokumenttien navigointiin
in English

Siirtyminen v5:een

Seuraa ja tarkista Bootstrap-lähdetiedostojen, -dokumentaation ja -komponenttien muutoksia, jotta voit siirtyä v4:stä v5:een.

Tällä sivulla

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 .

  • Murtumassacolor-yiq()Funktio ja siihen liittyvät muuttujat nimettiin uudelleen muotoon, color-contrast()koska se ei enää liity YIQ-väriavaruuteen. Katso #30168.

    • $yiq-contrasted-thresholdon nimetty uudelleen muotoon $min-contrast-ratio.
    • $yiq-text-darkja $yiq-text-lighton vastaavasti nimetty uudelleen muotoon $color-contrast-darkja $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ä kuin lg).
    • Vastaavasti myös toinen parametri media-breakpoint-between()käyttää itse keskeytyspistettä seuraavan keskeytyskohdan sijasta (esim. kohteen ja välillä olevien näkymäporttien media-between(sm, lg)sijaan ).media-breakpoint-between(sm, md)smlg

  • MurtumassaPoistettu tulostustyylit ja $enable-print-stylesmuuttuja. Tulostusnäytön luokat ovat edelleen noin. Katso #28339 .

  • MurtumassaPudotettu color(), theme-color(), ja gray()toimii muuttujien puolesta. Katso #29083 .

  • Murtumassatheme-color-level()Toiminto on nimetty uudelleen color-level()ja hyväksyy nyt minkä tahansa värin vain $theme-colorvärien sijaan. Katso #29083 Varo: color-level() putosi myöhemmin v5.0.0-alpha3.

  • MurtumassaNimetty uudelleen ja $enable-prefers-reduced-motion-media-querylyhyyden vuoksi .$enable-pointer-cursor-for-buttons$enable-reduced-motion$enable-button-pointers

  • MurtumassaSekoitin poistettiin bg-gradient-variant(). Käytä .bg-gradientluokkaa 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()

  • Murtumassascale-color()Toiminto nimettiin uudelleen muotoon shift-color(), jotta vältetään törmäys Sassin oman väriskaalaustoiminnon kanssa.

  • box-shadowmixins sallii nyt nullarvot ja pudota noneuseista argumenteista. Katso #30394 .

  • Mixinillä border-radius()on nyt oletusarvo.

Värijärjestelmä

  • Värijärjestelmä, joka toimi color-level()ja $theme-color-intervalpoistettiin uuden värijärjestelmän hyväksi. Kaikki koodikantaamme lighten()ja darken()toiminnot on korvattu tint-color()ja shade-color(). Nämä toiminnot sekoittavat värin joko valkoiseen tai mustaan ​​sen sijaan, että muuttaisivat sen vaaleutta tietyllä määrällä. Se shift-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-900arvosta $black.

  • Tukeaksemme värijärjestelmäämme olemme lisänneet uusia mukautettuja tint-color()ja shade-color()toimintoja värien sekoittamiseksi asianmukaisesti.

Verkkopäivitykset

  • Uusi keskeytyspiste! Lisätty uusi xxlkeskeytyskohta kohdalle 1400pxja 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 noin 24px, alas kohdasta 30px). 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-guttersvastaamaan .g-0uusia kouruapuohjelmia.

  • Sarakkeet eivät ole enää position: relativekäytössä, joten saatat joutua lisäämään .position-relativejoitain elementtejä palauttaaksesi toiminnan.

  • MurtumassaLopetti useita .order-*luokkia, jotka jäivät usein käyttämättä. Tarjoamme nyt vain .order-1pakkauksesta .order-5otettuja.

  • MurtumassaKomponentti pudotettiin, .mediakoska se voidaan helposti kopioida apuohjelmilla. Katso esimerkki #28265 ja flex utilities -sivulta .

  • Murtumassa bootstrap-grid.csskoskee nyt vain box-sizing: border-boxsaraketta yleisen laatikon koon nollaamisen sijaan. Näin ruudukkotyylejämme voidaan käyttää useammissa paikoissa ilman häiriöitä.

  • $enable-grid-classesei enää poista säilöluokkien luomista käytöstä. Katso #29146.

  • Mixin päivitettiin make-cololetusarvoisesti yhtäläisiksi sarakkeiksi ilman määritettyä kokoa.

Sisältö, uudelleenkäynnistys jne

  • RFS on nyt oletuksena käytössä. Otsikot, joissa käytetäänfont-size()mixinia, mukautuvat automaattisestifont-sizemittakaavaansa kuvaportin kanssa. Tämä ominaisuus oli aiemmin käytössä v4:ssä.

  • MurtumassaUudistimme näyttötypografiamme korvataksemme $display-*muuttujamme ja $display-font-sizesSass-kartalla. Poistettiin myös yksittäiset $display-*-weightmuuttujat yksittäiselle $display-font-weightja säädetylle font-sizes:lle.

  • Lisätty kaksi uutta .display-*otsikkokokoa .display-5ja .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-lightja .thead-darkhylätään .table-*vaihtoehtoluokkien hyväksi, joita voidaan käyttää kaikille taulukon elementeille ( thead, tbody, tfoot, tr, thja td).

  • Murtumassatable-row-variant()Mixin nimetään uudelleen ja table-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 -yja -x.

  • MurtumassaPudonnut .pre-scrollableluokka. 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-justifyluokka. Katso #29793

  • Palauta oletusvaaka padding-leftja elementit selaimen oletusasetuksista <ul>arvoon .<ol>40px2rem

  • Lisätty $enable-smooth-scroll, joka koskee scroll-behavior: smoothmaailmanlaajuisesti – paitsi käyttäjiä, jotka pyytävät vähennettyä liikettä mediakyselyn kautta prefers-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. startja endsijasta leftja right.

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-checkon nyt .form-check.
    • .custom-check.custom-switchon nyt .form-check.form-switch.
    • .custom-selecton nyt .form-select.
    • .custom-fileja .form-filene on korvattu mukautetuilla tyyleillä .form-control.
    • .custom-rangeon nyt .form-range.
    • Poistettu syntyperäinen .form-control-fileja .form-control-range.

  • MurtumassaPudonnut .input-group-appendja .input-group-prepend. Voit nyt vain lisätä painikkeita ja .input-group-textsyö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-validationluokka 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-textei enää aseta display, jolloin voit luoda tekstin tekstin tekstiä tai estää sen haluamallasi tavalla vaihtamalla HTML-elementtiä.

  • Vahvistuskuvakkeita ei enää käytetä <select>s:lle, jossa on multiple.

  • Uudelleenjärjestetty Sass-lähdetiedostot kohdassa scss/forms/, mukaan lukien syöttöryhmien tyylit.

Komponentit

  • Yhdistetyt paddingarvot hälytyksille, navigointipoluille, korteille, pudotusvalikoille, luetteloryhmille, modaaleille, ponnahdusikkunille ja työkaluvihjeille $spacermuuttujamme pohjalta. Katso #30564 .

Harmonikka

Hälytykset

  • Hälytyksissä on nyt esimerkkejä kuvakkeista .

  • Kustakin hälytyksestä poistettiin mukautetut tyylit <hr>s:lle, koska ne jo käyttävät currentColor.

Tunnusmerkit

  • MurtumassaHylättiin kaikki .badge-*taustaohjelmien väriluokat (esim. käytä .bg-primary:n sijaan .badge-primary).

  • MurtumassaPudotettu .badge-pill— käytä sen .rounded-pillsijaan apuohjelmaa.

  • MurtumassaKohdistus- ja tarkennustyylit poistettiin kohteille <a>ja <button>elementeille.

  • Parannettu oletustäyte merkkejä .25em/ .5emkohtaan .35em/ .65em.

  • Yksinkertaisti navigointipolkujen oletusulkonäköä poistamalla padding, background-colorja border-radius.

  • Lisätty uusi mukautettu CSS-ominaisuus --bs-breadcrumb-dividerhelppoa 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-checksen<input>ja yhdistämme sen minkä tahansa.btnluokkiin<label>. Katso #30650 . Tätä koskevat asiakirjat on siirretty Painikkeet-sivultamme uuteen Lomakkeet-osioon.

  • Murtumassa Pudotettu .btn-blockapuohjelmien takia. Sen sijaan, että käyttäisit .btn-blockpainiketta .btn, kääri painikkeet .d-gridja .gap-*apuohjelma, jotta voit sijoittaa ne tarvittaessa. Vaihda reagoiviin luokkiin hallitaksesi niitä entistä paremmin. Lue asiakirjoista joitain esimerkkejä.

  • Päivitettiin meidän button-variant()ja button-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-deckhyväksi. Kääri korttisi sarakeluokkiin ja lisää .row-cols-*pääsäiliö luodaksesi uudelleen korttipakkoja (mutta hallitsee paremmin reagoivaa kohdistusta).

  • MurtumassaPudotettiin muurarin .card-columnshyväksi. Katso #28922 .

  • Murtumassa.cardPerustettu harmonikka korvattiin uudella harmonikkakomponentilla .

Sulje-painike

  • MurtumassaNimetty uudelleen .closenimellä .btn-closevähemmän yleisnimi.

  • Sulje-painikkeet käyttävät nyt background-image(upotettua SVG &times;:tä) HTML:n a:n sijaan, mikä mahdollistaa helpomman mukauttamisen ilman, että sinun tarvitsee koskea merkintöihin.

  • Lisätty uusi .btn-close-whiteversio, filter: invert(1)joka mahdollistaa suuremman kontrastin hylkäämisen kuvakkeet tummemmilla taustoilla.

Romahdus

  • Haitarien rullaankkurointi poistettu.

  • Lisätty uusi .dropdown-menu-darkversio 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 ja data-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 flipvaihtoehto 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 autoClosevaihtoehdolla, 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-items-tekstiä käärittynä <li>.

Jumbotron

Listaa ryhmä

  • Luokkaan lisätty uudet nullmuuttujat font-size, font-weight, colorja :hover color..nav-link
  • MurtumassaNavigointipalkit vaativat nyt säilön sisällä (jotka yksinkertaistavat huomattavasti välivaatimukset ja vaaditaan CSS).

Offcanvas

Sivunumerointi

  • Sivutuslinkeissä on nyt muokattavissa olevia margin-left, jotka pyöristetään dynaamisesti kaikista kulmista, kun ne erotetaan toisistaan.

  • transitionSivutuslinkkeihin lisätty s.

Popovers

  • MurtumassaNimetty uudelleen .arrowoletusponnahdusmallissamme .popover-arrow.

  • whiteListVaihtoehto nimettiin uudelleen muotoon allowList.

Spinnerit

  • Spinnerit kunnioittavat nyt prefers-reduced-motion: reducehidastamalla 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: hiddenpaahtoleipäistä ja korvattu oikeilla border-radiusfunktioilla calc().

Työkaluvinkit

  • MurtumassaNimetty uudelleen .arrowoletustyökaluvihjemallissamme .tooltip-arrow.

  • MurtumassaOletusarvo fallbackPlacementson muutettu arvoon ['top', 'right', 'bottom', 'left']popper-elementtien paremman sijoittamisen vuoksi.

  • MurtumassawhiteListVaihtoehto nimettiin uudelleen muotoon allowList.

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-leftja .float-rightnimeksi .float-startja .float-end.
    • Nimetty uudelleen .border-leftja .border-rightnimeksi .border-startja .border-end.
    • Nimetty uudelleen .rounded-leftja .rounded-rightnimeksi .rounded-startja .rounded-end.
    • Nimetty uudelleen .ml-*ja .mr-*nimeksi .ms-*ja .me-*.
    • Nimetty uudelleen .pl-*ja .pr-*nimeksi .ps-*ja .pe-*.
    • Nimetty uudelleen .text-leftja .text-rightnimeksi .text-startja .text-end.

  • MurtumassaNegatiiviset marginaalit poistettu käytöstä oletuksena.

  • Lisätty uusi .bg-bodyluokka, jolla voit nopeasti asettaa <body>taustan lisäelementteihin.

  • Lisätty uudet sijaintiapuohjelmat kohteille , top, right, bottomja left. Arvot sisältävät 0, 50%, ja 100%jokaiselle omaisuudelle.

  • Lisätty uusia .translate-middle-xja .translate-middle-yapuohjelmia absoluuttisten/kiinteästi sijoitettujen elementtien vaakasuoraan tai pystysuoraan keskittämiseen.

  • Lisätty uusia border-widthapuohjelmia .

  • MurtumassaNimetty uudelleen .text-monospacemuotoon .font-monospace.

  • MurtumassaPoistettu .text-hide, koska se on vanhentunut tapa piilottaa tekstiä, jota ei pitäisi enää käyttää.

  • Lisätty .fs-*apuohjelmia varten font-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-gridja uusiin gapapuohjelmiin ( .gap) CSS Grid- ja flexbox-asetteluille.

  • MurtumassaPoistettiin .rounded-smja rounded-lg, ja otettiin käyttöön uusi luokka .rounded-0- asteikko .rounded-3. Katso #31687 .

  • Lisätty uusia line-heightapuohjelmia: .lh-1, .lh-sm, .lh-baseja .lh-lg. Katso tästä .

  • Siirrettiin .d-noneapuohjelma CSS-palvelussamme, jotta se olisi enemmän painoarvoa muihin näyttöapuohjelmiin verrattuna.

  • Apua laajennettiin .visually-hidden-focusabletyö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 bymuuttamiseksi . xEsimerkiksi .ratio-16by9on nyt .ratio-16x9.
    • Olemme hylänneet .embed-responsive-itemja 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-ratioskartta on nimetty uudelleen $aspect-ratiosja sen arvoja on yksinkertaistettu sisältämään luokan nimi ja prosenttiosuus key: valueparina.
    • CSS-muuttujat luodaan nyt ja sisällytetään jokaiselle Sass-kartan arvolle. Muokkaa --bs-aspect-ratiomuuttujaa , jotta .ratiovoit luoda mukautetun kuvasuhteen .

  • Murtumassa "Näytönlukija"-luokat ovat nyt "visuaalisesti piilotettuja" luokkia .

    • Vaihdettiin Sass-tiedosto arvosta scss/helpers/_screenreaders.scssmuotoonscss/helpers/_visually-hidden.scss
    • Nimetty uudelleen .sr-onlyja .sr-only-focusablenimeksi .visually-hiddenja.visually-hidden-focusable
    • Nimetty uudelleen sr-only()ja sr-only-focusable()sekoittuu muotoon visually-hidden()ja visually-hidden-focusable().

  • bootstrap-utilities.csssisä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-toggleesimerkiksi data-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"]')

  • popperConfigvoidaan 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 fallbackPlacementsmuutetaan 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().