in English

Selitev na v5

Sledite in pregledujte spremembe izvornih datotek Bootstrap, dokumentacije in komponent, ki vam bodo v pomoč pri prehodu iz v4 na v5.

Na tej strani

v5.2.0

Osvežen dizajn

Bootstrap v5.2.0 vsebuje subtilno posodobitev zasnove za peščico komponent in lastnosti v celotnem projektu, predvsem z izboljšanimi border-radiusvrednostmi na gumbih in kontrolnikih obrazcev . Naša dokumentacija je bila prav tako posodobljena z novo domačo stranjo, enostavnejšo postavitvijo dokumentov, ki ne strni več odsekov stranske vrstice, in vidnejšimi primeri ikon Bootstrap .

Več spremenljivk CSS

Posodobili smo vse naše komponente za uporabo spremenljivk CSS. Medtem ko Sass še vedno podpira vse, je bila vsaka komponenta posodobljena tako, da vključuje spremenljivke CSS v osnovnih razredih komponent (npr. .btn), kar omogoča več prilagajanja Bootstrapa v realnem času. V naslednjih izdajah bomo še naprej širili uporabo spremenljivk CSS v našo postavitev, obrazce, pomočnike in pripomočke. Preberite več o spremenljivkah CSS v vsaki komponenti na ustreznih straneh z dokumentacijo.

Naša uporaba spremenljivk CSS bo nekoliko nepopolna do Bootstrapa 6. Čeprav bi jih radi v celoti implementirali na vseh področjih, obstaja tveganje, da bodo povzročile nedelujoče spremembe. Na primer, nastavitev $alert-border-width: var(--bs-border-width)v naši izvorni kodi prekine potencialni Sass v vaši kodi, če ste to počeli $alert-border-width * 2iz nekega razloga.

Zato si bomo, kjer je to mogoče, še naprej prizadevali za več spremenljivk CSS, vendar upoštevajte, da je lahko naša implementacija v različici 5 nekoliko omejena.

Novo`_maps.scss`

Bootstrap v5.2.0 je predstavil novo datoteko Sass z _maps.scss. Izvleče več zemljevidov Sass, _variables.scssda odpravi težavo, pri kateri posodobitve izvirnega zemljevida niso bile uporabljene za sekundarne zemljevide, ki jih razširjajo. Na primer, posodobitve za $theme-colorsniso bile uporabljene za druge tematske zemljevide, ki so se zanašali na $theme-colors, kar je prekinilo ključne delovne tokove prilagajanja. Skratka, Sass ima omejitev, kjer ko je bila uporabljena privzeta spremenljivka ali zemljevid , je ni mogoče posodobiti. Podobna pomanjkljivost je pri spremenljivkah CSS, ko se uporabljajo za sestavljanje drugih spremenljivk CSS.

Zato morajo prilagoditve spremenljivk v Bootstrapu priti za @import "functions", vendar pred @import "variables"in preostalim našim uvoznim skladom. Enako velja za zemljevide Sass - morate preglasiti privzete nastavitve, preden jih začnete uporabljati. Naslednji zemljevidi so bili premaknjeni v novo različico _maps.scss:

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

Vaše zgradbe Bootstrap CSS po meri bi morale zdaj videti nekako takole z ločenim uvozom zemljevidov.

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

Nove pripomočke

Razširjeni font-weightpripomočki za vključitev .fw-semiboldpolkrepkih pisav.
Razširjeni border-radiuspripomočki za vključitev dveh novih velikosti .rounded-4in .rounded-5, za več možnosti.

Dodatne spremembe

Predstavljena nova $enable-container-classesmožnost. — Ko se zdaj odločite za poskusno postavitev mreže CSS, .container-*bodo razredi še vedno prevedeni, razen če je ta možnost nastavljena na false. Tudi zabojniki zdaj ohranjajo svoje vrednosti žlebov.
Komponenta Offcanvas ima zdaj odzivne različice . Prvotni .offcanvasrazred ostane nespremenjen – skrije vsebino v vseh pogledih. Če želite, da se odziva, spremenite ta .offcanvasrazred v kateri koli .offcanvas-{sm|md|lg|xl|xxl}razred.
Debelejše pregrade za mizo so zdaj na voljo. — Odstranili smo debelejšo in težje preglasljivo mejo med skupinami tabel in jo premaknili v izbirni razred, ki ga lahko uporabite, .table-group-divider. Za primer si oglejte dokumentacijo tabele.
Scrollspy je bil na novo napisan za uporabo Intersection Observer API , kar pomeni, da ne potrebujete več relativnih nadrejenih ovojov, zastareleoffsetkonfiguracije in še več. Poskrbite, da bodo vaše izvedbe Scrollspy natančnejše in doslednejše pri označevanju krmarjenja.
Popoverji in opisi orodij zdaj uporabljajo spremenljivke CSS. Nekatere spremenljivke CSS so bile posodobljene glede na njihove primerke Sass, da se zmanjša število spremenljivk. Posledično so bile v tej izdaji opuščene tri spremenljivke: $popover-arrow-color, $popover-arrow-outer-colorin $tooltip-arrow-color.
Dodani novi .text-bg-{color}pomočniki. Namesto nastavitve posameznih .text-*in .bg-*pripomočkov lahko zdaj uporabite pomočnike .text-bg-*za nastavitev background-colors kontrastnim ospredjem color.
Dodan .form-check-reversemodifikator za obračanje vrstnega reda oznak in povezanih potrditvenih polj/radijev.
Dodana podpora črtastih stolpcev tabelam prek novega .table-striped-columnsrazreda.

Za celoten seznam sprememb si oglejte projekt v5.2.0 na GitHubu .

v5.1.0

Dodana eksperimentalna podpora za postavitev mreže CSS . — To je delo v teku in še ni pripravljeno za produkcijsko uporabo, vendar se lahko odločite za novo funkcijo prek Sass. Če ga želite omogočiti, onemogočite privzeto mrežo z nastavitvijo $enable-grid-classes: falsein omogočite mrežo CSS z nastavitvijo $enable-cssgrid: true.
Posodobljene navbars za podporo offcanvas. — Dodajte predale offcanvas v katero koli navbar z odzivnimi .navbar-expand-*razredi in nekaj oznak offcanvas.
Dodana nova komponenta nadomestnega mesta . — Naša najnovejša komponenta, način zagotavljanja začasnih blokov namesto prave vsebine, ki vam pomaga pokazati, da se nekaj še vedno nalaga na vašem spletnem mestu ali v aplikaciji.
Vtičnik za strnitev zdaj podpira vodoravno strnitev . — Dodajte .collapse-horizontalsvojemu .collapse, da strnete widthnamesto height. Izogibajte se prebarvanju brskalnika tako, da nastavite min-heightali height.
Dodani novi pomočniki za sklad in navpična pravila. — Hitro uporabite več lastnosti flexbox za hitro ustvarjanje postavitev po meri s skladi . Izbirajte med vodoravnimi ( .hstack) in navpičnimi ( .vstack) skladi. Z novimi pomočniki dodajte navpične ločnice, podobne <hr>elementom ..vr
Dodane nove globalne :rootspremenljivke CSS. — Dodanih več novih spremenljivk CSS na :rootraven za nadzor <body>stilov. Več jih je v pripravi, vključno z našimi pripomočki in komponentami, a zaenkrat preberite spremenljivke CSS v razdelku Prilagajanje .
Prenovljeni pripomočki za barvo in ozadje za uporabo spremenljivk CSS ter dodani novi pripomočki za motnost besedila in ozadja . — .text-* in .bg-*pripomočki so zdaj zgrajeni s spremenljivkami CSS in rgba()barvnimi vrednostmi, kar vam omogoča enostavno prilagajanje katerega koli pripomočka z novimi pripomočki za motnost.
Dodani novi primeri izrezkov, ki prikazujejo, kako prilagoditi naše komponente. — Potegnite pripravljene za uporabo prilagojene komponente in druge pogoste vzorce oblikovanja z našimi novimi primeri izrezkov . Vključuje noge , spustne menije , skupine seznamov in modale .
Neuporabljeni slogi pozicioniranja so bili odstranjeni iz pojavnih oken in namigov orodij, saj jih upravlja izključno Popper. $tooltip-marginje bil opuščen in nastavljen na nullv postopku.

Želite več informacij? Preberite objavo v spletnem dnevniku v5.1.0.

Živijo! Spremembe naše prve večje izdaje Bootstrap 5, v5.0.0, so dokumentirane spodaj. Ne odražajo zgoraj prikazanih dodatnih sprememb.

Odvisnosti

Izpuščen jQuery.
Nadgrajen s Popper v1.x na Popper v2.x.
Libsass smo zamenjali z Dart Sass, saj je bil naš prevajalnik Sass, ki je dal Libsass, zastarel.
Preselili smo se z Jekylla na Huga zaradi gradnje naše dokumentacije

Podpora za brskalnik

Opuščen Internet Explorer 10 in 11
Izpuščen Microsoft Edge < 16 (Legacy Edge)
Izpuščen Firefox < 60
Izpuščen Safari < 12
Izpuščen iOS Safari < 12
Izpuščen Chrome < 60

Spremembe dokumentacije

Preoblikovana domača stran, postavitev dokumentov in noga.
Dodan nov vodnik po paketih .
Dodan nov razdelek za prilagajanje , ki nadomešča stran Tematiziranje v4 z novimi podrobnostmi o Sass, globalnih konfiguracijskih možnostih, barvnih shemah, spremenljivkah CSS in več.
Reorganiziral vso dokumentacijo obrazcev v nov razdelek Obrazci , pri čemer je vsebino razdelil na bolj osredotočene strani.
Podobno smo posodobili razdelek Postavitev , da bi jasneje opredelili vsebino mreže.
Komponentna stran »Navs« je bila preimenovana v »Navs & Tabs«.
Stran »Čeki« je bila preimenovana v »Čeki in radijski sprejemniki«.
Preoblikovali smo vrstico za krmarjenje in dodali nov subnav za lažje premikanje po naših spletnih mestih in različicah dokumentov.
Dodana nova bližnjica na tipkovnici za iskalno polje: Ctrl + /.

Sass

Opustili smo privzeto spajanje zemljevidov Sass, da bi olajšali odstranjevanje odvečnih vrednosti. Ne pozabite, da morate zdaj definirati vse vrednosti v zemljevidih Sass, kot je $theme-colors. Preverite, kako ravnati z zemljevidi Sass .
Lomljenjecolor-yiq()Funkcija in povezane spremenljivke so bile preimenovane v color-contrast(), ker niso več povezane z barvnim prostorom YIQ. Glej #30168.
- $yiq-contrasted-thresholdse preimenuje v $min-contrast-ratio.
- $yiq-text-darkin $yiq-text-lightse preimenujejo v $color-contrast-darkin $color-contrast-light.
LomljenjeParametri mixins medijske poizvedbe so se spremenili za bolj logičen pristop.
- media-breakpoint-down()uporablja samo prelomno točko namesto naslednje prekinitvene točke (npr. media-breakpoint-down(lg)namesto media-breakpoint-down(md)ciljnih pogledov, manjših od lg).
- Podobno tudi drugi parameter v media-breakpoint-between()uporabi samo prelomno točko namesto naslednje prelomne točke (npr. media-between(sm, lg)namesto media-breakpoint-between(sm, md)ciljnih pogledov med smin lg).
LomljenjeOdstranjeni slogi tiskanja in $enable-print-stylesspremenljivka. Razredi tiskanja so še vedno na voljo. Glej #28339 .
LomljenjeFunkcije color(), theme-color(), in so gray()opuščene v korist spremenljivk. Glej #29083 .
LomljenjeFunkcija je bila preimenovana theme-color-level()v color-level()in zdaj sprejema katero koli barvo, ki jo želite, namesto samo $theme-colorbarv. Glejte #29083 Pazi: color-level() je bil pozneje vržen v v5.0.0-alpha3.
LomljenjePreimenovano v $enable-prefers-reduced-motion-media-queryin zaradi kratkosti.$enable-pointer-cursor-for-buttons$enable-reduced-motion$enable-button-pointers
LomljenjeOdstranjen bg-gradient-variant()mixin. Uporabite .bg-gradientrazred za dodajanje prelivov elementom namesto ustvarjenih .bg-gradient-*razredov.
Lomljenje Odstranjeni prej zastareli miksini:
- hover, hover-focus, plain-hover-focus, inhover-focus-active
- float()
- form-control-mixin()
- nav-divider()
- retina-img()
- text-hide()(opustil je tudi povezani razred uporabnosti, .text-hide)
- visibility()
- form-control-focus()
Lomljenjescale-color()Funkcija je bila preimenovana v, shift-color()da se izogne koliziji s Sassovo lastno funkcijo skaliranja barv.
box-shadowmiksini zdaj dovoljujejo nullvrednosti in padec noneiz več argumentov. Glej #30394 .
Mixin ima border-radius()zdaj privzeto vrednost.

Barvni sistem

Barvni sistem, ki je deloval z color-level()in $theme-color-intervalje bil odstranjen v korist novega barvnega sistema. Vse funkcije lighten()in darken()v naši kodni bazi so nadomeščene z tint-color()in shade-color(). Te funkcije bodo mešale barvo z belo ali črno, namesto da bi spremenile njeno svetlost za določeno količino. Barvo shift-color()bo obarvala ali zasenčila, odvisno od tega, ali je njen parameter teže pozitiven ali negativen. Glejte #30622 za več podrobnosti.
Dodani novi odtenki in odtenki za vsako barvo, ki zagotavljajo devet ločenih barv za vsako osnovno barvo, kot nove spremenljivke Sass.
Izboljšan barvni kontrast. Izboljšano barvno kontrastno razmerje s 3:1 na 4,5:1 in posodobljene modre, zelene, cian in roza barve, da se zagotovi kontrast WCAG 2.1 AA. Prav tako smo spremenili našo barvno kontrastno barvo iz $gray-900v $black.
Da bi podprli naš barvni sistem, smo dodali nove meritve tint-color()in shade-color()funkcije za ustrezno mešanje naših barv.

Posodobitve mreže

Nova prelomna točka! Dodana nova xxlprelomna točka za 1400pxin navzgor. Brez sprememb vseh drugih prelomnih točk.
Izboljšani žlebovi. Žlebovi so zdaj nastavljeni v rems in so ožji od v4 ( 1.5rem, ali približno 24px, navzdol od 30px). To poravna žlebove našega mrežnega sistema z našimi pripomočki za razmik.
- Dodan nov razred žlebov ( .g-*, .gx-*in .gy-*) za nadzor vodoravnih/navpičnih žlebov, vodoravnih in navpičnih žlebov.
- LomljenjePreimenovan .no-guttersv, .g-0da se ujema z novimi pripomočki za žlebove.
Stolpci se ne position: relativeuporabljajo več, zato boste morda morali dodati .position-relativenekatere elemente, da obnovite to vedenje.
LomljenjeIzpuščenih več .order-*razredov, ki so pogosto ostali neuporabljeni. Zdaj ponujamo samo .order-1ven .order-5iz škatle.
LomljenjeKomponenta je bila opuščena, .mediasaj jo je mogoče preprosto posnemati s pripomočki. Za primer glejte #28265 in stran s pripomočki flex .
Lomljenje bootstrap-grid.csszdaj velja samo box-sizing: border-boxza stolpec namesto ponastavitve globalne velikosti polja. Na ta način lahko naše sloge mreže brez motenj uporabljate na več mestih.
$enable-grid-classesne onemogoča več ustvarjanja vsebniških razredov. Glej #29146.
Posodobljen make-colmixin na privzeto enake stolpce brez določene velikosti.

Vsebina, ponovni zagon itd

RFS je zdaj privzeto omogočen. Naslovi, ki uporabljajofont-size()mixin, se bodo samodejno prilagodilifont-sizemerilu glede na vidno polje. Ta funkcija je bila prej omogočena z v4.
LomljenjePrenovili smo našo tipografijo zaslona, da smo zamenjali naše $display-*spremenljivke in $display-font-sizeszemljevid Sass. Odstranjene tudi posamezne $display-*-weightspremenljivke za posamezen $display-font-weightin prilagojen font-sizes.
Dodani dve novi .display-*velikosti naslovov .display-5in .display-6.
Povezave so privzeto podčrtane (ne le pri premikanju miške), razen če so del določenih komponent.
Preoblikovane tabele za osvežitev njihovih slogov in njihovo ponovno izgradnjo s spremenljivkami CSS za večji nadzor nad slogom.
LomljenjeUgnezdene tabele ne podedujejo več slogov.
Lomljenje .thead-lightin .thead-darkse opustijo v korist .table-*variantnih razredov, ki jih je mogoče uporabiti za vse elemente tabele ( thead, tbody, tfoot, trin ) th.td
LomljenjeMixin je table-row-variant()preimenovan v table-variant()in sprejema samo 2 parametra: $color(ime barve) in $value(koda barve). Barva obrobe in barve poudarkov se samodejno izračunajo na podlagi faktorskih spremenljivk tabele.
Spremenljivke za polnjenje celic tabele razdelite na -yin -x.
LomljenjeIzpuščen .pre-scrollablerazred. Glej #29135
Lomljenje .text-*pripomočki povezavam ne dodajajo več stanja lebdenja in fokusa. .link-*namesto tega lahko uporabite pomožne razrede. Glej #29267
LomljenjeIzpuščen .text-justifyrazred. Glej #29793
Lomljenje <hr>elementi zdaj uporabljajo heightnamesto borderza boljšo podporo sizeatributu. To omogoča tudi uporabo pripomočkov za oblazinjenje za ustvarjanje debelejših ločnic (npr. <hr class="py-1">).
Ponastavi privzeto vodoravno padding-leftna <ul>in <ol>elemente iz brskalnika privzeto 40pxna 2rem.
Dodano $enable-smooth-scroll, ki velja globalno – razen za uporabnike, ki prek medijske poizvedbe scroll-behavior: smoothzahtevajo zmanjšano gibanje . Glej #31877prefers-reduced-motion

RTL

Spremenljivke, pripomočki in miksini, specifični za vodoravno smer, so bili preimenovani tako, da uporabljajo logične lastnosti, kot so tiste, ki jih najdemo v postavitvah flexbox – npr. startin endnamesto leftin right.

Obrazci

Dodani novi plavajoči obrazci! Primer plavajočih nalepk smo povišali v popolnoma podprte komponente obrazca. Oglejte si novo stran s plavajočimi nalepkami.
Lomljenje Konsolidirani izvirni in prilagojeni elementi obrazca. Potrditvena polja, radii, izbire in drugi vnosi, ki so imeli izvorne razrede in razrede po meri v različici 4, so bili konsolidirani. Zdaj so skoraj vsi naši elementi obrazca popolnoma prilagojeni, večina brez potrebe po HTML-ju po meri.
- .custom-control.custom-checkboxje zdaj .form-check.
- .custom-control.custom-custom-radioje zdaj .form-check.
- .custom-control.custom-switchje zdaj .form-check.form-switch.
- .custom-selectje zdaj .form-select.
- .custom-filein .form-fileso bili zamenjani s slogi po meri na vrhu .form-control.
- .custom-rangeje zdaj .form-range.
- Izpuščeni domači .form-control-filein .form-control-range.
LomljenjeSpuščeno .input-group-appendin .input-group-prepend. Zdaj lahko samo dodate gumbe in .input-group-textkot neposredne podrejene vnosnim skupinam.
Dolgotrajna napaka Manjkajoči obrobni radij na vhodni skupini s povratnimi informacijami o preverjanju je končno odpravljena z dodajanjem dodatnega .has-validationrazreda v vnosne skupine s preverjanjem.
Lomljenje Za naš mrežni sistem smo izpustili razrede postavitve, specifične za obliko. Uporabite naše omrežje in pripomočke namesto .form-group, .form-rowali .form-inline.
LomljenjeOznake obrazcev zdaj zahtevajo .form-label.
Lomljenje .form-textne nastavlja več display, kar vam omogoča, da ustvarite vstavljeno ali blokirano besedilo pomoči, kot želite, samo s spremembo elementa HTML.
Kontrolniki obrazcev se ne uporabljajo več fiksni height, ko je to mogoče, namesto tega se odložijo min-heightza izboljšanje prilagajanja in združljivosti z drugimi komponentami.
Ikone za preverjanje niso več uporabljene za <select>s z multiple.
Prerazporejene izvorne datoteke Sass pod scss/forms/, vključno s slogi vnosnih skupin.

Komponente

Poenotene paddingvrednosti za opozorila, drobtinice, kartice, spustne menije, skupine seznamov, modale, pojavna okna in namige orodij, ki temeljijo na naši $spacerspremenljivki. Glej #30564 .

Harmonika

Dodana nova komponenta harmonike .

Opozorila

Opozorila imajo zdaj primere z ikonami .
Odstranjeni slogi po meri za <hr>s v vsakem opozorilu, ker že uporabljajo currentColor.

Značke

LomljenjeIzpuščeni so vsi .badge-*barvni razredi za pripomočke za ozadje (npr. uporabi .bg-primarynamesto .badge-primary).
LomljenjeIzpuščeno — namesto tega .badge-pilluporabite .rounded-pillpripomoček.
LomljenjeOdstranjeni slogi lebdenja in fokusa za elemente <a>in .<button>
Povečano privzeto oblazinjenje značk od .25em/ .5emdo .35em/ .65em.

Krušne drobtine

Poenostavil je privzeti videz drobtin tako, da je odstranil padding, background-colorin border-radius.
Dodana je nova lastnost CSS po meri --bs-breadcrumb-dividerza enostavno prilagajanje, ne da bi bilo treba ponovno prevesti CSS.

Gumbi

Lomljenje Preklopni gumbi s potrditvenimi polji ali radii ne potrebujejo več JavaScripta in imajo nove oznake. Ne potrebujemo več ovojnega elementa, dodajte.btn-checkga<input>in ga seznanite s katerim koli.btnrazredom na<label>. Glej #30650 . Dokumentacija za to je bila premaknjena z naše strani Gumbi v nov razdelek Obrazci.
Lomljenje Padel .btn-blockzaradi komunalnih storitev. Namesto uporabe .btn-blockna .btn, ovijte svoje gumbe s .d-gridpripomočkom .gap-*, da jih po potrebi razmaknete. Preklopite na odzivne razrede za še večji nadzor nad njimi. Preberite dokumente za nekaj primerov.
Posodobili smo naše button-variant()in button-outline-variant()mixine za podporo dodatnim parametrom.
Posodobljeni gumbi za zagotavljanje povečanega kontrasta pri lebdenju in aktivnih stanjih.
Onemogočeni gumbi imajo zdaj pointer-events: none;.

Kartica

LomljenjeIzpuščeno .card-deckv korist našega omrežja. Zavijte svoje karte v razrede stolpcev in dodajte nadrejeni .row-cols-*vsebnik, da ponovno ustvarite komplete kart (vendar z več nadzora nad odzivno poravnavo).
LomljenjeIzpuščeno .card-columnsv korist zidarstva. Glej #28922 .
LomljenjeOsnovna harmonika je bila zamenjana .cardz novo komponento harmonike .

Vrtiljak

Dodana nova .carousel-darkrazličica za temno besedilo, kontrolnike in indikatorje (odlično za svetlejša ozadja).
Ikone ševronov za kontrolnike vrtiljaka so bile zamenjane z novimi SVG-ji iz ikon Bootstrap .

Gumb za zapiranje

LomljenjePreimenovano .closev .btn-closeza manj splošno ime.
Gumbi za zapiranje zdaj uporabljajo background-image(vdelan SVG) namesto ×v HTML, kar omogoča lažjo prilagoditev, ne da bi se morali dotikati vaše oznake.
Dodana nova .btn-close-whiterazličica, ki uporablja filter: invert(1)za omogočanje večjih kontrastnih ikon za opustitev na temnejših ozadjih.

Strni

Odstranjeno drsno sidranje za harmonike.

Spustni meniji

Dodana nova .dropdown-menu-darkrazličica in povezane spremenljivke za temne spustne menije na zahtevo.
Dodana nova spremenljivka za $dropdown-padding-x.
Zatemnjen spustni razdelilnik za boljši kontrast.
LomljenjeVsi dogodki za spustni meni se zdaj sprožijo na preklopnem gumbu spustnega menija in se nato prikažejo v mehurčkih do nadrejenega elementa.
Spustni meniji imajo zdaj data-bs-popper="static"nastavljen atribut, ko je položaj spustnega menija statičen ali pa je spustni meni v vrstici za krmarjenje. To doda naš JavaScript in nam pomaga pri uporabi stilov položaja po meri, ne da bi posegali v Popperjevo pozicioniranje.
LomljenjeOpuščena flipmožnost za spustni vtičnik v korist izvorne konfiguracije Popper. Zdaj lahko onemogočite obnašanje obračanja tako, da podate prazno polje za fallbackPlacementsmožnost v modifikatorju obračanja .
Spustne menije je zdaj mogoče klikniti z novo autoClosemožnostjo za upravljanje samodejnega zapiranja . S to možnostjo lahko sprejmete klik znotraj ali zunaj spustnega menija, da postane interaktiven.
Spustni meniji zdaj podpirajo .dropdown-items, zavite v <li>s.

Jumbotron

LomljenjeIzpuščena je bila komponenta jumbotron, saj jo je mogoče posnemati s pripomočki. Oglejte si naš novi primer Jumbotron za predstavitev.

Seznam skupine

Skupinam seznamov je dodan nov .list-group-numberedmodifikator .

Krmarjenje in zavihki

Dodane nove nullspremenljivke za font-size, font-weight, colorin :hover colorv .nav-linkrazred.

Navbars

LomljenjeVrstice za krmarjenje zdaj zahtevajo vsebnik znotraj (za drastično poenostavitev zahtev glede razmika in potreben CSS).
Lomljenje.activeRazreda ni več mogoče uporabiti za s .nav-item, uporabiti ga je treba neposredno na .nav-links.

Offcanvas

Dodana nova komponenta offcanvas .

Paginacija

Povezave za označevanje strani imajo zdaj možnost prilagajanja margin-left, ki je dinamično zaokrožena na vseh vogalih, ko so ločeni drug od drugega.
transitionPovezavam na strani je dodan s.

Popoverji

LomljenjePreimenovano .arrowv .popover-arrowv naši privzeti pojavni predlogi.
whiteListMožnost preimenovana v allowList.

Vrtavke

Spinerji zdaj častijo prefers-reduced-motion: reducez upočasnitvijo animacij. Glej #31882 .
Izboljšana navpična poravnava vrtavke.

Zdravice

Zdravice je zdaj mogoče postaviti v a .toast-containers pomočjo pripomočkov za pozicioniranje .
Privzeto trajanje zdravice je spremenjeno na 5 sekund.
Odstranjeno overflow: hiddeniz toastov in nadomeščeno z ustreznimi border-radiuss calc()funkcijami.

Namigi orodij

LomljenjePreimenovano .arrowv .tooltip-arrowv naši privzeti predlogi orodnih namigov.
LomljenjePrivzeta vrednost za fallbackPlacementsje spremenjena v ['top', 'right', 'bottom', 'left']za boljšo postavitev poper elementov.
LomljenjewhiteListMožnost preimenovana v allowList.

Pripomočki

LomljenjePreimenovanih več pripomočkov za uporabo logičnih imen lastnosti namesto smernih imen z dodatkom podpore RTL:
- Preimenovan .left-*in .right-*v .start-*in .end-*.
- Preimenovan .float-leftin .float-rightv .float-startin .float-end.
- Preimenovan .border-leftin .border-rightv .border-startin .border-end.
- Preimenovan .rounded-leftin .rounded-rightv .rounded-startin .rounded-end.
- Preimenovan .ml-*in .mr-*v .ms-*in .me-*.
- Preimenovan .pl-*in .pr-*v .ps-*in .pe-*.
- Preimenovan .text-leftin .text-rightv .text-startin .text-end.
LomljenjeNegativne marže so privzeto onemogočene.
Dodan nov .bg-bodyrazred za hitro nastavitev <body>ozadja za dodatne elemente.
Dodani novi pripomočki za položaj za top, right, bottomin left. Vrednosti vključujejo 0, 50%in 100%za vsako lastnost.
Dodani novi .translate-middle-x& .translate-middle-ypripomočki za vodoravno ali navpično centriranje absolutno/fiksno postavljenih elementov.
Dodani novi border-widthpripomočki .
LomljenjePreimenovan .text-monospacev .font-monospace.
LomljenjeOdstranjeno .text-hide, ker je to zastarela metoda za skrivanje besedila, ki je ne bi smeli več uporabljati.
Dodani .fs-*pripomočki za font-sizepripomočke (z omogočenim RFS). Ti uporabljajo enako lestvico kot privzeti naslovi HTML (1-6, veliki do majhnih) in jih je mogoče spreminjati prek zemljevida Sass.
LomljenjePreimenovani .font-weight-*pripomočki .fw-*zaradi jedrnatosti in doslednosti.
LomljenjePreimenovani .font-style-*pripomočki .fst-*zaradi jedrnatosti in doslednosti.
Dodano .d-gridpripomočkom za prikaz in novim gappripomočkom ( .gap) za postavitve CSS Grid in flexbox.
LomljenjeOdstranjeni .rounded-smin rounded-lgin uvedena nova lestvica razredov, .rounded-0na .rounded-3. Glej #31687 .
Dodani novi line-heightpripomočki : .lh-1, .lh-smin .lh-base. .lh-lgGlej tukaj .
Premaknili smo .d-nonepripomoček v naš CSS, da bi mu dali večjo težo v primerjavi z drugimi prikazovalnimi pripomočki.
Pomočnik je razširjen tako, .visually-hidden-focusableda deluje tudi na vsebnikih z uporabo :focus-within.

Pomočniki

Lomljenje Odzivni pomočniki za vdelavo so bili preimenovani v pomočnike za razmerja z novimi imeni razredov in izboljšanim vedenjem ter koristno spremenljivko CSS.
- Razredi so bili preimenovani, da bi spremenili byrazmerje xstranic. Na primer, .ratio-16by9je zdaj .ratio-16x9.
- Izbirnik skupine elementov in smo opustili .embed-responsive-itemv korist enostavnejšega .ratio > *izbirnika. Ne potrebujete več razreda in pomočnik za razmerje zdaj deluje s katerim koli elementom HTML.
- Zemljevid $embed-responsive-aspect-ratiosSass je bil preimenovan v $aspect-ratiosin njegove vrednosti so bile poenostavljene tako, da vključujejo ime razreda in odstotek kot key: valuepar.
- Spremenljivke CSS so zdaj ustvarjene in vključene za vsako vrednost v zemljevidu Sass. Spremenite --bs-aspect-ratiospremenljivko na , .ratioda ustvarite poljubno razmerje stranic po meri .
Lomljenje Razredi »bralnika zaslona« so zdaj »vizualno skriti« razredi .
- Datoteka Sass je spremenjena iz scss/helpers/_screenreaders.scssvscss/helpers/_visually-hidden.scss
- Preimenovan .sr-onlyin .sr-only-focusablev .visually-hiddenin.visually-hidden-focusable
- Preimenovan sr-only()in sr-only-focusable()mešan v visually-hidden()in visually-hidden-focusable().
bootstrap-utilities.csszdaj vključuje tudi naše pomočnike. Pomočnikov ni več treba uvažati v gradnje po meri.

JavaScript

Opuščena je bila odvisnost od jQuery in prepisani vtičniki, da bodo v običajnem JavaScriptu.
LomljenjePodatkovni atributi za vse vtičnike JavaScript so zdaj v imenskem prostoru, kar pomaga razlikovati funkcionalnost Bootstrap od tretjih oseb in vaše kode. Na primer, uporabljamo data-bs-togglenamesto data-toggle.
Vsi vtičniki lahko zdaj sprejmejo izbirnik CSS kot prvi argument. Lahko posredujete element DOM ali kateri koli veljaven izbirnik CSS, da ustvarite nov primerek vtičnika:
```
const modal = new bootstrap.Modal('#myModal')
const dropdown = new bootstrap.Dropdown('[data-bs-toggle="dropdown"]')
```
popperConfiglahko posredujete kot funkcijo, ki sprejme Bootstrapovo privzeto konfiguracijo Popper kot argument, tako da lahko to privzeto konfiguracijo združite po svoje. Velja za spustne menije, pojavna okna in namige orodij.
Privzeta vrednost za fallbackPlacementsje spremenjena v ['top', 'right', 'bottom', 'left']za boljšo postavitev elementov Popper. Velja za spustne menije, pojavna okna in namige orodij.
Odstranjen podčrtaj iz javnih statičnih metod, kot je _getInstance()→ getInstance().