in English

Migráció a v5-re

Kövesse nyomon és tekintse át a Bootstrap-forrásfájlok, a dokumentáció és az összetevők változásait, hogy segítsen áttérni a v4-ről a v5-re.

Ezen az oldalon

v5.2.0

Frissített design

A Bootstrap v5.2.0 finom tervezési frissítést tartalmaz néhány összetevőhöz és tulajdonsághoz a projekt során, leginkább border-radiusa gombok és űrlapvezérlők finomított értékei révén . Dokumentációnkat is frissítettük egy új kezdőlappal, egyszerűbb dokumentumelrendezéssel, amely már nem csukja össze az oldalsáv egyes részeit, valamint a Bootstrap ikonok szembetűnőbb példáival .

További CSS-változók

Minden komponensünket frissítettük, hogy CSS-változókat használjunk. Bár a Sass továbbra is mindent alátámaszt, minden komponens frissítésre került, hogy CSS-változókat tartalmazzon az összetevő alaposztályaiban (pl. .btn), lehetővé téve a Bootstrap valós idejű testreszabását. A következő kiadásokban továbbra is kiterjesztjük a CSS-változók használatát az elrendezésben, az űrlapokban, a segédprogramokban és a segédprogramokban. További információ az egyes összetevők CSS-változóiról a megfelelő dokumentációs oldalakon.

A CSS-változók használata némileg hiányos lesz a Bootstrap 6-ig. Bár szeretnénk, ha ezeket teljes mértékben megvalósítanánk, fennáll a veszélye annak, hogy törést okoznak. Például $alert-border-width: var(--bs-border-width)a forráskódunk megadása megszakítja a potenciális Sass-t a saját kódjában, ha $alert-border-width * 2valamilyen okból ezt tette.

Ennek megfelelően, ahol csak lehetséges, továbbra is több CSS-változó felé fogunk törekedni, de kérjük, vegye figyelembe, hogy megvalósításunk a v5-ben kissé korlátozott lehet.

Új`_maps.scss`

A Bootstrap v5.2.0 új Sass fájlt vezetett be a következővel: _maps.scss. Számos Sass-térképet húz ki a címből, _variables.scsshogy kijavítsa azt a hibát, amely miatt az eredeti térkép frissítéseit nem alkalmazták az azokat kiterjesztő másodlagos térképekre. Például a frissítések $theme-colorsnem kerültek alkalmazásra más tématérképekre, amelyek -re támaszkodtak $theme-colors, ami megtörte a kulcsfontosságú testreszabási munkafolyamatokat. Röviden, a Sass-nak van egy korlátozása, amely szerint az alapértelmezett változó vagy térkép használata után nem frissíthető. Hasonló hiányosság van a CSS-változók esetében, amikor más CSS-változók összeállítására használják őket.

Ez az oka annak, hogy a Bootstrap változó testreszabásai után @import "functions", de előtte @import "variables"és az importverem többi része előtt kell, hogy jöjjenek. Ugyanez vonatkozik a Sass térképekre is – használat előtt felül kell írnia az alapértelmezett értékeket. A következő térképek átkerültek az újba _maps.scss:

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

Az egyéni Bootstrap CSS-összeállításoknak most valahogy így kell kinézniük egy külön térkép-importálással.

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

Új közművek

Kibővített font-weightsegédprogramok a .fw-semiboldfélkövér betűtípusokhoz.
Kibővített border-radiussegédprogramok két új mérettel, .rounded-4és .rounded-5a további lehetőségekért.

További változtatások

Új $enable-container-classesopció bevezetése. — Most, amikor a kísérleti CSS Grid elrendezést választja, az .container-*osztályok továbbra is le lesznek fordítva, kivéve, ha ez a beállítás értéke false. A konténerek is megőrzik ereszcsatorna-értékeiket.
Az Offcanvas komponens immár reszponzív változatokkal rendelkezik . Az eredeti .offcanvasosztály változatlan marad – minden nézetben elrejti a tartalmat. Ahhoz, hogy az érzékeny legyen, módosítsa az .offcanvasosztályt bármelyik .offcanvas-{sm|md|lg|xl|xxl}osztályra.
A vastagabb asztalelválasztók is választhatók. — Eltávolítottuk a vastagabb és nehezebben felülírható határvonalat a táblázatcsoportok között, és áthelyeztük egy választható osztályba, amelyre jelentkezhet, .table-group-divider. Példaként tekintse meg a táblázatos dokumentumokat.
A Scrollspy-t átírták az Intersection Observer API használatára , ami azt jelenti, hogy többé nincs szüksége relatív szülőburkolókra, elavultoffsetkonfigurációkra stb. Keresse meg a Scrollspy implementációit, hogy pontosabbak és következetesebbek legyenek a navigációs kiemelésükben.
A felugró ablakok és az eszköztippek mostantól CSS-változókat használnak. Néhány CSS-változó frissítve lett Sass-változóiról a változók számának csökkentése érdekében. Ennek eredményeként ebben a kiadásban három változó elavult: $popover-arrow-color, $popover-arrow-outer-color, és $tooltip-arrow-color.
.text-bg-{color}Új segítők hozzáadva . Az egyéni .text-*és a .bg-*segédprogramok beállítása helyett most már használhatja a .text-bg-*segítőket a background-colorkontrasztos előtér beállítására color.
Módosító hozzáadva .form-check-reversea címkék és a kapcsolódó jelölőnégyzetek/rádiók sorrendjének megváltoztatásához.
A csíkos oszlopok támogatása hozzáadva a táblázatokhoz az új .table-striped-columnsosztályon keresztül.

A változtatások teljes listáját lásd a v5.2.0 projektben a GitHubon .

v5.1.0

Kísérleti támogatás hozzáadva a CSS Grid elrendezéshez . — Ez egy folyamatban lévő munka, és még nem áll készen az éles használatra, de a Sass-on keresztül feliratkozhat az új funkcióra. Az engedélyezéséhez kapcsolja ki az alapértelmezett rácsot a beállítással, $enable-grid-classes: falseés engedélyezze a CSS Grid beállításával $enable-cssgrid: true.
Frissített navigációs sávok az offcanvas támogatására. — Adjon hozzá offcanvas fiókokat bármelyik navigációs sávhoz a reszponzív .navbar-expand-*osztályokkal és néhány offcanvas jelöléssel.
Új helyőrző összetevő hozzáadva . — A legújabb komponensünk, a valódi tartalom helyett ideiglenes blokkolások biztosításának módja annak jelzésére, hogy valami még mindig betöltődik webhelyén vagy alkalmazásában.
A Collapse plugin mostantól támogatja a vízszintes összecsukást . — Adja hozzá .collapse-horizontala sajátjához, .collapsehogy összecsukja a widthhelyett a height. Kerülje el a böngésző újrafestését a min-heightvagy beállításával height.
Új verem és függőleges szabálysegítők hozzáadva. — Gyorsan alkalmazhat több flexbox tulajdonságot, hogy gyorsan készítsen egyedi elrendezéseket veremekkel . Válasszon a vízszintes ( .hstack) és a függőleges ( .vstack) halmok közül. <hr>Adjon hozzá az elemekhez hasonló függőleges elválasztókat az új .vrsegédeszközökkel .
Új globális :rootCSS-változók hozzáadva. — Számos új CSS-változó hozzáadva a stílusok :rootvezérlésének szintjéhez . <body>Továbbiak is készülnek, beleértve a segédprogramjainkat és összetevőinket is, de egyelőre olvassa el a CSS-változókat a Testreszabás részben .
A szín- és háttér-segédprogramok átdolgozása a CSS-változók használatához, valamint új szöveg- és háttér-átlátszatlansági segédprogramok hozzáadása. – .text-* és .bg-*a segédprogramok most CSS-változókkal és rgba()színértékekkel épülnek fel, lehetővé téve, hogy bármilyen segédprogramot könnyen testre szabjon az új átlátszatlansági segédprogramokkal.
Új részletpéldákat adtunk hozzá, amelyek bemutatják, hogyan lehet személyre szabni összetevőinket. — Készítse elő a testreszabott alkatrészeket és más általános tervezési mintákat az új Snippets példáinkkal . Tartalmazza a lábléceket , a legördülő listákat , a listacsoportokat és a modálisokat .
Eltávolítottuk a nem használt pozicionálási stílusokat a felugró ablakokból és az eszköztippekből , mivel ezeket kizárólag a Popper kezeli. $tooltip-marginelavult, és nullfolyamatban van.

További információt szeretne? Olvassa el a v5.1.0 blogbejegyzést.

Halihó! Az alábbiakban a Bootstrap 5, v5.0.0 első jelentős kiadásán végrehajtott változtatásokat dokumentáljuk. Nem tükrözik a fent látható további változtatásokat.

Függőségek

Eldobta a jQuery-t.
Popper v1.x verzióról Popper v2.x verzióra frissítve.
A Libsass-t Dart Sass-ra cseréltük, mivel a Libsass-hoz tartozó Sass-fordítónk elavult volt.
Jekyllről Hugóhoz költözött a dokumentációnk elkészítéséhez

Böngésző támogatás

Elhagyta az Internet Explorer 10 és 11 böngészőt
Eldobott Microsoft Edge < 16 (Legacy Edge)
Eldobta a Firefox < 60
Eldobott Safari < 12
Eldobott iOS Safari < 12
Eldobott króm < 60

Változások a dokumentációban

Újratervezett kezdőlap, dokumentumok elrendezése és lábléce.
Új csomagkalauz hozzáadva .
Új Testreszabás szakasz került hozzáadásra , amely felváltja a v4 Theming oldalát , új részletekkel a Sass-ról, a globális konfigurációs beállításokról, a színsémákról, a CSS-változókról és még sok másról.
Az összes űrlapdokumentációt átszerveztük egy új Űrlapok szakaszba , így a tartalmat fókuszáltabb oldalakra bontották.
Hasonlóképpen frissítette az Elrendezés részt a rács tartalmának pontosítása érdekében.
A „Navs” összetevő oldalát átnevezte „Navs & Tabs” névre.
A „Csekk” oldal átnevezése „Csekkek és rádiók”-ra.
Újraterveztük a navigációs sávot, és új subnav-t adtunk hozzá, hogy megkönnyítsük a webhelyek és a dokumentumok verzióinak megkerülését.
Új billentyűparancs hozzáadva a keresőmezőhöz: Ctrl + /.

Sass

Elhagytuk az alapértelmezett Sass térképegyesítéseket, hogy megkönnyítsük a redundáns értékek eltávolítását. Ne feledje, hogy most minden értéket meg kell határoznia a Sass térképeken, például $theme-colors. Nézze meg, hogyan kell kezelni a Sass térképeket .
Töréscolor-yiq()A függvény és a kapcsolódó változók átnevezve color-contrast()a következőre: már nem kapcsolódik a YIQ színtérhez. Lásd #30168.
- $yiq-contrasted-thresholdátnevezve erre: $min-contrast-ratio.
- $yiq-text-darkés $yiq-text-lightennek megfelelően átnevezzük $color-contrast-darkés -ra $color-contrast-light.
TörésA Media Query mixins paraméterei megváltoztak a logikusabb megközelítés érdekében.
- media-breakpoint-down()magát a töréspontot használja a következő töréspont helyett (pl . a -nál kisebb nézetablakok célzása media-breakpoint-down(lg)helyett ).media-breakpoint-down(md)lg
- Hasonlóképpen, a második paraméter media-breakpoint-between()is magát a töréspontot használja a következő töréspont helyett (pl . a és közötti nézetablakok media-between(sm, lg)helyett ).media-breakpoint-between(sm, md)smlg
TörésNyomtatási stílusok és $enable-print-stylesváltozók eltávolítva. A nyomtatási megjelenítési osztályok még mindig vannak. Lásd: #28339 .
TörésEldobta color()a , theme-color(), és gray()függvényeket a változók javára. Lásd: #29083 .
Töréstheme-color-level()A funkció átnevezte a következőre, color-level()és mostantól bármilyen színt elfogad a színek helyett $theme-color. Lásd: #29083 Vigyázat: color-level() később bekerült a v5.0.0-alpha3.
TörésÁtnevezve $enable-prefers-reduced-motion-media-queryés $enable-pointer-cursor-for-buttons-ra $enable-reduced-motionés $enable-button-pointersa rövidség kedvéért.
TörésEltávolította a bg-gradient-variant()keverőt. Használja az .bg-gradientosztályt színátmenetek hozzáadásához az elemekhez a generált .bg-gradient-*osztályok helyett.
Törés Korábban elavult keverések eltávolítva:
- hover, hover-focus, plain-hover-focus, éshover-focus-active
- float()
- form-control-mixin()
- nav-divider()
- retina-img()
- text-hide()(a hozzá tartozó használati osztályt is elhagyta, .text-hide)
- visibility()
- form-control-focus()
Törésscale-color()A funkciót átnevezte a következőre, shift-color()hogy elkerülje a Sass saját színskálázási funkciójával való ütközést.
box-shadowA mixins mostantól engedélyezi az nullértékeket és nonea több argumentumból való csökkenést. Lásd: #30394 .
A border-radius()mixin most már alapértelmezett értéket kapott.

Színrendszer

A színrendszer, amely működött, color-level()és $theme-color-intervaleltávolították egy új színrendszer javára. A kódbázisunkban található összes lighten()és darken()függvény helyébe tint-color()és shade-color(). Ezek a funkciók a színt fehérrel vagy feketével keverik, ahelyett, hogy meghatározott mértékben módosítanák a világosságot. A shift-color()színt színezi vagy árnyékolja attól függően, hogy a súlyparamétere pozitív vagy negatív. További részletekért lásd: #30622 .
Új árnyalatok és árnyalatok hozzáadva minden színhez, kilenc külön színt biztosítva minden alapszínhez, új Sass-változóként.
Javított színkontraszt. A színkontraszt aránya 3:1-ről 4,5:1-re változott, és frissített kék, zöld, cián és rózsaszín színek biztosítják a WCAG 2.1 AA kontrasztot. A színkontraszt színünket is megváltoztatta $gray-900-ról -ra $black.
Színrendszerünk támogatása érdekében új egyedi funkciókat tint-color()és shade-color()funkciókat adtunk hozzá a színek megfelelő keveréséhez.

Rács frissítések

Új töréspont! xxlÚj töréspont hozzáadva ehhez 1400pxés felfelé. Nincs változás az összes többi törésponton.
Továbbfejlesztett ereszcsatornák. Az ereszcsatornák most remsben vannak beállítva, és keskenyebbek, mint a v4 ( 1.5rem, vagy körülbelül 24px, lefelé a -tól 30px). Ez összehangolja a rácsrendszerünk ereszcsatornáit a távolsági segédprogramjainkkal.
- Új ereszcsatorna osztály ( .g-*, .gx-*, és ) hozzáadva .gy-*a vízszintes/függőleges ereszcsatornák, vízszintes ereszcsatornák és függőleges ereszcsatornák vezérléséhez.
- TörésÁtnevezve .no-gutterserre, .g-0hogy megfeleljen az új ereszcsatorna-közműveknek.
Az oszlopok már nem position: relativeérvényesek, ezért előfordulhat, hogy hozzá .position-relativekell adnia néhány elemet a viselkedés visszaállításához.
TörésTöbb olyan .order-*osztályt is kihagytak, amelyek gyakran használaton kívül voltak. Most már csak .order-1a .order-5dobozból kivéve.
TörésEldobta az .mediaösszetevőt, mivel könnyen reprodukálható segédprogramokkal. Példaért lásd: #28265 és a rugalmas segédprogramok oldala .
Törés bootstrap-grid.cssmost csak box-sizing: border-boxaz oszlopra vonatkozik a globális dobozméret visszaállítása helyett. Így a rácsstílusaink több helyen is használhatók interferencia nélkül.
$enable-grid-classestöbbé nem tiltja le a tárolóosztályok létrehozását. Lásd #29146.
A mixin alapértelmezettre frissítve make-colegyenlő oszlopokra, meghatározott méret nélkül.

Tartalom, újraindítás stb

Az RFS most alapértelmezés szerint engedélyezve van. A mixint használó fejlécekfont-size()automatikusan hozzáigazítjákfont-sizea nézetablakhoz. Ezt a funkciót korábban a 4-es verziónál engedélyezték.
TörésMegújítottuk a megjelenítési tipográfiánkat, hogy lecseréljük a $display-*változóinkat és egy $display-font-sizesSass térképet. Szintén eltávolította az egyes $display-*-weightváltozókat az egyszeri $display-font-weightés beállított font-sizes-hez.
Két új .display-*címsorméret hozzáadva, .display-5és .display-6.
A hivatkozások alapértelmezés szerint alá vannak húzva (nem csak lebegtetéskor), hacsak nem bizonyos összetevők részét képezik.
Újratervezett táblázatok stílusuk felfrissítésére és CSS-változókkal való újjáépítésére a stílus pontosabb szabályozása érdekében.
TörésA beágyazott táblázatok többé nem öröklik a stílusokat.
Törés .thead-lightés az összes táblázatelemhez használható változatosztályok .thead-darkjavára kiesnek ( , , , , és )..table-*theadtbodytfoottrthtd
TörésA table-row-variant()mixin át lett nevezve, table-variant()és csak 2 paramétert fogad el: $color(színnév) és $value(színkód). A szegélyszín és a kiemelő színek kiszámítása automatikusan történik a táblázat faktorváltozói alapján.
A táblázatcellák kitöltési változóinak felosztása -yés -x.
TörésKiesett .pre-scrollableosztály. Lásd #29135
Törés .text-*A segédprogramok többé nem adnak hozzá lebegési és fókuszállapotokat a hivatkozásokhoz. .link-*segítő osztályok használhatók helyette. Lásd #29267
TörésKiesett .text-justifyosztály. Lásd #29793
Törés <hr>Az attribútum jobb támogatása érdekében most a heighthelyett az elemeket használják . Ez lehetővé teszi a padding segédprogramok használatát is vastagabb elválasztók létrehozásához (pl. ).bordersize<hr class="py-1">
Állítsa vissza az alapértelmezett vízszintes beállítást , padding-leftaz elemeket pedig a böngésző alapértelmezéséről a következőre .<ul><ol>40px2rem
Hozzáadva $enable-smooth-scroll, amely scroll-behavior: smoothglobálisan érvényes – kivéve azokat a felhasználókat, akik csökkentett mozgást kérnek a médialekérdezés révén prefers-reduced-motion. Lásd #31877

RTL

A vízszintes irányspecifikus változókat, segédprogramokat és mixineket mind átnevezték, hogy olyan logikai tulajdonságokat használjanak, mint amilyenek a flexbox elrendezésekben találhatók – pl . startés endhelyett .leftright

Űrlapok

Új lebegő űrlapok hozzáadva! A Lebegő címkék példáját teljes mértékben támogatott űrlapösszetevőkké emeltük. Tekintse meg az új Lebegő címkék oldalt.
Törés Összevont natív és egyéni űrlapelemek. A jelölőnégyzetek, rádiók, kijelölések és egyéb bemenetek, amelyek natív és egyéni osztályokkal rendelkeztek a v4-ben, összevonásra kerültek. Mostantól szinte minden űrlapelemünk teljesen egyedi, legtöbbjük egyéni HTML-kód nélkül.
- .custom-control.custom-checkboxmost van .form-check.
- .custom-control.custom-custom-radiomost van .form-check.
- .custom-control.custom-switchmost van .form-check.form-switch.
- .custom-selectmost van .form-select.
- .custom-fileés .form-filea tetején egyéni stílusok váltották fel őket .form-control.
- .custom-rangemost van .form-range.
- Kiesett natív .form-control-fileés .form-control-range.
TörésLeesett .input-group-appendés .input-group-prepend. Most már csak gombokat adhat hozzá .input-group-texta beviteli csoportokhoz közvetlen gyermekként.
Az érvényesítési visszacsatolási hibával rendelkező bemeneti csoport régóta fennálló hiányzó határ sugara végül kijavításra került egy további .has-validationosztály hozzáadásával az érvényesítéssel rendelkező bemeneti csoportokhoz.
Törés Elhagytuk az űrlapspecifikus elrendezési osztályokat a rácsrendszerünkhöz. Használja rácsunkat és segédprogramjainkat a .form-group, .form-row, vagy helyett .form-inline.
TörésAz űrlapcímkékhez most már szükséges .form-label.
Törés .form-texttöbbé nem állít be display, így a HTML elem megváltoztatásával tetszőleges soron belüli vagy blokkolható súgószöveg hozható létre.
Az űrlapvezérlőket már nem használják height, ha lehetséges, javítva, ehelyett elhalasztják a min-heighttestreszabást és a többi összetevővel való kompatibilitást.
Az érvényesítési ikonok már nem vonatkoznak a következőre: <select>s with multiple.
Átrendezték a forrás Sass fájlokat a alatt scss/forms/, beleértve a beviteli csoportstílusokat.

Alkatrészek

paddingA riasztások, navigációs útvonalak, kártyák, legördülő menük, listacsoportok, módok, előugró ablakok és elemleírások egységesített értékei a $spacerváltozónkon alapulnak. Lásd: #30564 .

Harmonika

Új harmonika komponens hozzáadva .

Figyelmeztetések

A figyelmeztetésekhez most már ikonokkal ellátott példák is tartoznak .
Eltávolítottuk az <hr>s egyéni stílusait az egyes figyelmeztetésekben, mivel már használják a currentColor.

Jelvények

TörésEldobta az összes .badge-*színosztályt a háttér-segédprogramokhoz (pl. használja .bg-primarya helyett .badge-primary).
TörésEldobva — használja inkább .badge-pilla .rounded-pillsegédprogramot.
TörésEltávolítottuk az egérmutató- és fókuszstílusokat a <a>és <button>elemekhez.
Megnövelt alapértelmezett kitöltés a jelvényekhez / -től .25em/ .5em-ig ..35em.65em

Zsemlemorzsa

Leegyszerűsítette a navigációs útvonal alapértelmezett megjelenését a padding, background-colorés a eltávolításával border-radius.
Új egyéni CSS-tulajdonság hozzáadva --bs-breadcrumb-divideraz egyszerű testreszabáshoz anélkül, hogy újra kellene fordítani a CSS-t.

Gombok

Törés A jelölőnégyzetekkel vagy rádiókkal ellátott váltógombokhoz már nincs szükség JavaScriptre, és új jelölésük van. Többé nincs szükség burkolóelemre, adjuk hozzá.btn-checka<input>, és párosítsuk a.btn-n található osztályokkal<label>. Lásd: #30650 . Az ehhez tartozó dokumentumok átkerültek a Gombok oldalunkról az új Űrlapok szakaszba.
Törés .btn-blockA rezsi miatt kiesett . Ahelyett, hogy a gombon használná , tekerje be a gombokat és egy segédprogramot, hogy szükség szerint helyezze el őket egymástól .btn-block. Váltson reszponzív osztályokra, hogy még jobban irányíthassa őket. Néhány példaért olvassa el a dokumentumokat..btn.d-grid.gap-*
Frissítettük a mi button-variant()és button-outline-variant()mixinket, hogy támogassuk a további paramétereket.
Frissített gombok, hogy nagyobb kontrasztot biztosítsanak lebegő és aktív állapotokban.
A letiltott gombokon most a következő látható: pointer-events: none;.

Kártya

TörésKiesett .card-decka rácsunk javára. Csomagolja be kártyáit oszloposztályokba, és adjon hozzá egy szülőtárolót .row-cols-*a kártyapaklik újbóli létrehozásához (de jobban szabályozva az érzékeny igazítást).
TörésKiesett .card-columnsa kőművesség javára. Lásd: #28922 .
TörésA .cardalapú harmonikát egy új harmonika komponensre cseréltük .

Körhinta

.carousel-darkÚj változat hozzáadva a sötét szöveghez, a kezelőszervekhez és a jelzőfényekhez (nagyon világosabb hátterekhez).
A körhinta vezérlőelemeihez tartozó chevron ikonok helyére a Bootstrap Icons új SVG-jei kerültek .

Bezárás gomb

TörésÁtnevezve .closeerre .btn-closea kevésbé általános név miatt.
A Bezárás gombok mostantól egy background-image(beágyazott SVG-t) használnak ×a HTML-ben a helyett, lehetővé téve a könnyebb testreszabást anélkül, hogy meg kellene érintenie a jelölést.
.btn-close-whiteÚj változat hozzáadva , amely filter: invert(1)lehetővé teszi a nagyobb kontrasztú ikonok elvetését sötétebb háttér előtt.

Összeomlás

A harmonika tekercses rögzítése eltávolítva.

Legördülő menük

Új változat és kapcsolódó változók hozzáadva .dropdown-menu-darkaz igény szerinti sötét legördülő listákhoz.
Új változó hozzáadva a következőhöz: $dropdown-padding-x.
Sötétítette a legördülő elválasztót a jobb kontraszt érdekében.
TörésA legördülő menü összes eseménye a legördülő menü váltógombján aktiválódik, majd buborékolással felkerül a szülőelemre.
A legördülő menükben mostantól be van data-bs-popper="static"állítva egy attribútum, ha a legördülő menü helye statikus, vagy a legördülő menü a navigációs sávban található. Ezt a JavaScript hozzáadja, és segít nekünk egyéni pozícióstílusok használatában anélkül, hogy megzavarnánk Popper pozicionálását.
TörésEldobott flipopció a legördülő beépülő modulnál a natív Popper konfiguráció javára. Mostantól letilthatja a tükrözési viselkedést úgy, hogy üres tömböt ad át az fallbackPlacementsopcióhoz a flip módosítóban.
A legördülő menük mostantól kattinthatók az automatikus bezárásautoClose kezelésének új beállításával . Ezzel a lehetőséggel elfogadhatja a legördülő menün belüli vagy kívüli kattintást, hogy interaktívvá tegye.
A legördülő menük mostantól támogatják .dropdown-itemaz s-be csomagolt <li>s-t.

Jumbotron

TörésEldobta a jumbotron komponenst, mivel az segédprogramokkal replikálható. Tekintse meg az új Jumbotron példánkat a bemutatóhoz.

Listacsoport

.list-group-numberedÚj módosító hozzáadva a listacsoportokhoz.

Navi és fülek

nullÚj változók hozzáadva a font-size, font-weight, color, és :hover coloraz .nav-linkosztályhoz.

Navbars

TörésA navigációs sávokhoz mostantól egy konténerre van szükség (a térközkövetelmények és a CSS szükségességének drasztikus leegyszerűsítése érdekében).
TörésAz .activeosztály már nem alkalmazható .nav-items-re, közvetlenül az s-re kell alkalmazni .nav-link.

Offcanvas

Hozzáadtuk az új offcanvas összetevőt .

Lapszámozás

Az oldalszámozási hivatkozások mostantól testreszabhatók margin-left, amelyek dinamikusan lekerekítik az összes sarkot, ha elválasztják őket egymástól.
s hozzáadva transitionaz oldalszámozási hivatkozásokhoz.

Popovers

TörésÁtnevezve .arrowerre .popover-arrowaz alapértelmezett felugró sablonunkban.
whiteListAz opció átnevezve erre: allowList.

Fonók

prefers-reduced-motion: reduceA Spinnerek most az animációk lelassításával tisztelegnek . Lásd #31882 .
Továbbfejlesztett fonó függőleges igazítása.

Pirítósok

A pirítósokat a pozícionáló segédprogramok.toast-container segítségével a - ban lehet elhelyezni .
A pirítás alapértelmezett időtartama 5 másodpercre módosult.
Eltávolították overflow: hiddena pirítósokról, és helyükre megfelelő border-radiuss calc()funkciókkal.

Eszköztippek

TörésÁtnevezve .arrowerre .tooltip-arrowaz alapértelmezett elemleírás-sablonunkban.
TörésAz alapértelmezett érték az előugró elemek jobb elhelyezése érdekében a fallbackPlacementskövetkezőre módosul .['top', 'right', 'bottom', 'left']
TöréswhiteListAz opció átnevezve erre: allowList.

segédprogramok

TörésTöbb segédprogramot átnevezettek, hogy az iránynevek helyett logikai tulajdonságneveket használjanak az RTL támogatás hozzáadásával:
- Átnevezve .left-*és .right-*erre .start-*és .end-*.
- Átnevezve .float-leftés .float-righterre .float-startés .float-end.
- Átnevezve .border-leftés .border-righterre .border-startés .border-end.
- Átnevezve .rounded-leftés .rounded-righterre .rounded-startés .rounded-end.
- Átnevezve .ml-*és .mr-*erre .ms-*és .me-*.
- Átnevezve .pl-*és .pr-*erre .ps-*és .pe-*.
- Átnevezve .text-leftés .text-righterre .text-startés .text-end.
TörésA negatív margók alapértelmezés szerint letiltva.
Új .bg-bodyosztály hozzáadva a <body>háttér gyors beállításához további elemekhez.
Új pozíció segédprogramok hozzáadva a következőhöz: top, right, bottom, és left. Az értékek közé tartozik az egyes tulajdonságokhoz tartozó 0, 50%és .100%
.translate-middle-xÚj és segédprogramok hozzáadva .translate-middle-yaz abszolút/fix pozíciójú elemek vízszintes vagy függőleges középpontjához.
border-widthÚj segédprogramok hozzáadva .
TörésÁtnevezve .text-monospaceerre: .font-monospace.
TörésEltávolították .text-hide, mivel ez egy elavult módszer a szöveg elrejtésére, amelyet többé nem szabad használni.
Hozzáadott .fs-*segédprogramok a font-sizesegédprogramokhoz (az RFS engedélyezve). Ezek ugyanazt a léptéket használják, mint a HTML alapértelmezett címsorai (1-6, nagytól kicsiig), és a Sass map segítségével módosíthatók.
TörésA .font-weight-*segédprogramok átnevezése .fw-*a rövidség és a következetesség érdekében.
TörésA .font-style-*segédprogramok átnevezése .fst-*a rövidség és a következetesség érdekében.
.d-gridMegjelenítési segédprogramokhoz és új gapsegédprogramokhoz ( ) hozzáadva .gapa CSS Grid és flexbox elrendezésekhez.
TörésEltávolította .rounded-smés rounded-lg, és bevezetett egy új osztályskála, .rounded-0a .rounded-3. Lásd #31687 .
line-heightÚj segédprogramok hozzáadva : .lh-1, .lh-sm, .lh-baseés .lh-lg. Lásd itt .
Áthelyeztük a .d-nonesegédprogramot a CSS-ben, hogy nagyobb súlyt kapjon a többi megjelenítési segédprogramhoz képest.
Kibővítette a .visually-hidden-focusablesegédprogramot, hogy konténereken is dolgozzon, a segítségével :focus-within.

Segítők

Törés A reszponzív beágyazási segítőket átnevezték aránysegítőkre , új osztálynevekkel és továbbfejlesztett viselkedéssel, valamint egy hasznos CSS-változóval.
- Az osztályokat átneveztük a képarány módosítása byérdekében . xPéldául .ratio-16by9most van .ratio-16x9.
- Elvettük a .embed-responsive-itemés elemcsoport választót egy egyszerűbb .ratio > *választó helyett. Nincs szükség több osztályra, és az aránysegéd mostantól bármilyen HTML elemmel működik.
- A $embed-responsive-aspect-ratiosSass térképet átnevezték erre $aspect-ratios, értékeit pedig leegyszerűsítették, hogy az osztálynév és a százalék key: valuepárként szerepeljen.
- A CSS-változók mostantól a Sass-térkép minden egyes értékéhez kerülnek előállításra. Módosítsa a --bs-aspect-ratiováltozót, .ratiohogy bármilyen egyéni képarányt hozzon létre .
Törés A „Képernyőolvasó” osztályok mostantól „vizuálisan rejtett” osztályok .
- scss/helpers/_screenreaders.scssMódosította a Sass fájltscss/helpers/_visually-hidden.scss
- Átnevezve .sr-onlyés .sr-only-focusable-ra .visually-hiddenés.visually-hidden-focusable
- Átnevezve sr-only()és sr-only-focusable()keveredik erre visually-hidden()és visually-hidden-focusable().
bootstrap-utilities.cssmost már segítőinket is tartalmazza. A segítőket többé nem kell egyéni buildekben importálni.

JavaScript

Megszűnt a jQuery-függőség , és átírták a bővítményeket, hogy normál JavaScript-be legyenek.
TörésAz összes JavaScript-bővítmény adatattribútumai mostantól névtérben vannak, hogy segítsenek megkülönböztetni a Bootstrap-funkciókat a harmadik felektől és a saját kódodtól. Például a data-bs-togglehelyett használjuk data-toggle.
Most már minden beépülő modul elfogad egy CSS-választót első argumentumként. A bővítmény új példányának létrehozásához átadhat egy DOM-elemet vagy bármely érvényes CSS-választót:
```
const modal = new bootstrap.Modal('#myModal')
const dropdown = new bootstrap.Dropdown('[data-bs-toggle="dropdown"]')
```
popperConfigátadható függvényként, amely elfogadja a Bootstrap alapértelmezett Popper konfigurációját argumentumként, így ezt az alapértelmezett konfigurációt a maga módján egyesítheti. A legördülő menükre, felugró ablakokra és elemleírásokra vonatkozik.
Az alapértelmezett érték a Popper-elemek jobb elhelyezése érdekében a fallbackPlacementskövetkezőre módosul . A legördülő menükre, felugró ablakokra és elemleírásokra vonatkozik.['top', 'right', 'bottom', 'left']
Az aláhúzás eltávolítva az olyan nyilvános statikus metódusokról, mint a _getInstance()→ getInstance().