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

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 .thead-darkkimaradnak a .table-*változatosztályok javára, amelyek minden táblázatelemhez használhatók ( thead, tbody, tfoot, tr, thés td).
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-checkmost van .form-check.
- .custom-check.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 csoportok közvetlen gyermekeiké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 módosításával tetszés szerint hozhat létre soron belüli vagy blokkolt súgószöveget.
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 s egyéni stílusait <hr>minden figyelmeztetésben, 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 ikonokat a Bootstrap Icons új SVG-ire cserélték .

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 van data-bs-popper="static"beállítva egy attribútum, amikor a legördülő menü helye statikus, és data-bs-popper="none"amikor a legördülő menü a navigációs sávban van. 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 kattintást a legördülő menün belül vagy kívül, 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).

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