Preskočiť na hlavný obsah Preskočiť na navigáciu v dokumentoch
Check
in English

Migrácia na v5

Sledujte a kontrolujte zmeny zdrojových súborov Bootstrap, dokumentácie a komponentov, ktoré vám pomôžu migrovať z verzie 4 na verziu 5.

Na tejto stránke

v5.2.0

Osviežený dizajn

Bootstrap v5.2.0 obsahuje jemnú aktualizáciu dizajnu pre niekoľko komponentov a vlastností v rámci projektu, najmä prostredníctvom vylepšených border-radiushodnôt tlačidiel a ovládacích prvkov formulára . Naša dokumentácia bola tiež aktualizovaná o novú domovskú stránku, jednoduchšie rozloženie dokumentov, ktoré už nezbaľuje časti bočného panela, a výraznejšie príklady ikon Bootstrap .

Viac premenných CSS

Aktualizovali sme všetky naše komponenty, aby používali premenné CSS. Zatiaľ čo Sass stále podporuje všetko, každý komponent bol aktualizovaný tak, aby obsahoval premenné CSS v základných triedach komponentov (napr. .btn), čo umožňuje viac prispôsobenia Bootstrapu v reálnom čase. V nasledujúcich vydaniach budeme pokračovať v rozširovaní nášho používania premenných CSS do nášho rozloženia, formulárov, pomocníkov a pomôcok. Prečítajte si viac o premenných CSS v každom komponente na príslušných stránkach dokumentácie.

Využitie premennej CSS bude do Bootstrapu 6 trochu neúplné. Aj keď by sme ich radi úplne implementovali, existuje riziko, že spôsobia zmeny. Napríklad nastavenie $alert-border-width: var(--bs-border-width)v našom zdrojovom kóde preruší potenciálny Sass vo vašom vlastnom kóde, ak ste to $alert-border-width * 2z nejakého dôvodu robili.

Vždy, keď to bude možné, budeme naďalej presadzovať viac premenných CSS, ale uvedomte si, že naša implementácia môže byť vo verzii 5 mierne obmedzená.

Nový_maps.scss

Bootstrap v5.2.0 predstavil nový súbor Sass s _maps.scss. Vytiahne niekoľko máp Sass z _variables.scss, aby vyriešil problém, keď aktualizácie pôvodnej mapy neboli aplikované na sekundárne mapy, ktoré ich rozširujú. Napríklad aktualizácie $theme-colorsneboli aplikované na iné tematické mapy, ktoré sa spoliehali na $theme-colors, čím narušili kľúčové pracovné postupy prispôsobenia. Stručne povedané, Sass má obmedzenie, že po použití predvolenej premennej alebo mapy ju nemožno aktualizovať. Podobný nedostatok majú premenné CSS, keď sa používajú na vytváranie iných premenných CSS.

To je dôvod, prečo úpravy premenných v Bootstrape musia nasledovať po @import "functions", ale pred @import "variables"a po zvyšok nášho zásobníka importov. To isté platí pre mapy Sass – pred ich použitím musíte prepísať predvolené hodnoty. Nasledujúce mapy boli presunuté do novej _maps.scss:

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

Vaše vlastné zostavy Bootstrap CSS by teraz mali vyzerať asi takto so samostatným importom máp.

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

Nové inžinierske siete

Dodatočné zmeny

  • Zavedená nová $enable-container-classesmožnosť. — Teraz, keď sa prihlásite do experimentálneho rozloženia mriežky CSS, .container-*triedy sa budú stále kompilovať, pokiaľ táto možnosť nie je nastavená na false. Aj kontajnery si teraz zachovávajú svoje odkvapové hodnoty.

  • Komponent Offcanvas má teraz responzívne variácie . Pôvodná .offcanvastrieda zostáva nezmenená – skrýva obsah vo všetkých výrezoch. Aby bola responzívna, zmeňte túto .offcanvastriedu na akúkoľvek .offcanvas-{sm|md|lg|xl|xxl}triedu.

  • Hrubšie oddeľovače stolov sú teraz voliteľné. — Odstránili sme hrubší a ťažšie prepisovateľný okraj medzi skupinami tabuliek a presunuli sme ho do voliteľnej triedy, ktorú môžete použiť, .table-group-divider. Príklad nájdete v tabuľkových dokumentoch.

  • Scrollspy bol prepísaný tak , aby používal rozhranie Intersection Observer API , čo znamená, že už nepotrebujete relatívne nadradené obaly, zastaranéoffsetkonfigurácie a ďalšie. Hľadajte, aby vaše implementácie Scrollspy boli presnejšie a konzistentnejšie v ich navigačnom zvýraznení.

  • Vyskakovacie okná a popisy teraz používajú premenné CSS. Niektoré premenné CSS boli aktualizované od svojich náprotivkov Sass, aby sa znížil počet premenných. V dôsledku toho boli v tomto vydaní zastarané tri premenné: $popover-arrow-color, $popover-arrow-outer-colora $tooltip-arrow-color.

  • Pribudli noví .text-bg-{color}pomocníci. Namiesto nastavovania jednotlivých .text-*a .bg-*pomôcok môžete teraz pomocou pomocníkov .text-bg-*nastaviť kontrastné background-colorpopredie color.

  • Pridaný .form-check-reversemodifikátor na prevrátenie poradia štítkov a súvisiacich začiarkavacích políčok/rádia.

  • Pridaná podpora pruhovaných stĺpcov do tabuliek prostredníctvom novej .table-striped-columnstriedy.

Úplný zoznam zmien nájdete v projekte v5.2.0 na GitHub .

v5.1.0

  • Pridaná experimentálna podpora pre rozloženie CSS Grid . — Toto je vo vývoji a ešte nie je pripravené na produkčné použitie, ale môžete sa prihlásiť do novej funkcie cez Sass. Ak ju chcete povoliť, deaktivujte predvolenú mriežku nastavením $enable-grid-classes: falsea povoľte mriežku CSS nastavením $enable-cssgrid: true.

  • Aktualizované navigačné panely, aby podporovali offcanvas. — Pridajte zásuvky offcanvas do ľubovoľnej navigačnej lišty s responzívnymi .navbar-expand-*triedami a nejakým označením offcanvas.

  • Pridaný nový zástupný komponent . — Naša najnovšia súčasť, spôsob poskytovania dočasných blokov namiesto skutočného obsahu, ktorý vám pomôže naznačiť, že sa na vašom webe alebo v aplikácii stále niečo načítava.

  • Doplnok Collapse teraz podporuje horizontálne zbalenie . — Pridajte .collapse-horizontaldo svojho .collapse, ak chcete zbaliť widthnamiesto height. Vyhnite sa prekresľovaniu prehliadača nastavením a min-heightalebo height.

  • Pridali sa noví pomocníci zásobníka a zvislého pravidla. — Rýchlo aplikujte viacero vlastností flexboxu na rýchle vytváranie vlastných rozložení so zásobníkmi . Vyberte si z horizontálnych ( .hstack) a vertikálnych ( .vstack) stohov. Pomocou nových pomocníkov pridajte zvislé oddeľovače podobné <hr>prvkom ..vr

  • Pridané nové globálne :rootpremenné CSS. — Do úrovne bolo pridaných niekoľko nových premenných CSS :rootna ovládanie <body>štýlov. Pracujeme na ďalších, vrátane našich nástrojov a komponentov, ale zatiaľ si prečítajte premenné CSS v sekcii Prispôsobiť .

  • Prepracované nástroje farieb a pozadia na používanie premenných CSS a pridané nové nástroje na nepriehľadnosť textu a nepriehľadnosť pozadia . — .text-* a obslužné .bg-*programy sú teraz zostavené s premennými CSS a rgba()hodnotami farieb, čo vám umožňuje jednoducho prispôsobiť akúkoľvek pomôcku pomocou nových pomôcok na nepriehľadnosť.

  • Pridané nové príklady úryvkov, ktoré ukazujú, ako prispôsobiť naše komponenty. — Pripravte na použitie prispôsobené komponenty a ďalšie bežné dizajnové vzory s našimi novými príkladmi Snippets . Zahŕňa päty , rozbaľovacie zoznamy , skupiny zoznamov a modály .

  • Odstránili sa nepoužívané štýly polohovania z kontextových okien a popisov , pretože s nimi pracuje výlučne Popper. $tooltip-marginbol zastaraný a nastavený na nullv procese.

Chcete viac informácií? Prečítajte si blogový príspevok verzie 5.1.0.

Hej ty tam! Zmeny v našom prvom veľkom vydaní Bootstrap 5, v5.0.0, sú zdokumentované nižšie. Neodrážajú dodatočné zmeny uvedené vyššie.

Závislosti

  • Zrušil jQuery.
  • Inovované z Popper v1.x na Popper v2.x.
  • Libsass bol nahradený Dart Sass, pretože náš kompilátor Sass, keďže Libsass bol zastaraný.
  • Presťahovali sme sa z Jekyllu do Huga, aby sme vytvorili našu dokumentáciu

Podpora prehliadača

  • Vypadol Internet Explorer 10 a 11
  • Vynechaný Microsoft Edge < 16 (starší Edge)
  • Zrušený Firefox < 60
  • Pokles Safari < 12
  • Zrušené iOS Safari < 12
  • Vypustený Chrome < 60

Zmeny v dokumentácii

  • Prepracovaná domovská stránka, rozloženie dokumentov a päta.
  • Pridaný nový sprievodca balíkom .
  • Pridaná nová sekcia Prispôsobiť , ktorá nahradila stránku Theming v4 s novými podrobnosťami o Sass, globálnymi možnosťami konfigurácie, farebnými schémami, premennými CSS a ďalšími.
  • Preorganizovali sme celú dokumentáciu formulárov do novej sekcie Formuláre , čím sme obsah rozdelili na viac zamerané stránky.
  • Podobne sa aktualizovala sekcia Rozloženie , aby sa obsah mriežky jasnejšie rozvinul.
  • Stránka komponentu „Navs“ bola premenovaná na „Navs & Tabs“.
  • Stránka „Šeky“ bola premenovaná na „Šeky a rádiá“.
  • Prepracovali sme navigačnú lištu a pridali novú pomocnú navigáciu, aby sme uľahčili orientáciu na našich stránkach a verziách dokumentov.
  • Pridaná nová klávesová skratka pre vyhľadávacie pole: Ctrl + /.

Sass

  • Zrušili sme predvolené zlúčenia máp Sass, aby sme uľahčili odstránenie nadbytočných hodnôt. Majte na pamäti, že teraz musíte definovať všetky hodnoty v mapách Sass, ako napríklad $theme-colors. Zistite, ako sa vysporiadať s mapami Sass .

  • Prelomeniecolor-yiq()Funkcia a súvisiace premenné boli premenované na color-contrast(), pretože už nesúvisia s farebným priestorom YIQ. Pozri #30168.

    • $yiq-contrasted-thresholdje premenovaný na $min-contrast-ratio.
    • $yiq-text-darka $yiq-text-lightsú premenované na $color-contrast-darka $color-contrast-light.

  • PrelomenieParametre mixov mediálnych dopytov sa zmenili pre logickejší prístup.

    • media-breakpoint-down()používa samotný bod prerušenia namiesto nasledujúceho bodu prerušenia (napr. media-breakpoint-down(lg)namiesto media-breakpoint-down(md)cieľových výrezov menších ako lg).
    • Podobne druhý parameter v media-breakpoint-between()tiež používa samotný bod prerušenia namiesto nasledujúceho bodu prerušenia (napr. media-between(sm, lg)namiesto media-breakpoint-between(sm, md)cieľových výrezov medzi sma lg).

  • PrelomenieOdstránené štýly tlače a $enable-print-stylespremenná. Triedy zobrazenia tlače sú stále k dispozícii. Pozri #28339 .

  • PrelomenieFunkcie color(), theme-color(), a boli gray()zrušené v prospech premenných. Pozri #29083 .

  • PrelomenieFunkcia bola premenovaná theme-color-level()na color-level()a teraz prijíma akúkoľvek požadovanú farbu namiesto iba $theme-colorfarieb. Pozri #29083 Pozor: color-level() bol neskôr zaradený do v5.0.0-alpha3.

  • PrelomeniePremenované $enable-prefers-reduced-motion-media-querya $enable-pointer-cursor-for-buttonsna $enable-reduced-motiona $enable-button-pointerspre stručnosť.

  • PrelomenieOdstránil bg-gradient-variant()mixin. Použite .bg-gradienttriedu na pridanie prechodov do prvkov namiesto vygenerovaných .bg-gradient-*tried.

  • Prelomenie Odstránené predtým zastarané mixy:

    • hover, hover-focus, plain-hover-focus, ahover-focus-active
    • float()
    • form-control-mixin()
    • nav-divider()
    • retina-img()
    • text-hide()(tiež zrušila pridruženú pomocnú triedu, .text-hide)
    • visibility()
    • form-control-focus()

  • Prelomeniescale-color()Funkcia bola premenovaná na shift-color(), aby sa predišlo kolízii s vlastnou funkciou škálovania farieb Sass.

  • box-shadowmixins teraz umožňujú nullhodnoty a vypúšťajú nonez viacerých argumentov. Pozri #30394 .

  • Mixin border-radius()má teraz predvolenú hodnotu.

Farebný systém

  • Systém farieb, ktorý pracoval color-level()a $theme-color-intervalbol odstránený v prospech nového systému farieb. Všetky funkcie lighten()a darken()v našej kódovej základni sú nahradené tint-color()a shade-color(). Tieto funkcie zmiešajú farbu buď s bielou alebo čiernou, namiesto toho, aby zmenili jej svetlosť o pevnú hodnotu. V shift-color()závislosti od toho, či je jeho hmotnostný parameter kladný alebo záporný, bude buď tónovať alebo odtieňovať farbu. Ďalšie podrobnosti nájdete v č. 30622 .

  • Pridané nové odtiene a odtiene pre každú farbu, poskytujúc deväť samostatných farieb pre každú základnú farbu ako nové premenné Sass.

  • Vylepšený farebný kontrast. Zvýšený farebný kontrastný pomer z 3:1 na 4,5:1 a aktualizované modré, zelené, azúrové a ružové farby na zabezpečenie kontrastu WCAG 2.1 AA. Tiež sa zmenila naša farba kontrastu farieb z $gray-900na $black.

  • Na podporu nášho farebného systému sme pridali nové vlastné funkcie tint-color()a shade-color()funkcie na správne miešanie farieb.

Aktualizácie mriežky

  • Nový bod zlomu! Pridaný nový xxlbod prerušenia pre 1400pxa vyššie. Žiadne zmeny všetkých ostatných bodov prerušenia.

  • Vylepšené odkvapy. Odkvapy sú teraz nastavené v remoch a sú užšie ako v4 ( 1.5rem, alebo asi 24px, dole od 30px). Tým sa zarovnajú žľaby nášho mriežkového systému s našimi dištančnými sieťami.

    • Pridaná nová trieda žľabov ( .g-*, .gx-*, a .gy-*) na ovládanie horizontálnych/vertikálnych žľabov, horizontálnych žľabov a vertikálnych žľabov.
    • PrelomeniePremenované .no-guttersna, .g-0aby zodpovedali novým odkvapovým pomôckam.

  • Stĺpce sa už position: relativenepoužívajú, takže možno budete musieť pridať .position-relativeniektoré prvky, aby ste obnovili toto správanie.

  • PrelomenieZrušilo niekoľko .order-*tried, ktoré často zostali nevyužité. Teraz poskytujeme iba .order-1po .order-5rozbalení.

  • PrelomenieKomponent bol zrušený, .mediapretože ho možno ľahko replikovať pomocou nástrojov. Pozrite si príklad #28265 a stránku s nástrojmi Flex .

  • Prelomenie bootstrap-grid.cssteraz sa vzťahuje iba box-sizing: border-boxna stĺpec namiesto resetovania globálnej veľkosti poľa. Takto je možné naše mriežkové štýly použiť na viacerých miestach bez rušenia.

  • $enable-grid-classesuž nezakazuje generovanie tried kontajnerov. Pozri #29146.

  • Aktualizoval make-colmix na predvolené nastavenie na rovnaké stĺpce bez určenej veľkosti.

Obsah, reštart atď

  • RFS je teraz predvolene povolené. Nadpisy používajúcefont-size()mixin sa automaticky prispôsobia svojejfont-sizemierke výrezu. Táto funkcia bola predtým aktivovaná vo verzii 4.

  • PrelomeniePrepracovali sme našu typografiu displeja, aby sme nahradili naše $display-*premenné a $display-font-sizesmapu Sass. Taktiež boli odstránené jednotlivé $display-*-weightpremenné pre jednu $display-font-weighta upravenú font-sizes.

  • Pridané dve nové .display-*veľkosti nadpisov .display-5a .display-6.

  • Odkazy sú štandardne podčiarknuté (nie len pri umiestnení kurzora myši), pokiaľ nie sú súčasťou špecifických komponentov.

  • Prepracované tabuľky s cieľom obnoviť ich štýly a prebudovať ich pomocou premenných CSS pre väčšiu kontrolu nad štýlom.

  • PrelomenieVnorené tabuľky už nededia štýly.

  • Prelomenie .thead-lighta .thead-darkvypustia sa v prospech .table-*variantných tried, ktoré možno použiť pre všetky prvky tabuľky ( thead, tbody, tfoot, tra ) th.td

  • PrelomenieMixin table-row-variant()je premenovaný na table-variant()a akceptuje iba 2 parametre: $color(názov farby) a $value(kód farby). Farba orámovania a zvýraznenia sa automaticky vypočítajú na základe premenných faktorov tabuľky.

  • Rozdeľte premenné výplne buniek tabuľky na -ya -x.

  • PrelomenieVynechaná .pre-scrollabletrieda. Pozri #29135

  • Prelomenie .text-*utility už nepridávajú k odkazom stavy vznášania a zaostrenia. .link-*namiesto toho možno použiť pomocné triedy. Pozri #29267

  • PrelomenieVynechaná .text-justifytrieda. Pozri #29793

  • Prelomenie <hr>prvky sa teraz používajú heightnamiesto borderna lepšiu podporu sizeatribútu. To tiež umožňuje použitie výplňových nástrojov na vytvorenie hrubších deliacich priečok (napr. <hr class="py-1">).

  • Obnoviť predvolené horizontálne padding-leftzapnuté <ul>a <ol>prvky z predvoleného nastavenia prehliadača 40pxna 2rem.

  • Pridané $enable-smooth-scroll, ktoré platí scroll-behavior: smoothglobálne – s výnimkou používateľov, ktorí žiadajú o obmedzenie pohybu prostredníctvom prefers-reduced-motionmediálneho dopytu. Pozri #31877

RTL

  • Premenné, nástroje a mixiny špecifické pre horizontálny smer boli všetky premenované tak, aby používali logické vlastnosti, aké sa nachádzajú v rozložení flexboxov – napr. starta endnamiesto lefta right.

Formuláre

  • Pridané nové plávajúce formuláre! Príklad s pohyblivými štítkami sme povýšili na plne podporované komponenty formulára. Pozrite si novú stránku s pohyblivými štítkami.

  • Prelomenie Konsolidované natívne a vlastné prvky formulára. Začiarkavacie políčka, rádiá, výbery a ďalšie vstupy, ktoré mali vo verzii 4 natívne a vlastné triedy, boli konsolidované. Teraz sú takmer všetky naše prvky formulára úplne prispôsobené, väčšina bez potreby vlastného HTML.

    • .custom-control.custom-checkboxje teraz .form-check.
    • .custom-control.custom-custom-radioje teraz .form-check.
    • .custom-control.custom-switchje teraz .form-check.form-switch.
    • .custom-selectje teraz .form-select.
    • .custom-filea .form-fileboli nahradené vlastnými štýlmi navrchu .form-control.
    • .custom-rangeje teraz .form-range.
    • Vypadlo natívne .form-control-filea .form-control-range.

  • PrelomenieSpadol .input-group-appenda .input-group-prepend. Teraz môžete len pridať tlačidlá a .input-group-textako priame potomky vstupných skupín.

  • Dlhotrvajúci chýbajúci polomer hranice na vstupnej skupine s chybou overovania spätnej väzby je konečne opravený pridaním ďalšej .has-validationtriedy do vstupných skupín s validáciou.

  • Prelomenie Zrušené triedy rozloženia špecifické pre formulár pre náš mriežkový systém. Použite našu sieť a nástroje namiesto .form-group, .form-row, alebo .form-inline.

  • PrelomenieŠtítky formulárov teraz vyžadujú .form-label.

  • Prelomenie .form-textuž nenastavuje display, čo vám umožňuje vytvárať vložený alebo blokovaný text pomocníka podľa vášho želania jednoduchou zmenou prvku HTML.

  • Ovládacie prvky formulára sa už nepoužívajú opravené height, keď je to možné, namiesto toho sa odkladajú min-heightna zlepšenie prispôsobenia a kompatibility s inými komponentmi.

  • Ikony overenia sa už nepoužívajú na <select>s s multiple.

  • Preusporiadané zdrojové súbory Sass pod scss/forms/, vrátane štýlov vstupných skupín.

Komponenty

  • Zjednotené paddinghodnoty pre upozornenia, navigáciu, karty, rozbaľovacie zoznamy, skupiny zoznamov, modály, kontextové okná a popisy, ktoré budú založené na našej $spacerpremennej. Pozri #30564 .

Akordeón

Upozornenia

  • Upozornenia teraz obsahujú príklady s ikonami .

  • Odstránili sa vlastné štýly pre <hr>s v každom upozornení, pretože už používajú currentColor.

Odznaky

  • PrelomenieZrušil všetky .badge-*triedy farieb pre pomocné programy na pozadí (napr. použite .bg-primarynamiesto .badge-primary).

  • PrelomenieZahodené .badge-pill– použite .rounded-pillnamiesto toho nástroj.

  • Prelomenie<a>Pre prvky a boli odstránené štýly kurzora a kurzora <button>.

  • Zvýšená predvolená výplň pre odznaky od .25em/ .5emdo .35em/ .65em.

  • Zjednodušil predvolený vzhľad strúhanky odstránením padding, background-color, a border-radius.

  • Pridaná nová vlastná vlastnosť CSS --bs-breadcrumb-dividerpre jednoduché prispôsobenie bez potreby prekompilovania CSS.

Tlačidlá

  • Prelomenie Prepínacie tlačidlá so začiarkavacími políčkami alebo prepínačmi už nevyžadujú JavaScript a majú nové označenie. Už nepotrebujeme obalový prvok, pridajte.btn-checkho do<input>a spárujte ho s akýmikoľvek.btntriedami na<label>. Pozri #30650 . Dokumenty na to sa presunuli z našej stránky Tlačidlá do novej sekcie Formuláre.

  • Prelomenie Spustené .btn-blockpre inžinierske siete. Namiesto použitia .btn-blockna .btn, obaľte tlačidlá pomocou nástroja .d-grida .gap-*nástroja na ich rozmiestnenie podľa potreby. Prejdite na responzívne triedy a získajte nad nimi ešte väčšiu kontrolu. Prečítajte si niekoľko príkladov v dokumentoch.

  • Aktualizovali sme naše button-variant()a button-outline-variant()mixiny, aby podporovali ďalšie parametre.

  • Aktualizované tlačidlá na zabezpečenie zvýšeného kontrastu pri prechode a aktívnom stave.

  • Deaktivované tlačidlá majú teraz pointer-events: none;.

kard

  • PrelomeniePokles .card-deckv prospech našej siete. Zabaľte svoje karty do stĺpcových tried a pridajte nadradený .row-cols-*kontajner na opätovné vytvorenie balíčkov kariet (ale s väčšou kontrolou nad responzívnym zarovnaním).

  • PrelomenieUpustil .card-columnsv prospech muriva. Pozri #28922 .

  • PrelomenieNahradený základný .cardakordeón novým komponentom akordeón .

  • Pridaný nový .carousel-darkvariant pre tmavý text, ovládacie prvky a indikátory (skvelé pre svetlejšie pozadie).

  • Ikony šípky pre ovládacie prvky karuselu boli nahradené novými SVG od Bootstrap Icons .

Tlačidlo Zavrieť

  • PrelomeniePremenovaný .closena .btn-closepre menej všeobecný názov.

  • Tlačidlá zatvorenia teraz používajú v kóde HTML background-imagenamiesto (vložené SVG) &times;, čo umožňuje jednoduchšie prispôsobenie bez toho, aby ste sa museli dotknúť značky.

  • Pridaný nový .btn-close-whitevariant, ktorý používa filter: invert(1)na aktiváciu vyššieho kontrastu rušivých ikon na tmavšom pozadí.

kolaps

  • Odstránené rolovacie ukotvenie pre akordeóny.

  • Pridaný nový .dropdown-menu-darkvariant a súvisiace premenné pre tmavé rozbaľovacie ponuky na požiadanie.

  • Pridaná nová premenná pre $dropdown-padding-x.

  • Stmavenie rozbaľovacieho oddeľovača na zlepšenie kontrastu.

  • PrelomenieVšetky udalosti pre rozbaľovaciu ponuku sa teraz spúšťajú na prepínači rozbaľovacej ponuky a potom prebublávajú na nadradený prvok.

  • Rozbaľovacie ponuky majú teraz data-bs-popper="static"nastavený atribút, keď je umiestnenie rozbaľovacej ponuky statické alebo rozbaľovacia ponuka je na navigačnom paneli. Pridáva to náš JavaScript a pomáha nám to používať vlastné štýly pozícií bez toho, aby to zasahovalo do Popperovho umiestňovania.

  • PrelomenieVypustená flipmožnosť pre rozbaľovací doplnok v prospech natívnej konfigurácie Popper. Teraz môžete zakázať prevracanie tak, že v modifikátore flipfallbackPlacements odošlete prázdne pole pre voľbu .

  • Na rozbaľovacie ponuky je teraz možné kliknúť s novou autoClosemožnosťou spracovania automatického zatvárania . Túto možnosť môžete použiť na prijatie kliknutia vo vnútri alebo mimo rozbaľovacej ponuky, aby bola interaktívna.

  • Rozbaľovacie zoznamy teraz podporujú .dropdown-items zabalené v <li>s.

Jumbotron

Zoznam skupiny

  • Pridané nové nullpremenné pre font-size, font-weight, colora :hover colordo .nav-linktriedy.
  • PrelomenieNavigačné panely teraz vyžadujú kontajner (na drastické zjednodušenie požiadaviek na medzery a CSS).
  • PrelomenieTriedu .activeuž nemožno aplikovať na .nav-items, treba ju aplikovať priamo na .nav-links.

Offcanvas

Stránkovanie

  • Odkazy stránkovania majú teraz prispôsobiteľné margin-left, ktoré sú dynamicky zaoblené vo všetkých rohoch, keď sú od seba oddelené.

  • Pridané transitions k odkazom na stránkovanie.

Popovers

  • PrelomeniePremenované .arrowna .popover-arrowv našej predvolenej šablóne kontextového okna.

  • whiteListMožnosť premenovaná na allowList.

Spinnery

  • Spinnery teraz ctia prefers-reduced-motion: reducespomalením animácií. Pozri #31882 .

  • Vylepšené vertikálne zarovnanie otáčania.

Toasty

  • Toasty je teraz možné umiestniť do a .toast-containerpomocou polohovacích nástrojov .

  • Predvolené trvanie toastu bolo zmenené na 5 sekúnd.

  • Odstránené overflow: hiddenz toastov a nahradené správnymi border-radiuss s calc()funkciami.

Popisy

  • PrelomeniePremenované .arrowna .tooltip-arrowv našej predvolenej šablóne popisu.

  • PrelomeniePredvolená hodnota pre fallbackPlacementssa zmení na ['top', 'right', 'bottom', 'left']pre lepšie umiestnenie prvkov popper.

  • PrelomeniewhiteListMožnosť premenovaná na allowList.

Verejné služby

  • PrelomeniePremenovaných niekoľko pomocných programov na používanie logických názvov vlastností namiesto smerových názvov s pridaním podpory RTL:

    • Premenované .left-*a .right-*na .start-*a .end-*.
    • Premenované .float-lefta .float-rightna .float-starta .float-end.
    • Premenované .border-lefta .border-rightna .border-starta .border-end.
    • Premenované .rounded-lefta .rounded-rightna .rounded-starta .rounded-end.
    • Premenované .ml-*a .mr-*na .ms-*a .me-*.
    • Premenované .pl-*a .pr-*na .ps-*a .pe-*.
    • Premenované .text-lefta .text-rightna .text-starta .text-end.

  • PrelomenieV predvolenom nastavení sú záporné okraje zakázané.

  • Pridaná nová .bg-bodytrieda na rýchle nastavenie <body>pozadia na ďalšie prvky.

  • Pridané nové nástroje polohy pre top, right, bottoma left. Hodnoty zahŕňajú 0, 50%, a 100%pre každú vlastnosť.

  • Pridané nové .translate-middle-xa .translate-middle-ynástroje do horizontálne alebo vertikálneho stredu absolútne/pevne umiestnených prvkov.

  • Pridané nové border-widthnástroje .

  • PrelomeniePremenovaný .text-monospacena .font-monospace.

  • PrelomenieOdstránené .text-hide, pretože ide o zastaranú metódu na skrytie textu, ktorý by sa už nemal používať.

  • Pridané .fs-*nástroje pre font-sizenástroje (s povoleným RFS). Používajú rovnakú mierku ako predvolené nadpisy HTML (1-6, veľké až malé) a možno ich upraviť pomocou mapy Sass.

  • PrelomeniePremenované .font-weight-*nástroje .fw-*kvôli stručnosti a konzistencii.

  • PrelomeniePremenované .font-style-*nástroje .fst-*kvôli stručnosti a konzistencii.

  • Pridané .d-gridk pomocným programom zobrazenia a novým gappomôckam ( .gap) pre rozloženia CSS Grid a flexbox.

  • PrelomenieOdstránili .rounded-sma rounded-lga zaviedli novú stupnicu tried .rounded-0do .rounded-3. Pozri #31687 .

  • Pridané nové line-heightnástroje: .lh-1, .lh-sm, .lh-basea .lh-lg. Pozri tu .

  • Pomôcku sme presunuli do .d-nonenášho CSS, aby mala väčšiu váhu v porovnaní s inými pomôckami na zobrazenie.

  • Rozšíril .visually-hidden-focusablepomocníka aj o prácu na kontajneroch pomocou :focus-within.

Pomocníci

  • Prelomenie Responzívni pomocníci na vkladanie boli premenovaní na pomocníkov pomeru s novými názvami tried a vylepšeným správaním, ako aj užitočnou premennou CSS.

    • Triedy boli premenované na zmenu byv xpomere strán. Napríklad .ratio-16by9teraz je .ratio-16x9.
    • Vypustili sme .embed-responsive-itemselektor a skupiny prvkov v prospech jednoduchšieho .ratio > *selektora. Nie je potrebná žiadna ďalšia trieda a pomocník pre pomery teraz funguje s akýmkoľvek prvkom HTML.
    • Mapa $embed-responsive-aspect-ratiosSass bola premenovaná na $aspect-ratiosa jej hodnoty boli zjednodušené tak, aby obsahovali názov triedy a percento ako key: valuepár.
    • Premenné CSS sú teraz generované a zahrnuté pre každú hodnotu na mape Sass. Upravte --bs-aspect-ratiopremennú na obrazovke .ratio, aby ste vytvorili ľubovoľný vlastný pomer strán .

  • Prelomenie Triedy „čítačky obrazovky“ sú teraz „vizuálne skryté“ triedy .

    • Zmenil súbor Sass z scss/helpers/_screenreaders.scssnascss/helpers/_visually-hidden.scss
    • Premenované .sr-onlya .sr-only-focusablena .visually-hiddena.visually-hidden-focusable
    • Premenované sr-only()a sr-only-focusable()zmiešané s visually-hidden()a visually-hidden-focusable().

  • bootstrap-utilities.cssteraz zahŕňa aj našich pomocníkov. Pomocníkov už nie je potrebné importovať do vlastných zostavení.

JavaScript

  • Zrušila závislosť jQuery a prepísala doplnky tak, aby boli v bežnom JavaScripte.

  • PrelomenieAtribúty údajov pre všetky doplnky JavaScript sú teraz rozdelené podľa názvov, aby pomohli odlíšiť funkčnosť Bootstrap od tretích strán a vášho vlastného kódu. Napríklad používame data-bs-togglenamiesto data-toggle.

  • Všetky doplnky teraz môžu akceptovať selektor CSS ako prvý argument. Na vytvorenie novej inštancie doplnku môžete odovzdať prvok DOM alebo akýkoľvek platný selektor CSS:

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

  • popperConfigmožno odovzdať ako funkciu, ktorá akceptuje predvolenú konfiguráciu Popper Bootstrapu ako argument, takže túto predvolenú konfiguráciu môžete zlúčiť podľa seba. Vzťahuje sa na rozbaľovacie ponuky, kontextové okná a popisy.

  • Predvolená hodnota pre fallbackPlacementssa zmení na ['top', 'right', 'bottom', 'left']pre lepšie umiestnenie prvkov Popper. Vzťahuje sa na rozbaľovacie ponuky, kontextové okná a popisy.

  • Odstránené podčiarknutie z verejných statických metód ako _getInstance()→ getInstance().