Siirtyminen v5:een

v5.2.0

Uudistettu muotoilu

Bootstrap v5.2.0 sisältää hienovaraisen suunnittelupäivityksen useille komponenteille ja ominaisuuksille koko projektin aikana, erityisesti border-radiuspainikkeiden ja lomakesäätimien hienostuneiden arvojen avulla . Dokumentaatiomme on myös päivitetty uudella kotisivulla, yksinkertaisemmalla asiakirjojen asettelulla, joka ei enää kutista sivupalkin osia, ja näkyvämmillä esimerkeillä Bootstrap-kuvakkeista .

Lisää CSS-muuttujia

Olemme päivittäneet kaikki osamme käyttämään CSS-muuttujia. Vaikka Sass on edelleen kaiken perusta, jokainen komponentti on päivitetty sisältämään CSS-muuttujat komponenttien perusluokissa (esim. .btn), mikä mahdollistaa Bootstrapin reaaliaikaisemman mukauttamisen. Myöhemmissä julkaisuissa jatkamme CSS-muuttujien käytön laajentamista ulkoasuun, lomakkeisiin, apuohjelmiin ja apuohjelmiin. Lue lisää kunkin komponentin CSS-muuttujista niiden vastaavilta dokumentaatiosivuilta.

CSS-muuttujamme käyttö on jossain määrin epätäydellistä Bootstrap 6:een asti. Vaikka haluaisimmekin ottaa nämä käyttöön kokonaisuudessaan kautta linjan, ne ovat vaarassa aiheuttaa rikkoutuvia muutoksia. Esimerkiksi $alert-border-width: var(--bs-border-width)lähdekoodimme asettaminen katkaisee mahdollisen Sassin omassa koodissasi, jos niin $alert-border-width * 2jostain syystä tekisit.

Näin ollen pyrimme jatkossakin mahdollisuuksien mukaan käyttämään lisää CSS-muuttujia, mutta huomaa, että toteutus saattaa olla hieman rajoitettua v5:ssä.

Uusi_maps.scss

Bootstrap v5.2.0 esitteli uuden Sass-tiedoston, jossa on _maps.scss. Se hakee useita Sass-karttoja _variables.scsskorjatakseen ongelman, jossa alkuperäisen kartan päivityksiä ei sovellettu niitä laajentaviin toissijaisiin karttoihin. Esimerkiksi päivityksiä $theme-colorsei käytetty muihin teemakarttoihin, joihin perustuivat $theme-colors, mikä rikkoi tärkeimmät mukautustyönkulut. Lyhyesti sanottuna Sassilla on rajoitus, jonka mukaan kun oletusmuuttujaa tai karttaa on käytetty , sitä ei voi päivittää. Samanlainen puute on CSS-muuttujien kanssa, kun niitä käytetään muiden CSS-muuttujien muodostamiseen.

Tästä syystä Bootstrapin muuttuvien mukautusten on tultava jälkeen @import "functions", mutta ennen @import "variables"ja loput tuontipinostamme. Sama pätee Sass-karttoihin – sinun on ohitettava oletusasetukset ennen kuin niitä käytetään. Seuraavat kartat on siirretty uuteen _maps.scss:

• $theme-colors-rgb
• $utilities-colors
• $utilities-text
• $utilities-text-colors
• $utilities-bg
• $utilities-bg-colors
• $negative-spacers
• $gutters

Mukautettujen Bootstrap CSS -versioidesi pitäisi nyt näyttää suunnilleen tältä erillisen karttatuonnin yhteydessä.

  // Functions come first
  @import "functions";

  // Optional variable overrides here
+ $custom-color: #df711b;
+ $custom-theme-colors: (
+   "custom": $custom-color
+ );

  // Variables come next
  @import "variables";

+ // Optional Sass map overrides here
+ $theme-colors: map-merge($theme-colors, $custom-theme-colors);
+
+ // Followed by our default maps
+ @import "maps";
+
  // Rest of our imports
  @import "mixins";
  @import "utilities";
  @import "root";
  @import "reboot";
  // etc

Uudet apuohjelmat

• Laajennetut font-weightapuohjelmat puolilihavoituille .fw-semiboldfonteille.
• Laajennetut border-radiusapuohjelmat sisältävät kaksi uutta kokoa .rounded-4ja .rounded-5lisää vaihtoehtoja.

Lisämuutoksia

• Uusi $enable-container-classesvaihtoehto esitelty. — Nyt kun valitset kokeellisen CSS-ruudukon asettelun, .container-*luokat käännetään edelleen, ellei tätä asetusta ole asetettu arvoon false. Myös kontit säilyttävät nyt kouruarvonsa.

• Offcanvas-komponentilla on nyt responsiivisia muunnelmia . Alkuperäinen .offcanvasluokka pysyy ennallaan – se piilottaa sisällön kaikissa katseluporteissa. Muuta .offcanvasluokka mille tahansa .offcanvas-{sm|md|lg|xl|xxl}luokaksi, jotta se olisi reagoiva.

• Paksummat pöydänjakajat ovat nyt valittavissa. — Olemme poistaneet paksumman ja vaikeammin ohitettavan taulukkoryhmien välisen rajan ja siirtäneet sen valinnaiseen luokkaan, jota voit hakea, .table-group-divider. Katso esimerkki taulukkodokumenteista.

• Scrollspy on kirjoitettu uudelleen käyttämään Intersection Observer -sovellusliittymää , mikä tarkoittaa, että et enää tarvitse suhteellisia ylätason kääreitä, vanhentuneitaoffsetmäärityksiä ja paljon muuta. Katso, että Scrollspy-toteutukset ovat tarkempia ja johdonmukaisempia navigointikorostuksessa.

• Ponnahdusikkunat ja työkaluvihjeet käyttävät nyt CSS-muuttujia. Jotkut CSS-muuttujat on päivitetty Sass-vastineistaan ​​muuttujien määrän vähentämiseksi. Tämän seurauksena kolme muuttujaa on poistettu käytöstä tässä julkaisussa: $popover-arrow-color, $popover-arrow-outer-color, ja $tooltip-arrow-color.

• Lisätty uusia .text-bg-{color}avustajia. Sen sijaan, että määrität yksilöitä .text-*ja .bg-*apuohjelmia, voit nyt käyttää apuohjelmia asettaaksesi .text-bg-*a , background-colorjossa on kontrasti erottuva etuala color.

• Lisätty .form-check-reversemuokkaus muuttaaksesi tarrojen ja niihin liittyvien valintaruutujen/radioiden järjestystä.

• Lisätty raidallisten sarakkeiden tuki taulukoihin uuden .table-striped-columnsluokan kautta.

Täydellinen luettelo muutoksista on v5.2.0-projektissa GitHubissa .

v5.1.0

• Lisätty kokeellinen tuki CSS Grid -asettelulle . — Tämä on työn alla, eikä se ole vielä valmis tuotantokäyttöön, mutta voit ottaa uuden ominaisuuden käyttöön Sassin kautta. Ota se käyttöön poistamalla oletusruudukko käytöstä asettamalla $enable-grid-classes: falseja ota CSS Grid käyttöön asettamalla $enable-cssgrid: true.

• Navigointipalkit päivitetty tukemaan offcanvaaja. — Lisää offcanvas-laatikoita mihin tahansa navigointipalkkiin reagoivilla .navbar-expand-*luokilla ja joillakin offcanvas-merkinnöillä.

• Lisätty uusi paikkamerkkikomponentti . – Uusin komponenttimme, tapa tarjota väliaikaisia ​​estoja todellisen sisällön sijasta, mikä auttaa osoittamaan, että jotain latautuu edelleen sivustossasi tai sovelluksessasi.

• Kutista laajennus tukee nyt vaakasuuntaista kutistamista . — Lisää .collapse-horizontalomaan .collapsekutistaaksesi . width_ heightVältä selaimen uudelleenmaalausta asettamalla min-heighttai height.

• Lisätty uusia pino- ja pystysääntöapuohjelmia. — Käytä nopeasti useita flexbox-ominaisuuksia luodaksesi nopeasti mukautettuja asetteluja pinojen avulla . Valitse vaaka- ( .hstack) ja pystysuuntaisista ( .vstack) pinoista. <hr>Lisää elementtien kaltaisia ​​pystyjakajia uusilla .vrapuvälineillä .

• Lisätty uusia globaaleja :rootCSS-muuttujia. — Lisätty useita uusia CSS-muuttujia :roottasolle <body>tyylien hallintaa varten. Lisää on valmisteilla, mukaan lukien apuohjelmissamme ja komponenteissamme, mutta toistaiseksi lue CSS-muuttujat Mukauta-osiosta .

• Uusittu väri- ja tausta-apuohjelmat CSS-muuttujien käyttämiseksi ja lisätty uusia tekstin peittävyyden ja taustan peittävyyden apuohjelmia. — .text-* ja .bg-*apuohjelmat on nyt rakennettu CSS-muuttujilla ja rgba()väriarvoilla, joten voit helposti mukauttaa mitä tahansa apuohjelmaa uusilla opasiteettiapuohjelmilla.

• Lisätty uusia katkelmia, jotka perustuvat osoittamaan, kuinka voit mukauttaa komponenttejamme. — Vedä käyttövalmiiksi mukautetut komponentit ja muut yleiset suunnittelumallit uusien Snippets-esimerkkiemme avulla . Sisältää alatunnisteet , pudotusvalikot , luetteloryhmät ja modaalit .

• Käyttämättömät paikannustyylit poistettiin ponnahdusikkunoista ja työkaluvihjeistä , koska niitä käsittelee yksinomaan Popper. $tooltip-marginon vanhentunut ja asetettu nullprosessiin.

Haluatko lisätietoja? Lue v5.1.0-blogiviesti.

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

• Murtumassa <hr>elementtejä käytetään nyt heightsen sijaan, että ne tukevat attribuuttia borderparemmin . sizeTämä mahdollistaa myös täyteapuohjelmien käytön paksumpien jakajien luomiseksi (esim. <hr class="py-1">).

• 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-control.custom-checkboxon nyt .form-check.
  • .custom-control.custom-custom-radioon nyt .form-check.
  • .custom-control.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ä.

• Lomakkeen ohjausobjekteja ei enää käytetä height, kun se on mahdollista, vaan lykätään min-heightmukauttamisen ja yhteensopivuuden parantamiseksi muiden komponenttien kanssa.

• 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

• 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ä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.

korppujauhoja

• 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 .

Karuselli

• Lisätty uusi .carousel-darkversio tummalle tekstille, säätimille ja ilmaisimille (sopii vaaleammille taustoille).

• Karuselliohjaimien chevron-kuvakkeet on korvattu uusilla Bootstrap Iconsin SVG-tiedostoilla .

Sulje-painike

• MurtumassaNimetty uudelleen .closenimellä .btn-closevä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-whiteversio, filter: invert(1)joka mahdollistaa suuremman kontrastin hylkäämisen kuvakkeet tummemmilla taustoilla.

Romahdus

• Haitarien rullaankkurointi poistettu.

Pudotusvalikosta

• 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 avattavan valikon sijainti on staattinen tai 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

• MurtumassaPudotettiin jumbotron-komponentti, koska se voidaan kopioida apuohjelmilla. Katso esittely uudesta Jumbotron-esimerkistämme.

Listaa ryhmä

• Listaryhmiin lisätty uusi .list-group-numberedmuokkaaja .

Navit ja välilehdet

• Luokkaan lisätty uudet nullmuuttujat font-size, font-weight, colorja :hover color..nav-link

Navigointipalkit

• MurtumassaNavigointipalkit vaativat nyt säilön sisällä (jotka yksinkertaistavat huomattavasti välivaatimukset ja vaaditaan CSS).
• Murtumassa.activeLuokkaa ei voi enää soveltaa s : lle .nav-item, se on käytettävä suoraan .nav-links:lle.

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.

• 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:

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