Pereiti prie pagrindinio turinio Pereiti prie dokumentų naršymo
Check
in English

Perkeliama į v5

Stebėkite ir peržiūrėkite „Bootstrap“ šaltinio failų, dokumentacijos ir komponentų pakeitimus, kad galėtumėte pereiti iš 4 į 5.

Šiame puslapyje

v5.2.0

Atnaujintas dizainas

„Bootstrap v5.2.0“ turi subtilų dizaino atnaujinimą, skirtą saujelei komponentų ir ypatybių visame projekte, ypač naudojant patobulintas border-radiusmygtukų ir formų valdiklių vertes . Mūsų dokumentacija taip pat buvo atnaujinta, įtraukiant naują pagrindinį puslapį, paprastesnį dokumentų išdėstymą, kuris nebesutraukia šoninės juostos dalių, ir ryškesnius įkrovos piktogramų pavyzdžius .

Daugiau CSS kintamųjų

Atnaujinome visus savo komponentus, kad būtų naudojami CSS kintamieji. Nors „Sass“ vis dar remia viską, kiekvienas komponentas buvo atnaujintas, kad būtų įtraukti CSS kintamieji į komponentų bazines klases (pvz., .btn), kad būtų galima labiau pritaikyti „Bootstrap“ realiuoju laiku. Vėlesniuose leidimuose mes ir toliau plėsime CSS kintamųjų naudojimą išdėstydami, formuodami, pagalbinėse priemonėse ir paslaugų programose. Skaitykite daugiau apie kiekvieno komponento CSS kintamuosius atitinkamuose jų dokumentacijos puslapiuose.

Mūsų CSS kintamųjų naudojimas bus šiek tiek neišsamus iki „Bootstrap 6“. Nors norėtume visapusiškai juos įgyvendinti, kyla pavojus, kad dėl jų galimi pakeitimai. Pavyzdžiui, $alert-border-width: var(--bs-border-width)mūsų šaltinio kodo nustatymas sulaužo potencialų Sass jūsų kode, jei tai padarėte $alert-border-width * 2dėl kokios nors priežasties.

Todėl, kur tik įmanoma, toliau sieksime daugiau CSS kintamųjų, tačiau atminkite, kad 5 v. versijoje mūsų diegimas gali būti šiek tiek apribotas.

Nauja_maps.scss

Bootstrap v5.2.0 pristatė naują Sass failą su _maps.scss. Jis ištraukia kelis Sass žemėlapius, _variables.scsskad išspręstų problemą, kai pradinio žemėlapio atnaujinimai nebuvo pritaikyti antriniams žemėlapiams, kurie juos išplečia. Pavyzdžiui, naujinimai $theme-colorsnebuvo taikomi kitiems teminiams žemėlapiams, kuriais buvo remiamasi $theme-colors, todėl buvo pažeistos pagrindinės tinkinimo darbo eigos. Trumpai tariant, „Sass“ turi apribojimą, kai panaudojus numatytąjį kintamąjį arba žemėlapį , jo negalima atnaujinti. Panašus trūkumas yra ir su CSS kintamaisiais, kai jie naudojami kitiems CSS kintamiesiems sudaryti.

Štai kodėl kintamieji „Bootstrap“ tinkinimai turi būti atliekami po @import "functions", bet prieš @import "variables"ir likusį mūsų importavimo krūvą. Tas pats pasakytina ir apie Sass žemėlapius – prieš pradėdami naudoti numatytuosius nustatymus turite nepaisyti. Šie žemėlapiai buvo perkelti į naują _maps.scss:

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

Jūsų tinkintos „Bootstrap“ CSS versijos dabar turėtų atrodyti maždaug taip, naudojant atskirą žemėlapių importą.

  // 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

Naujos komunalinės paslaugos

Papildomi pakeitimai

  • Pristatė naują $enable-container-classesvariantą. – Dabar, kai pasirenkamas eksperimentinis CSS tinklelio išdėstymas, .container-*klasės vis tiek bus kompiliuojamos, nebent ši parinktis nustatyta kaip false. Konteineriai taip pat dabar išlaiko savo latakų vertes.

  • Offcanvas komponentas dabar turi interaktyvių variantų . Pradinė .offcanvasklasė lieka nepakitusi – ji paslepia turinį visose peržiūros srityse. Kad jis būtų jautrus, pakeiskite tą .offcanvasklasę į bet kurią .offcanvas-{sm|md|lg|xl|xxl}klasę.

  • Dabar galima pasirinkti storesnius stalo pertvaras. — Pašalinome storesnę ir sunkiau nepaisomą lentelių grupių sieną ir perkėlėme ją į pasirenkamą klasę, kurią galite taikyti, .table-group-divider. Pavyzdį žiūrėkite lentelės dokumentuose.

  • Scrollspy buvo perrašytas naudoti Intersection Observer API , o tai reiškia, kad jums nebereikia santykinių pirminių paketų, nebenaudojamosoffsetkonfigūracijos ir kt. Ieškokite, kad „Scrollspy“ diegimai būtų tikslesni ir nuoseklesni navigacijos paryškinimu.

  • Iššokantys langai ir patarimai dabar naudoja CSS kintamuosius. Kai kurie CSS kintamieji buvo atnaujinti iš jų Sass atitikmenų, siekiant sumažinti kintamųjų skaičių. Dėl to trys kintamieji šiame leidime nebenaudojami: $popover-arrow-color, $popover-arrow-outer-color, ir $tooltip-arrow-color.

  • Pridėta naujų .text-bg-{color}pagalbininkų. Užuot nustatę asmenines .text-*ir .bg-*komunalines paslaugas, dabar galite naudoti pagalbininkus , kad.text-bg-* nustatytumėte background-colorkontrastingą priekinį planą color.

  • Pridėtas .form-check-reversemodifikatorius, skirtas pakeisti etikečių tvarką ir susijusius žymimuosius laukelius / radijo imtuvus.

  • Pridėtas dryžuotų stulpelių palaikymas lentelėse per naują .table-striped-columnsklasę.

Išsamų pakeitimų sąrašą rasite 5.2.0 projekto „GitHub“ svetainėje .

v5.1.0

  • Pridėtas eksperimentinis CSS tinklelio išdėstymo palaikymas . — Tai nebaigta ir dar neparengta naudoti gamyboje, bet galite pasirinkti naują funkciją per Sass. Norėdami jį įjungti, išjunkite numatytąjį tinklelį nustatydami $enable-grid-classes: falseir įgalinkite CSS tinklelį nustatydami $enable-cssgrid: true.

  • Atnaujintos naršymo juostos, kad būtų palaikoma „offcanvas“. — Pridėkite offcanvas stalčių bet kurioje naršymo juostoje naudodami interaktyvias .navbar-expand-*klases ir kai kuriuos offcanvas žymėjimus.

  • Pridėtas naujas rezervuotos vietos komponentas . – Naujausias mūsų komponentas – būdas pateikti laikinus blokus, o ne tikrą turinį, padedantį parodyti, kad kažkas vis dar įkeliama jūsų svetainėje ar programoje.

  • Sutraukti papildinį dabar palaiko horizontalųjį sutraukimą . — Pridėkite .collapse-horizontalprie savo .collapse, kad sutrauktumėte widthvietoj height. Venkite naršyklės perdažymo nustatydami a min-heightarba height.

  • Pridėta naujų kamino ir vertikalių taisyklių pagalbininkų. – Greitai pritaikykite kelias „flexbox“ ypatybes, kad greitai sukurtumėte tinkintus išdėstymus su krūvomis . Pasirinkite iš horizontalių ( .hstack) ir vertikalių ( .vstack) krūvų. Pridėkite vertikalius skirstytuvus, panašius į <hr>elementus, naudodami naujus .vrpagalbininkus .

  • Pridėta naujų visuotinių :rootCSS kintamųjų. - Į stilių :rootvaldymo lygį įtraukta keletas naujų CSS kintamųjų . <body>Yra dar daugiau darbų, įskaitant mūsų komunalines paslaugas ir komponentus, tačiau kol kas skaitykite CSS kintamuosius skyriuje Tinkinti .

  • Peržiūrėtos spalvų ir fono priemonės, kad būtų galima naudoti CSS kintamuosius, ir pridėtos naujos teksto neskaidrumo ir fono neskaidrumo priemonės. — .text-* ir .bg-*komunalinės paslaugos dabar sukurtos naudojant CSS kintamuosius ir rgba()spalvų reikšmes, todėl galite lengvai tinkinti bet kokią priemonę naudodami naujas neskaidrumo priemones.

  • Pridėta naujų fragmentų pavyzdžių, kurie parodo, kaip tinkinti mūsų komponentus. — Pasiruoškite naudoti tinkintus komponentus ir kitus įprastus dizaino modelius naudodami mūsų naujus fragmentų pavyzdžius . Apima poraštes , išskleidžiamuosius meniu , sąrašų grupes ir modalus .

  • Pašalinti nenaudojami padėties nustatymo stiliai iš iššokančių langų ir patarimų , nes juos tvarko tik Popper. $tooltip-marginbuvo nebenaudojamas ir nustatytas į nullprocesą.

Norite daugiau informacijos? Perskaitykite v5.1.0 tinklaraščio įrašą.

Labas! Pirmojo pagrindinio Bootstrap 5, v5.0.0, leidimo pakeitimai dokumentuojami toliau. Jie neatspindi aukščiau nurodytų papildomų pakeitimų.

Priklausomybės

  • Atsisakė jQuery.
  • Atnaujinta iš Popper v1.x į Popper v2.x.
  • Libsass pakeistas Dart Sass, nes mūsų Sass kompiliatorius, suteiktas Libsass, buvo nebenaudojamas.
  • Perėjo iš Jekyll į Hugo, kad sukurtų mūsų dokumentus

Naršyklės palaikymas

  • Atsisakė Internet Explorer 10 ir 11
  • Atsisakė „Microsoft Edge“ < 16 (pasenęs kraštas)
  • Atsisakė „Firefox“ < 60
  • Išmestas „Safari“ < 12
  • Atsisakė iOS Safari < 12
  • Nukrito „Chrome“ < 60

Dokumentacijos pakeitimai

  • Pertvarkytas pagrindinis puslapis, dokumentų išdėstymas ir poraštė.
  • Pridėtas naujas siuntų vadovas .
  • Pridėta nauja Tinkinimo skiltis , pakeičianti v4 temų puslapį su nauja informacija apie Sass, visuotines konfigūracijos parinktis, spalvų schemas, CSS kintamuosius ir kt.
  • Visa formų dokumentacija pertvarkyta į naują Formų skiltį , išskaidant turinį į labiau sutelktus puslapius.
  • Panašiai atnaujinta skiltis Išdėstymas , kad būtų aiškiau išdėstytas tinklelio turinys.
  • Komponento puslapis „Navs“ pervadintas į „Navs & Tabs“.
  • Puslapis „Checks“ pervadintas į „Checks & radijas“.
  • Pertvarkyta naršymo juosta ir pridėta nauja subnav, kad būtų lengviau naršyti mūsų svetaines ir dokumentų versijas.
  • Pridėtas naujas paieškos lauko spartusis klavišas: Ctrl + /.

Sass

  • Atsisakėme numatytųjų Sass žemėlapių sujungimų, kad būtų lengviau pašalinti perteklines reikšmes. Atminkite, kad dabar turite apibrėžti visas reikšmes Sass žemėlapiuose, pvz ., $theme-colors. Sužinokite, kaip elgtis su Sass žemėlapiais .

  • Lūžęscolor-yiq()Funkcija ir susiję kintamieji pervadinti į color-contrast(), nes ji nebėra susijusi su YIQ spalvų erdve. Žr. #30168.

    • $yiq-contrasted-thresholdyra pervadintas į $min-contrast-ratio.
    • $yiq-text-darkir $yiq-text-lightyra atitinkamai pervadinti į $color-contrast-darkir $color-contrast-light.

  • LūžęsMedia query mixins parametrai buvo pakeisti, kad būtų logiškesnis požiūris.

    • media-breakpoint-down()naudoja patį pertraukos tašką, o ne kitą pertraukos tašką (pvz., media-breakpoint-down(lg)vietoj media-breakpoint-down(md)tikslinių peržiūros sričių, mažesnių nei lg).
    • Panašiai, antrasis parametras media-breakpoint-between()taip pat naudoja patį lūžio tašką, o ne kitą pertraukos tašką (pvz., media-between(sm, lg)vietoj media-breakpoint-between(sm, md)tikslinių peržiūros sričių tarp smir lg).

  • LūžęsPašalinti spausdinimo stiliai ir $enable-print-styleskintamasis. Spausdinimo rodymo klasės vis dar egzistuoja. Žr. #28339 .

  • LūžęsAtmesta color(), theme-color()ir gray()veikia kintamųjų naudai. Žr. #29083 .

  • LūžęsFunkcija pervadinta theme-color-level()į color-level()ir dabar priima bet kokią norimą spalvą, o ne tik $theme-colorspalvas. Žr. #29083 Saugokitės: color-level() vėliau buvo išmestas v5.0.0-alpha3.

  • LūžęsTrumpumo dėlei pervadinta į $enable-prefers-reduced-motion-media-queryir į .$enable-pointer-cursor-for-buttons$enable-reduced-motion$enable-button-pointers

  • LūžęsPašalintas bg-gradient-variant()mišinys. Naudokite .bg-gradientklasę norėdami pridėti gradientus prie elementų, o ne sugeneruotas .bg-gradient-*klases.

  • Lūžęs Pašalinti anksčiau nebenaudojami mišiniai:

    • hover, hover-focus, plain-hover-focus, irhover-focus-active
    • float()
    • form-control-mixin()
    • nav-divider()
    • retina-img()
    • text-hide()(taip pat atsisakyta susijusios naudingumo klasės, .text-hide)
    • visibility()
    • form-control-focus()

  • Lūžęsscale-color()Funkcija pervadinta į shift-color(), kad būtų išvengta susidūrimo su Sass spalvų mastelio keitimo funkcija.

  • box-shadowmixins dabar leidžia nullreikšmes ir išmeta noneiš kelių argumentų. Žr. #30394 .

  • Dabar border-radius()maišytuvas turi numatytąją reikšmę.

Spalvų sistema

  • Spalvų sistema, kuri veikė color-level()ir $theme-color-intervalbuvo pašalinta naujos spalvų sistemos naudai. Visos lighten()ir darken()funkcijos mūsų kodų bazėje yra pakeistos tint-color()ir shade-color(). Šios funkcijos sumaišys spalvą su balta arba juoda, o ne pakeis jos šviesumą fiksuotu kiekiu. Atspalvins shift-color()arba atspalvins spalvą, priklausomai nuo to, ar jo svorio parametras yra teigiamas, ar neigiamas. Daugiau informacijos rasite #30622 .

  • Pridėta naujų atspalvių ir atspalvių kiekvienai spalvai, suteikiant devynias atskiras spalvas kiekvienai pagrindinei spalvai kaip nauji Sass kintamieji.

  • Patobulintas spalvų kontrastas. Padidintas spalvų kontrasto santykis nuo 3:1 iki 4,5:1 ir atnaujintos mėlynos, žalios, žalsvai mėlynos ir rožinės spalvos, kad būtų užtikrintas WCAG 2.1 AA kontrastas. Taip pat pakeista spalvų kontrasto spalva iš $gray-900į $black.

  • Siekdami palaikyti mūsų spalvų sistemą, pridėjome naujų pasirinktinių tint-color()ir shade-color()funkcijų, leidžiančių tinkamai derinti spalvas.

Tinklelio atnaujinimai

  • Naujas lūžio taškas! Pridėtas naujas xxlpertraukos taškas 1400pxir aukštyn. Jokių kitų pertraukos taškų pakeitimų.

  • Patobulinti latakai. Latakai dabar nustatyti relėmis ir yra siauresni nei v4 ( 1.5rem, arba maždaug 24px, žemyn nuo 30px). Tai sulygiuoja mūsų tinklelio sistemos latakus su mūsų tarpais.

    • Pridėta nauja latakų klasė ( .g-*, .gx-*, ir .gy-*), skirta valdyti horizontalius / vertikalius latakus, horizontalius latakus ir vertikalius latakus.
    • LūžęsPervardyta .no-guttersį .g-0, kad atitiktų naujas latakų paslaugas.

  • Stulpeliai nebetaikomi position: relative, todėl gali tekti pridėti .position-relativekai kurių elementų, kad atkurtumėte tokį elgesį.

  • LūžęsAtsisakė kelių .order-*klasių, kurios dažnai liko nenaudojamos. Dabar teikiame .order-1tik .order-5iš dėžutės.

  • LūžęsKomponentas buvo atmestas, .medianes jį galima lengvai pakartoti naudojant komunalines paslaugas. Pavyzdį žr. #28265 ir lanksčių paslaugų puslapį .

  • Lūžęs bootstrap-grid.cssdabar taikoma tik box-sizing: border-boxstulpeliui, o ne iš naujo nustatyti visuotinį dėžutės dydį. Tokiu būdu mūsų tinklelio stiliai gali būti naudojami daugiau vietų be trukdžių.

  • $enable-grid-classesnebeišjungia sudėtinių rodinių klasių generavimo. Žr. #29146.

  • Atnaujintas make-colmiksas pagal numatytuosius nustatymus į vienodus stulpelius be nurodyto dydžio.

Turinys, perkrovimas ir kt

  • RFS dabar įjungtas pagal numatytuosius nustatymus. Antraštės, kuriose naudojamasfont-size()mišinys, automatiškai koreguoja jųfont-sizemastelį peržiūros srityje. Ši funkcija anksčiau buvo pasirinkta naudojant v4.

  • LūžęsPeržiūrėjome ekrano tipografiją, kad pakeistume $display-*kintamuosius ir $display-font-sizesSass žemėlapį. Taip pat pašalinti atskiri $display-*-weightvieno $display-font-weightir pakoreguoto font-sizes kintamieji.

  • Pridėjo du naujus .display-*antraščių dydžius .display-5ir .display-6.

  • Pagal numatytuosius nustatymus nuorodos yra pabrauktos (ne tik užvedus pelės žymeklį), nebent jos yra konkrečių komponentų dalis.

  • Perkurtos lentelės , kad būtų atnaujintas jų stilius ir perkurtos naudojant CSS kintamuosius, kad būtų galima geriau valdyti stilių.

  • LūžęsĮdėtos lentelės stilių nebepaveldi.

  • Lūžęs .thead-lightir .thead-darkyra atmetami ir pasirenkamos .table-*variantų klasės, kurios gali būti naudojamos visiems lentelės elementams ( thead, tbody, tfoot, tr, thir td).

  • LūžęsMišinys table-row-variant()pervadinamas į table-variant()ir priima tik 2 parametrus: $color(spalvos pavadinimas) ir $value(spalvos kodas). Kraštinės spalva ir akcento spalvos automatiškai apskaičiuojamos pagal lentelės faktoriaus kintamuosius.

  • Padalinkite lentelės langelių užpildymo kintamuosius į -yir -x.

  • LūžęsNukrito .pre-scrollableklasė. Žr. #29135

  • Lūžęs .text-*Priemonės nebeprideda nuorodų užvedimo ir fokusavimo būsenų. .link-*Vietoje to gali būti naudojamos pagalbinės klasės. Žr. #29267

  • LūžęsNukrito .text-justifyklasė. Žr. #29793

  • Lūžęs <hr>elementai dabar naudojami height, o ne bordergeriau palaikyti sizeatributą. Tai taip pat leidžia naudoti užpildymo priemones, kad būtų sukurtos storesnės pertvaros (pvz., <hr class="py-1">).

  • Iš naujo nustatyti numatytąjį horizontalųjį padding-leftir <ul>elementus <ol>iš naršyklės numatytųjų 40pxį 2rem.

  • Pridėta $enable-smooth-scroll, kuris taikomas scroll-behavior: smoothvisame pasaulyje, išskyrus vartotojus, kurie prašo sumažinti judėjimą per prefers-reduced-motionmedijos užklausą. Žr. #31877

RTL

  • Horizontalios krypties specifiniai kintamieji, komunalinės paslaugos ir mišiniai buvo pervadinti, kad būtų naudojamos loginės ypatybės, pvz., esančios lanksčiojo dėžutės išdėstyme, pvz. , vietoj startir .endleftright

Formos

  • Pridėtos naujos plaukiojančios formos! Pakeitėme slankiųjų etikečių pavyzdį į visiškai palaikomus formos komponentus. Žr. naują slankiųjų etikečių puslapį.

  • Lūžęs Konsoliduoti savųjų ir tinkintų formų elementai. Žymieji langeliai, radijo imtuvai, pasirinkimai ir kiti įvesties elementai, turintys savąsias ir pasirinktines klases 4 versijoje, buvo konsoliduoti. Dabar beveik visi formos elementai yra visiškai pritaikyti, daugumai nereikia pasirinktinio HTML.

    • .custom-control.custom-checkboxyra dabar .form-check.
    • .custom-control.custom-custom-radioyra dabar .form-check.
    • .custom-control.custom-switchyra dabar .form-check.form-switch.
    • .custom-selectyra dabar .form-select.
    • .custom-fileir .form-filebuvo pakeisti pasirinktiniais stiliais viršuje .form-control.
    • .custom-rangeyra dabar .form-range.
    • Nukrito gimtoji .form-control-fileir .form-control-range.

  • LūžęsNukrito .input-group-appendir .input-group-prepend. Dabar galite tiesiog pridėti mygtukus ir .input-group-textkaip tiesioginius įvesties grupių antrinius elementus.

  • Ilgalaikis trūkstamos kraštinės spindulys įvesties grupėje su patvirtinimo grįžtamojo ryšio klaida pagaliau ištaisytas pridedant papildomą .has-validationklasę prie įvesties grupių su patvirtinimu.

  • Lūžęs Atsisakėme konkrečių formų išdėstymo klasių mūsų tinklelio sistemoje. .form-groupVietoj , .form-row, arba naudokite mūsų tinklelį ir komunalines paslaugas .form-inline.

  • LūžęsFormų etiketėms dabar reikia .form-label.

  • Lūžęs .form-textnebėra nustatomi display, todėl galite sukurti tiesioginį arba blokuoti pagalbos tekstą, kaip norite, tiesiog pakeitus HTML elementą.

  • Formos valdikliai nebenaudojami, heightjei įmanoma, pataisyti, o atidėti, kad min-heightbūtų pagerintas tinkinimas ir suderinamumas su kitais komponentais.

  • Patvirtinimo piktogramos nebetaikomos <select>s su multiple.

  • Pertvarkyti šaltinio Sass failai scss/forms/, įskaitant įvesties grupių stilius.

Komponentai

  • Suvienodintos paddingįspėjimų, naršymo kelelių, kortelių, išskleidžiamųjų meniu, sąrašų grupių, modalų, iššokančių langų ir patarimų vertės, pagrįstos mūsų $spacerkintamuoju. Žr. #30564 .

Akordeonas

Perspėjimai

  • Įspėjimai dabar turi pavyzdžių su piktogramomis .

  • Kiekviename įspėjime pašalinti pasirinktiniai <hr>s stiliai, nes jie jau naudoja currentColor.

Ženkliukai

  • LūžęsAtsisakyta visų .badge-*fono paslaugų spalvų klasių (pvz., naudoti .bg-primaryvietoj .badge-primary).

  • LūžęsAtmestas – vietoj to .badge-pillnaudokite .rounded-pillįrankį.

  • LūžęsPašalinti <a>ir <button>elementų užvedimo ir fokusavimo stiliai.

  • Padidintas numatytasis ženklelių užpildymas iš .25em/ .5emį .35em/ .65em.

  • Supaprastinta numatytoji skraidyklės išvaizda pašalinus padding, background-colorir border-radius.

  • Pridėta nauja pasirinktinė CSS ypatybė --bs-breadcrumb-divider, kad būtų lengva tinkinti, nereikia iš naujo kompiliuoti CSS.

Mygtukai

  • Lūžęs Perjungimo mygtukai su žymimaisiais laukeliais arba radijo imtuvais nebereikalauja „JavaScript“ ir turi naują žymėjimą. Nebereikia įvyniojimo elemento, pridėkite.btn-checkprie<input>, ir susiekite jį su bet kokiomis.btnklasėmis<label>. Žr. #30650 . Tam skirti dokumentai perkelti iš mygtukų puslapio į naują Formos skyrių.

  • Lūžęs Nukrito .btn-blockuž komunalines paslaugas. Užuot naudoję .btn-block, .btnapvyniokite mygtukus .d-gridir .gap-*įrankį, kad galėtumėte juos atskirti. Perjunkite į interaktyvias klases, kad galėtumėte dar labiau jas valdyti. Perskaitykite dokumentus, kad gautumėte keletą pavyzdžių.

  • Atnaujinti mūsų button-variant()ir button-outline-variant()mišiniai, kad būtų palaikomi papildomi parametrai.

  • Atnaujinti mygtukai, užtikrinantys didesnį kontrastą užvedus pelės žymeklį ir esant aktyvioms būsenoms.

  • Išjungti mygtukai dabar turi pointer-events: none;.

Kort

  • LūžęsNukrito .card-deckmūsų tinklelio naudai. Suvyniokite savo korteles į stulpelių klases ir pridėkite pagrindinį .row-cols-*konteinerį, kad galėtumėte atkurti kortų kaladės (tačiau geriau valdydami reaguojantį lygiavimą).

  • LūžęsNukrito .card-columnsMūro naudai. Žr. #28922 .

  • Lūžęs.cardAkordeonas pakeistas nauju akordeono komponentu .

  • Pridėtas naujas tamsaus teksto, valdiklių ir indikatorių .carousel-darkvariantas (puikiai tinka šviesesniam fonui).

  • Karuselės valdiklių ševroninės piktogramos pakeistos naujais SVG iš Bootstrap Icons .

Uždaryti mygtuką

  • LūžęsPervardyta .closeį .btn-closemažiau bendrinį pavadinimą.

  • Uždaryti mygtukai dabar naudoja background-image(įterptąjį SVG), o ne &times;HTML, kad būtų lengviau tinkinti, neliečiant žymėjimo.

  • Pridėtas naujas .btn-close-whitevariantas, kuris naudojamas filter: invert(1)didesnio kontrasto piktogramoms atmesti tamsesniame fone.

Sutraukti

  • Pašalintas akordeonų slinkties tvirtinimas.

  • Pridėtas naujas .dropdown-menu-darkvariantas ir susiję kintamieji tamsiesiems išskleidžiamiesiems meniu pagal pareikalavimą.

  • Pridėtas naujas kintamasis, skirtas $dropdown-padding-x.

  • Tamsintas išskleidžiamasis skirstytuvas, kad pagerėtų kontrastas.

  • LūžęsVisi išskleidžiamojo meniu įvykiai dabar suaktyvinami išskleidžiamojo meniu perjungimo mygtuku, o tada pateikiami pirminiame elemente.

  • Išskleidžiamajame meniu dabar yra nustatytas data-bs-popper="static"atributas, kai išskleidžiamojo meniu padėtis yra statinė arba išskleidžiamasis meniu yra naršymo juostoje. Tai prideda mūsų „JavaScript“ ir padeda mums naudoti pasirinktinius pozicijos stilius netrukdant „Popper“ padėties nustatymui.

  • LūžęsAtsisakyta flipišskleidžiamojo įskiepio parinktis, pakeičianti vietinę Popper konfigūraciją. Dabar galite išjungti apvertimo elgseną, perduodami tuščią masyvą, skirtą fallbackPlacementsparinkties apvertimo modifikatoriuje.

  • Išskleidžiamuosius meniu dabar galima spustelėti naudojant naują automatinio uždarymoautoClose funkciją . Naudodami šią parinktį galite spustelėti išskleidžiamajame meniu arba už jo ribų, kad jis būtų interaktyvus.

  • Išskleidžiamieji meniu dabar palaiko .dropdown-items, supakuotus į <li>s.

Džumbotronas

Sąrašo grupė

  • Į klasę įtraukti nauji , , ir nullkintamieji .font-sizefont-weightcolor:hover color.nav-link
  • LūžęsDabar naršymo juostose reikia talpyklos viduje (kad būtų labai supaprastinti tarpų reikalavimai ir reikalingas CSS).
  • Lūžęs.activeKlasė nebegali būti taikoma s .nav-item, ji turi būti taikoma tiesiogiai .nav-links.

Offcanvas

Puslapių rašymas

  • Dabar puslapių nuorodos yra tinkinamos margin-left, kurios dinamiškai suapvalinamos visuose kampuose, kai yra atskirtos viena nuo kitos.

  • Pridėta transitions prie puslapių nuorodų.

Popovers

  • LūžęsNumatytajame iškylančiojo puslapio šablone pervardytas .arrowį ..popover-arrow

  • Parinktis pervardyta whiteListį allowList.

Spinneriai

  • Dabar suktukai gerbia prefers-reduced-motion: reducesulėtindami animaciją. Žr. #31882 .

  • Patobulintas suktuko vertikalus išlygiavimas.

Tostai

  • Dabar skrebučiai gali būti išdėstyti a .toast-containersu padėties nustatymo paslaugų pagalba .

  • Numatytoji skrudinimo trukmė pakeista į 5 sekundes.

  • Pašalinta overflow: hiddeniš tostų ir pakeista tinkamais border-radiuss su calc()funkcijomis.

Patarimai

  • LūžęsNumatytajame patarimo šablone pervardytas .arrowį ..tooltip-arrow

  • LūžęsNumatytoji reikšmė fallbackPlacementspakeičiama į , kad ['top', 'right', 'bottom', 'left']būtų geriau išdėstyti popper elementai.

  • LūžęsParinktis pervardyta whiteListį allowList.

Komunalinės paslaugos

  • LūžęsPervardytos kelios komunalinės paslaugos, kad vietoj krypčių pavadinimų būtų naudojami loginiai ypatybių pavadinimai, pridėjus RTL palaikymą:

    • Pervardyta .left-*ir .right-*į .start-*ir .end-*.
    • Pervardyta .float-leftir .float-rightį .float-startir .float-end.
    • Pervardyta .border-leftir .border-rightį .border-startir .border-end.
    • Pervardyta .rounded-leftir .rounded-rightį .rounded-startir .rounded-end.
    • Pervardyta .ml-*ir .mr-*į .ms-*ir .me-*.
    • Pervardyta .pl-*ir .pr-*į .ps-*ir .pe-*.
    • Pervardyta .text-leftir .text-rightį .text-startir .text-end.

  • LūžęsPagal numatytuosius nustatymus išjungtos neigiamos paraštės.

  • Pridėta nauja .bg-bodyklasė, skirta greitai nustatyti <body>papildomus elementus fone.

  • Pridėtos naujos pozicijos priemonės , skirtos top, right, bottomir left. Kiekvienos nuosavybės vertės apima 0, 50%ir 100%.

  • Pridėta naujų .translate-middle-xir .translate-middle-ypaslaugų, skirtų horizontaliai arba vertikaliai centruoti absoliučius / fiksuotus elementus.

  • Pridėtos naujos border-widthkomunalinės paslaugos .

  • LūžęsPervadinta .text-monospaceį .font-monospace.

  • LūžęsPašalinta .text-hide, nes tai pasenęs teksto slėpimo būdas, kurio nebereikėtų naudoti.

  • Pridėtos .fs-*komunalinės font-sizepaslaugos (su įjungta RFS). Jie naudoja tą patį mastelį, kaip ir numatytosios HTML antraštės (1–6, nuo didelių iki mažų), ir jas galima keisti naudojant Sass žemėlapį.

  • Lūžęs.font-weight-*Komunalinės paslaugos pervadintos .fw-*dėl trumpumo ir nuoseklumo.

  • Lūžęs.font-style-*Komunalinės paslaugos pervadintos .fst-*dėl trumpumo ir nuoseklumo.

  • Pridėta prie CSS tinklelio ir „flexbox“ maketų .d-gridrodymo paslaugų ir naujų gappaslaugų ( )..gap

  • LūžęsPašalinta .rounded-smir rounded-lg, ir įvesta nauja klasių skalė .rounded-0į .rounded-3. Žr. #31687 .

  • Pridėta naujų line-heightpaslaugų: .lh-1, .lh-sm, .lh-baseir .lh-lg. Žiūrėkite čia .

  • Perkėlėme .d-noneCSS paslaugų programą, kad ji būtų svarbesnė už kitas rodymo programas.

  • Išplėtė .visually-hidden-focusablepagalbininką, kad jis taip pat galėtų dirbti su konteineriais, naudojant :focus-within.

Pagalbininkai

  • Lūžęs Reaktyvūs įterpimo pagalbininkai buvo pervadinti į santykio pagalbininkus su naujais klasių pavadinimais ir patobulinta elgsena, taip pat naudingu CSS kintamuoju.

    • Klasės buvo pervardytos, kad būtų pakeistas bykraštinių xsantykis. Pavyzdžiui, .ratio-16by9dabar yra .ratio-16x9.
    • Atsisakėme .embed-responsive-itemelementų grupės parinkiklio ir pasirinkome paprastesnį .ratio > *parinkiklį. Daugiau klasės nereikia, o santykio pagalbininkas dabar veikia su bet kokiu HTML elementu.
    • „ $embed-responsive-aspect-ratiosSass“ žemėlapis buvo pervadintas į, $aspect-ratioso jo reikšmės supaprastintos, kad būtų įtrauktas klasės pavadinimas ir procentas kaip key: valuepora.
    • CSS kintamieji dabar generuojami ir įtraukiami kiekvienai Sass žemėlapio vertei. Pakeiskite --bs-aspect-ratiokintamąjį, .ratiokad sukurtumėte bet kokį tinkintą formato santykį .

  • Lūžęs „Ekrano skaitytuvo“ klasės dabar yra „vizualiai paslėptos“ klasės .

    • Sass failas pakeistas iš scss/helpers/_screenreaders.scssįscss/helpers/_visually-hidden.scss
    • Pervadinta .sr-onlyir .sr-only-focusableį .visually-hiddenir.visually-hidden-focusable
    • Pervardyta sr-only()ir sr-only-focusable()sumaišoma į visually-hidden()ir visually-hidden-focusable().

  • bootstrap-utilities.cssdabar taip pat yra mūsų pagalbininkai. Pagalbininkų nebereikia importuoti tinkintose versijose.

JavaScript

  • Atsisakė jQuery priklausomybės ir perrašė įskiepius į įprastą JavaScript.

  • LūžęsVisų „JavaScript“ papildinių duomenų atributai dabar yra vardų erdvėje, kad būtų lengviau atskirti „Bootstrap“ funkcijas nuo trečiųjų šalių ir jūsų kodo. Pavyzdžiui, mes naudojame data-bs-togglevietoj data-toggle.

  • Visi papildiniai dabar gali priimti CSS parinkiklį kaip pirmąjį argumentą. Norėdami sukurti naują papildinio egzempliorių, galite perduoti DOM elementą arba bet kurį tinkamą CSS parinkiklį:

    const modal = new bootstrap.Modal('#myModal')
const dropdown = new bootstrap.Dropdown('[data-bs-toggle="dropdown"]')

  • popperConfiggali būti perduodama kaip funkcija, kuri priima Bootstrap numatytąją Popper konfigūraciją kaip argumentą, kad galėtumėte sujungti šią numatytąją konfigūraciją savo būdu. Taikoma išskleidžiamiesiems meniu, iššokantiems langams ir patarimams.

  • Numatytoji reikšmė fallbackPlacementspakeičiama į , kad ['top', 'right', 'bottom', 'left']būtų geriau išdėstyti Popper elementai. Taikoma išskleidžiamiesiems meniu, iššokantiems langams ir patarimams.

  • Pašalintas pabraukimas iš viešų statinių metodų, pvz ., _getInstance()→ getInstance().