Ugrás a fő tartalomhoz Ugrás a dokumentumok navigációjához
Check
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.

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

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

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

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

  • .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 &times;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.
  • Ú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

Listacsoport

  • nullÚj változók hozzáadva a font-size, font-weight, color, és :hover coloraz .nav-linkosztályhoz.
  • 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

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().