Migrace na v5

v5.2.0

Osvěžený design

Bootstrap v5.2.0 obsahuje jemnou aktualizaci designu pro hrstku komponent a vlastností v celém projektu, zejména prostřednictvím vylepšených border-radiushodnot na tlačítkách a ovládacích prvcích formuláře . Naše dokumentace byla také aktualizována o novou domovskou stránku, jednodušší rozložení dokumentů, které již nesbaluje části postranního panelu, a výraznější příklady ikon Bootstrap .

Více proměnných CSS

Aktualizovali jsme všechny naše komponenty, aby používaly proměnné CSS. Zatímco Sass stále vše podporuje, každá komponenta byla aktualizována tak, aby zahrnovala proměnné CSS na základních třídách komponent (např. .btn), což umožňuje více přizpůsobení Bootstrapu v reálném čase. V následujících verzích budeme nadále rozšiřovat naše používání proměnných CSS do našeho rozvržení, formulářů, pomocníků a nástrojů. Přečtěte si více o proměnných CSS v každé komponentě na příslušných stránkách dokumentace.

Naše použití proměnné CSS bude do Bootstrapu 6 poněkud neúplné. I když bychom je rádi plně implementovali plošně, riskují, že způsobí změny. Například nastavení $alert-border-width: var(--bs-border-width)v našem zdrojovém kódu rozbije potenciální Sass ve vašem vlastním kódu, pokud jste to $alert-border-width * 2z nějakého důvodu dělali.

Proto, kdykoli to bude možné, budeme nadále prosazovat více proměnných CSS, ale uvědomte si prosím, že naše implementace může být ve verzi 5 mírně omezena.

Nový_maps.scss

Bootstrap v5.2.0 představil nový soubor Sass s _maps.scss. Vytáhne několik map Sass z _variables.scssk vyřešení problému, kdy aktualizace původní mapy nebyly aplikovány na sekundární mapy, které je rozšiřují. Aktualizace například $theme-colorsnebyly aplikovány na jiné tematické mapy, které se spoléhaly na $theme-colors, což narušilo klíčové pracovní postupy přizpůsobení. Stručně řečeno, Sass má omezení, kdy jakmile byla použita výchozí proměnná nebo mapa , nelze ji aktualizovat. Podobný nedostatek mají proměnné CSS, když se používají ke skládání jiných proměnných CSS.

To je důvod, proč přizpůsobení proměnných v Bootstrapu musí následovat po @import "functions", ale před @import "variables"a po zbytek našeho zásobníku importu. Totéž platí pro mapy Sass – výchozí hodnoty musíte přepsat, než se použijí. Následující mapy byly přesunuty do nových _maps.scss:

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

Vaše vlastní sestavení Bootstrap CSS by nyní měla vypadat nějak takto se samostatným importem map.

  // 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ženýrské sítě

• Rozšířené font-weightnástroje pro .fw-semiboldpolotučná písma.
• Rozšířené border-radiusnástroje o dvě nové velikosti .rounded-4a .rounded-5, pro více možností.

Dodatečné změny

• Zavedena nová $enable-container-classesmožnost. — Nyní, když se přihlásíte do experimentálního rozvržení CSS Grid, .container-*budou třídy stále kompilovány, pokud není tato možnost nastavena na false. Kontejnery si nyní také zachovávají své okapové hodnoty.

• Komponenta Offcanvas má nyní responzivní varianty . Původní .offcanvastřída zůstane nezměněna – skryje obsah ve všech výřezech. Aby byla responzivní, změňte tuto .offcanvastřídu na jakoukoli .offcanvas-{sm|md|lg|xl|xxl}třídu.

• Silnější oddělovače stolu jsou nyní volitelnou součástí. — Odstranili jsme tlustší a obtížněji přepsatelný okraj mezi skupinami tabulek a přesunuli jsme jej do volitelné třídy, kterou můžete použít, .table-group-divider. Příklad naleznete v dokumentaci tabulky.

• Scrollspy byl přepsán tak, aby používal rozhraní Intersection Observer API , což znamená, že již nepotřebujete relativní nadřazené obaly, zastaralouoffsetkonfiguraci a další. Hledejte, aby vaše implementace Scrollspy byly přesnější a konzistentnější ve zvýrazňování navigace.

• Popovers a popisky nyní používají proměnné CSS. Některé proměnné CSS byly aktualizovány od svých protějšků Sass, aby se snížil počet proměnných. V důsledku toho byly v tomto vydání zastaralé tři proměnné: $popover-arrow-color, $popover-arrow-outer-colora $tooltip-arrow-color.

• Přidáni noví .text-bg-{color}pomocníci. Místo nastavování jednotlivců .text-*a .bg-*utilit můžete nyní pomocí pomocníků nastavit.text-bg-* a background-colors kontrastním popředím color.

• Přidán .form-check-reversemodifikátor pro převrácení pořadí štítků a souvisejících zaškrtávacích políček/rádia.

• Přidána podpora prokládaných sloupců do tabulek prostřednictvím nové .table-striped-columnstřídy.

Úplný seznam změn najdete v projektu v5.2.0 na GitHubu .

v5.1.0

• Přidána experimentální podpora pro rozvržení mřížky CSS . — Toto je ve vývoji a ještě není připraveno k produkčnímu použití, ale můžete se přihlásit do nové funkce prostřednictvím Sass. Chcete-li ji povolit, vypněte výchozí mřížku nastavením $enable-grid-classes: falsea povolte mřížku CSS nastavením $enable-cssgrid: true.

• Aktualizované navigační panely, aby podporovaly offcanvas. — Přidejte zásuvky offcanvas do libovolného navigačního panelu s responzivními .navbar-expand-*třídami a nějakým označením offcanvas.

• Přidána nová komponenta zástupného symbolu . — Naše nejnovější komponenta, způsob, jak poskytnout dočasné blokování namísto skutečného obsahu, abychom vám pomohli naznačit, že se na vašem webu nebo aplikaci stále něco načítá.

• Plugin Collapse nyní podporuje horizontální sbalení . — Přidejte .collapse-horizontaldo svého .collapse, abyste sbalili widthmísto height. Vyhněte se překreslování prohlížeče nastavením a min-heightnebo height.

• Přidány nové pomocníky pro zásobník a vertikální pravidlo. — Rychle aplikujte více vlastností flexboxu pro rychlé vytváření vlastních rozvržení se zásobníky . Vyberte si z horizontálních ( .hstack) a vertikálních ( .vstack) stohů. Přidejte svislé oddělovače podobné <hr>prvkům pomocí nových .vrpomocníků .

• Přidány nové globální :rootproměnné CSS. — Přidáno několik nových proměnných CSS do :rootúrovně pro ovládání <body>stylů. Na dalších se pracuje, včetně napříč našimi nástroji a komponentami, ale zatím si přečtěte proměnné CSS v sekci Přizpůsobit .

• Přepracované nástroje pro barvy a pozadí pro použití proměnných CSS a přidány nové nástroje pro neprůhlednost textu a pozadí . — .text-* a .bg-*nástroje jsou nyní sestaveny s proměnnými CSS a rgba()hodnotami barev, což vám umožňuje snadno přizpůsobit jakýkoli nástroj pomocí nových nástrojů pro neprůhlednost.

• Přidány nové příklady úryvků, které ukazují, jak přizpůsobit naše komponenty. — Vytáhněte připravené k použití přizpůsobené komponenty a další běžné návrhové vzory s našimi novými příklady Snippets . Zahrnuje zápatí , rozevírací seznamy , skupiny seznamu a způsoby .

• Odstraněny nepoužívané styly umístění z vyskakovacích oken a popisků , protože je zpracovává výhradně Popper. $tooltip-marginbyla zastaralá a nastavena na nullv procesu.

Chcete více informací? Přečtěte si blogový příspěvek v5.1.0.

Závislosti

• Zahozen jQuery.
• Upgradováno z Popper v1.x na Popper v2.x.
• Nahrazení Libsass za Dart Sass, protože náš kompilátor Sass daný Libsass byl zastaralý.
• Přestěhovali jsme se z Jekyllu do Huga kvůli sestavení naší dokumentace

Podpora prohlížeče

• Vyřazen Internet Explorer 10 a 11
• Vyřazen Microsoft Edge < 16 (starší Edge)
• Vyřazen Firefox < 60
• Vypuštěné Safari < 12
• Vyřazeno iOS Safari < 12
• Zahozen Chrome < 60

Změny v dokumentaci

• Přepracovaná domovská stránka, rozvržení dokumentů a zápatí.
• Přidán nový průvodce balíkem .
• Byla přidána nová sekce Přizpůsobit , která nahradila stránku Theming v4 , s novými podrobnostmi o Sass, možnostmi globální konfigurace, barevnými schématy, proměnnými CSS a dalšími.
• Reorganizovali veškerou dokumentaci formulářů do nové sekce Formuláře a rozdělili obsah na více zaměřené stránky.
• Podobně byla aktualizována sekce Rozvržení , aby byl obsah mřížky jasnější.
• Stránka součásti „Navs“ byla přejmenována na „Navs & Tabs“.
• Stránka „Šeky“ byla přejmenována na „Šeky a rádia“.
• Přepracovali jsme navigační lištu a přidali novou subnav, aby bylo snazší procházet naše stránky a verze dokumentů.
• Přidána nová klávesová zkratka pro vyhledávací pole: Ctrl + /.

Sass

• Vypustili jsme výchozí sloučení map Sass, abychom usnadnili odstranění nadbytečných hodnot. Mějte na paměti, že nyní musíte definovat všechny hodnoty v mapách Sass, jako je $theme-colors. Podívejte se, jak zacházet s mapami Sass .

• Lámánícolor-yiq()Funkce a související proměnné byly přejmenovány na color-contrast(), protože již nesouvisí s barevným prostorem YIQ. Viz #30168.

  • $yiq-contrasted-thresholdje přejmenován na $min-contrast-ratio.
  • $yiq-text-darka $yiq-text-lightjsou příslušně přejmenovány na $color-contrast-darka $color-contrast-light.

• LámáníParametry mixů dotazů na média se změnily pro logičtější přístup.

  • media-breakpoint-down()používá samotný bod přerušení místo dalšího bodu přerušení (např. media-breakpoint-down(lg)namísto media-breakpoint-down(md)targets viewports menší než lg).
  • Podobně druhý parametr v media-breakpoint-between()také používá samotný bod přerušení místo dalšího bodu přerušení (např. media-between(sm, lg)místo media-breakpoint-between(sm, md)výřezů cílů mezi sma lg).

• LámáníOdstraněny styly tisku a $enable-print-stylesproměnná. Třídy zobrazení tisku jsou stále k dispozici. Viz #28339 .

• LámáníFunkce color(), theme-color(), a byly gray()zrušeny ve prospěch proměnných. Viz #29083 .

• LámáníFunkce byla přejmenována theme-color-level()na color-level()a nyní přijímá jakoukoli požadovanou barvu namísto pouze $theme-colorbarev. Viz #29083 Pozor: color-level() byl později zahozen do v5.0.0-alpha3.

• LámáníPřejmenováno $enable-prefers-reduced-motion-media-querya $enable-pointer-cursor-for-buttonsna $enable-reduced-motiona $enable-button-pointerspro stručnost.

• LámáníOdstranil bg-gradient-variant()mixin. Použijte .bg-gradienttřídu k přidání přechodů k prvkům namísto vygenerovaných .bg-gradient-*tříd.

• Lámání Odstraněné dříve zastaralé mixy:

  • hover, hover-focus, plain-hover-focusahover-focus-active
  • float()
  • form-control-mixin()
  • nav-divider()
  • retina-img()
  • text-hide()(také zrušil přidruženou třídu utility, .text-hide)
  • visibility()
  • form-control-focus()

• Lámáníscale-color()Funkce byla přejmenována na shift-color(), aby se zabránilo kolizi s vlastní funkcí barevného škálování Sass.

• box-shadowmixins nyní umožňují nullhodnoty a vypadnou nonez více argumentů. Viz #30394 .

• Mixin border-radius()má nyní výchozí hodnotu.

Barevný systém

• Barevný systém, který pracoval color-level()a $theme-color-intervalbyl odstraněn ve prospěch nového barevného systému. Všechny funkce lighten()a darken()v naší kódové základně jsou nahrazeny tint-color()a shade-color(). Tyto funkce namíchají barvu buď s bílou nebo černou, místo aby změnily její světlost o pevnou hodnotu. Barvu shift-color()buď zabarví nebo zastíní v závislosti na tom, zda je jeho hmotnostní parametr kladný nebo záporný. Další podrobnosti viz #30622 .

• Přidány nové odstíny a odstíny pro každou barvu, což poskytuje devět samostatných barev pro každou základní barvu jako nové proměnné Sass.

• Vylepšený barevný kontrast. Zvýšený barevný kontrastní poměr z 3:1 na 4,5:1 a aktualizované modré, zelené, azurové a růžové barvy pro zajištění kontrastu WCAG 2.1 AA. Také jsme změnili naši barevnou kontrastní barvu z $gray-900na $black.

• Abychom podpořili náš barevný systém, přidali jsme nové uživatelské funkce tint-color()a shade-color()funkce, které vhodně namíchají naše barvy.

Aktualizace mřížky

• Nový bod zlomu! Přidán nový xxlbod přerušení pro 1400pxa nahoru. Žádné změny všech ostatních zarážek.

• Vylepšené okapy. Svody jsou nyní nastaveny v rems a jsou užší než v4 ( 1.5rem, nebo asi 24px, dolů od 30px). Tím jsou žlaby našeho mřížkového systému zarovnány s našimi distančními nástroji.

  • Přidána nová třída okapů ( .g-*, .gx-*, a .gy-*) pro ovládání vodorovných/svislých okapů, vodorovných okapů a svislých okapů.
  • LámáníPřejmenováno .no-guttersna, .g-0aby odpovídalo novým obslužným programům okapů.

• Sloupce se již nepoužívají, takže k obnovení tohoto chování position: relativemožná budete muset přidat některé prvky..position-relative

• LámáníBylo zrušeno několik .order-*tříd, které byly často nevyužity. Nyní poskytujeme pouze .order-1po .order-5rozbalení.

• LámáníZahodili .mediakomponentu, protože ji lze snadno replikovat pomocí nástrojů. Příklad viz #28265 a stránka flex utilities .

• Lámání bootstrap-grid.cssnyní platí pouze box-sizing: border-boxpro sloupec namísto resetování globální velikosti boxu. Tímto způsobem lze naše styly mřížky použít na více místech bez rušení.

• $enable-grid-classesjiž nezakazuje generování tříd kontejnerů. Viz #29146.

• Aktualizoval make-colmixin na výchozí hodnotu na stejné sloupce bez zadané velikosti.

Obsah, restart atd

• RFS je nyní ve výchozím nastavení povoleno. Nadpisy používajícífont-size()mixin se automaticky upravífont-sizepodle měřítka výřezu. Tato funkce byla dříve přihlášena ve verzi 4.

• LámáníPřepracovali jsme typografii displeje, abychom nahradili naše $display-*proměnné a $display-font-sizesmapu Sass. Také byly odstraněny jednotlivé $display-*-weightproměnné pro jednu $display-font-weighta upravenou font-sizes.

• Přidány dvě nové .display-*velikosti nadpisů .display-5a .display-6.

• Odkazy jsou ve výchozím nastavení podtržené (nejen při umístění kurzoru), pokud nejsou součástí konkrétních komponent.

• Přepracované tabulky tak, aby obnovily jejich styly a přestavěly je pomocí proměnných CSS pro větší kontrolu nad styly.

• LámáníVnořené tabulky již nedědí styly.

• Lámání .thead-lighta .thead-darkjsou vypuštěny ve prospěch .table-*tříd variant, které lze použít pro všechny prvky tabulky ( thead, tbody, tfoot, tra ) th.td

• LámáníMixin table-row-variant()je přejmenován na table-variant()a přijímá pouze 2 parametry: $color(název barvy) a $value(kód barvy). Barva ohraničení a barvy zvýraznění se automaticky vypočítá na základě proměnných faktoru tabulky.

• Rozdělte proměnné odsazení buněk tabulky na -ya -x.

• LámáníVypadlá .pre-scrollabletřída. Viz #29135

• Lámání .text-*utility již k odkazům nepřidávají stavy přechodu a fokusu. .link-*místo toho lze použít pomocné třídy. Viz #29267

• LámáníVypadlá .text-justifytřída. Viz #29793

• Lámání <hr>prvky nyní používají heightmísto borderk lepší podpoře sizeatributu. To také umožňuje použití vycpávkových utilit k vytvoření silnějších přepážek (např. <hr class="py-1">).

• Obnovit výchozí horizontální padding-leftzap <ul>a <ol>prvky z výchozího prohlížeče 40pxna 2rem.

• Přidáno $enable-smooth-scroll, které platí scroll-behavior: smoothglobálně – s výjimkou uživatelů, kteří žádají omezení pohybu prostřednictvím prefers-reduced-motiondotazu na média. Viz #31877

RTL

• Proměnné, nástroje a mixiny specifické pro horizontální směr byly všechny přejmenovány tak, aby používaly logické vlastnosti, jaké se nacházejí v rozložení flexboxů – např. starta endnamísto lefta right.

formuláře

• Přidány nové plovoucí formuláře! Povýšili jsme příklad s plovoucími štítky na plně podporované komponenty formuláře. Podívejte se na novou stránku s plovoucími štítky.

• Lámání Konsolidované nativní a vlastní prvky formuláře. Zaškrtávací políčka, rádia, výběry a další vstupy, které měly ve verzi 4 nativní a vlastní třídy, byly konsolidovány. Nyní jsou téměř všechny naše prvky formuláře zcela vlastní, většina bez potřeby vlastního HTML.

  • .custom-control.custom-checkboxje nyní .form-check.
  • .custom-control.custom-custom-radioje nyní .form-check.
  • .custom-control.custom-switchje nyní .form-check.form-switch.
  • .custom-selectje nyní .form-select.
  • .custom-filea .form-filebyly nahrazeny vlastními styly nad .form-control.
  • .custom-rangeje nyní .form-range.
  • Vypadl nativní .form-control-filea .form-control-range.

• LámáníSpadl .input-group-appenda .input-group-prepend. Nyní můžete pouze přidat tlačítka a .input-group-textjako přímé potomky vstupních skupin.

• Dlouhotrvající Chybějící okrajový poloměr na vstupní skupině s chybou zpětné vazby ověření je konečně opravena přidáním další .has-validationtřídy do vstupních skupin s ověřením.

• Lámání Odstranění tříd rozvržení specifických pro formulář pro náš mřížkový systém. Použijte naši síť a nástroje místo .form-group, .form-row, nebo .form-inline.

• LámáníŠtítky formulářů nyní vyžadují .form-label.

• Lámání .form-textjiž nenastavuje display, což vám umožňuje vytvářet vložený nebo blokovaný text nápovědy, jak si přejete, pouze změnou prvku HTML.

• Ovládací prvky formuláře se již nepoužívají height, pokud je to možné, opraveny, místo toho byly odloženy za min-heightúčelem zlepšení přizpůsobení a kompatibility s ostatními komponentami.

• Ověřovací ikony se již nepoužívají na <select>s s multiple.

• Přeuspořádané zdrojové soubory Sass pod scss/forms/, včetně stylů vstupní skupiny.

Komponenty

• Sjednocené paddinghodnoty pro upozornění, drobečky, karty, rozevírací seznamy, skupiny seznamů, modály, vyskakovací okna a popisky budou založeny na naší $spacerproměnné. Viz #30564 .

Akordeon

• Přidán nový akordeonový komponent .

Upozornění

• Upozornění nyní obsahují příklady s ikonami .

• Odstraněny vlastní styly pro <hr>s v každém upozornění, protože již používají currentColor.

Odznaky

• LámáníVypustil všechny .badge-*třídy barev pro nástroje na pozadí (např. použijte .bg-primarymísto .badge-primary).

• LámáníZahozeno .badge-pill– .rounded-pillmísto toho použijte nástroj.

• LámáníByly odstraněny styly kurzoru a zaměření pro prvky <a>a <button>.

• Zvýšená výchozí výplň pro odznaky od .25em/ .5emdo .35em/ .65em.

Strouhanka

• Zjednodušil výchozí vzhled drobečkové navigace odstraněním značek padding, background-colora border-radius.

• Přidána nová vlastní vlastnost CSS --bs-breadcrumb-dividerpro snadné přizpůsobení bez nutnosti překompilování CSS.

Tlačítka

• Lámání Přepínací tlačítka se zaškrtávacími políčky nebo přepínači již nevyžadují JavaScript a mají nové označení. Již nepotřebujeme obalový prvek, přidáme.btn-checkjej do<input>a spárujeme jej s jakýmikoli.btntřídami na<label>. Viz #30650 . Dokumenty k tomu se přesunuly z naší stránky Tlačítka do nové sekce Formuláře.

• Lámání Upuštěno .btn-blockkvůli inženýrským sítím. Namísto použití .btn-blockna .btn, obalte tlačítka pomocí nástroje .d-grida .gap-*nástroje pro jejich rozmístění podle potřeby. Přepněte na responzivní třídy pro ještě větší kontrolu nad nimi. Přečtěte si několik příkladů v dokumentaci.

• Aktualizovali jsme naše button-variant()a button-outline-variant()mixiny, aby podporovaly další parametry.

• Aktualizovaná tlačítka pro zajištění zvýšeného kontrastu při vznášení a aktivních stavech.

• Deaktivovaná tlačítka nyní mají pointer-events: none;.

Kartu

• LámáníPadl .card-deckve prospěch naší sítě. Zabalte své karty do sloupcových tříd a přidejte nadřazený .row-cols-*kontejner, abyste mohli znovu vytvořit balíčky karet (ale s větší kontrolou nad responzivním zarovnáním).

• LámáníUpuštěno .card-columnsve prospěch zednářství. Viz #28922 .

• LámáníNahrazení základní .cardharmoniky novou komponentou Akordeonu .

Kolotoč

• Přidána nová .carousel-darkvarianta pro tmavý text, ovládací prvky a indikátory (skvělé pro světlejší pozadí).

• Ikony šipky pro ovládání karuselu byly nahrazeny novými SVG od Bootstrap Icons .

Tlačítko Zavřít

• LámáníPřejmenováno .closena .btn-closepro méně obecný název.

• Tlačítka Zavřít nyní používají v HTML background-imagenamísto (vložené SVG) ×, což umožňuje snazší přizpůsobení bez nutnosti dotýkat se označení.

• Přidána nová .btn-close-whitevarianta, která filter: invert(1)umožňuje aktivaci ikon s vyšším kontrastem na tmavším pozadí.

Kolaps

• Odstraněno ukotvení svitku pro akordeony.

Rozbalovací seznamy

• Přidána nová .dropdown-menu-darkvarianta a související proměnné pro tmavé rozbalovací nabídky na vyžádání.

• Přidána nová proměnná pro $dropdown-padding-x.

• Ztmavil rozevírací oddělovač pro lepší kontrast.

• LámáníVšechny události pro rozevírací seznam se nyní spouštějí na přepínacím tlačítku rozevíracího seznamu a poté přecházejí do nadřazeného prvku.

• Rozbalovací nabídky nyní mají data-bs-popper="static"nastaven atribut, když je umístění rozevíracího seznamu statické nebo je rozevírací seznam v navigační liště. To je přidáno naším JavaScriptem a pomáhá nám používat vlastní styly pozic, aniž by to zasahovalo do Popperova umístění.

• LámáníVypuštěna flipmožnost rozbalovacího pluginu ve prospěch nativní konfigurace Popper. Nyní můžete zakázat převracení předáním prázdného pole pro fallbackPlacementsvolbu v modifikátoru flip .

• Rozbalovací nabídky nyní mohou být klikatelné s novou autoClosemožností zpracování chování automatického zavírání . Tuto možnost můžete použít k přijetí kliknutí uvnitř nebo vně rozevírací nabídky, aby byla interaktivní.

• Rozbalovací seznamy nyní podporují .dropdown-items zabalená v <li>s.

Jumbotron

• LámáníZahodili komponentu jumbotronu, protože ji lze replikovat pomocí nástrojů. Podívejte se na ukázku našeho nového Jumbotronu.

Seznam skupiny

• Přidán nový .list-group-numberedmodifikátor do skupin seznamu.

Navigace a karty

• Do třídy byly přidány nové nullproměnné pro font-size, font-weight, colora .:hover color.nav-link

Navbary

• LámáníNavbary nyní vyžadují kontejner uvnitř (pro výrazné zjednodušení požadavků na mezery a CSS).
• LámáníTřídu .activejiž nelze aplikovat na .nav-items, je třeba ji aplikovat přímo na .nav-links.

Offcanvas

• Přidána nová komponenta offcanvas .

Stránkování

• Odkazy stránkování nyní mají přizpůsobitelné margin-left, které jsou dynamicky zaoblené ve všech rozích, když jsou od sebe odděleny.

• Přidáno transitions do stránkovacích odkazů.

Popovers

• LámáníPřejmenováno .arrowna .popover-arrowv naší výchozí šabloně vyskakovacího okna.

• Možnost přejmenována whiteListna allowList.

Přadleny

• Spinery nyní ctí prefers-reduced-motion: reducezpomalením animací. Viz #31882 .

• Vylepšené vertikální vyrovnání rotačního kotouče.

Toasty

• Toasty lze nyní umístit do a .toast-containerpomocí polohovacích nástrojů .

• Výchozí doba toastu byla změněna na 5 sekund.

• Odebráno overflow: hiddenz toastů a nahrazeno správnými border-radiuss s calc()funkcemi.

Popisky

• LámáníPřejmenováno .arrowna .tooltip-arrowv naší výchozí šabloně popisku.

• LámáníVýchozí hodnota pro fallbackPlacementsse změní na ['top', 'right', 'bottom', 'left']pro lepší umístění prvků popperu.

• LámáníMožnost přejmenována whiteListna allowList.

Utility

• LámáníPřejmenováno několik obslužných programů tak, aby používaly názvy logických vlastností namísto směrových názvů s přidáním podpory RTL:

  • Přejmenováno .left-*a .right-*na .start-*a .end-*.
  • Přejmenováno .float-lefta .float-rightna .float-starta .float-end.
  • Přejmenováno .border-lefta .border-rightna .border-starta .border-end.
  • Přejmenováno .rounded-lefta .rounded-rightna .rounded-starta .rounded-end.
  • Přejmenováno .ml-*a .mr-*na .ms-*a .me-*.
  • Přejmenováno .pl-*a .pr-*na .ps-*a .pe-*.
  • Přejmenováno .text-lefta .text-rightna .text-starta .text-end.

• LámáníVe výchozím nastavení jsou záporné okraje zakázány.

• Přidána nová .bg-bodytřída pro rychlé nastavení <body>pozadí na další prvky.

• Přidány nové nástroje polohy pro top, right, bottoma left. Hodnoty zahrnují 0, 50%, a 100%pro každou vlastnost.

• Přidány nové nástroje .translate-middle-xa .translate-middle-ynástroje pro horizontálně nebo vertikálně střed absolutní/pevně umístěné prvky.

• Přidány nové border-widthnástroje .

• LámáníPřejmenováno .text-monospacena .font-monospace.

• LámáníOdstraněno .text-hide, protože se jedná o zastaralou metodu pro skrytí textu, který by se již neměl používat.

• Přidány .fs-*nástroje pro font-sizenástroje (s povoleným RFS). Používají stejné měřítko jako výchozí nadpisy HTML (1-6, velké až malé) a lze je upravit pomocí mapy Sass.

• LámáníPřejmenované .font-weight-*nástroje .fw-*kvůli stručnosti a konzistenci.

• LámáníPřejmenované .font-style-*nástroje .fst-*kvůli stručnosti a konzistenci.

• Přidány .d-gridnástroje pro zobrazení a nové gapnástroje ( .gap) pro rozvržení mřížky CSS a flexbox.

• LámáníOdebráno .rounded-sma rounded-lga zavedena nová stupnice tříd .rounded-0do .rounded-3. Viz #31687 .

• Přidány nové line-heightnástroje: .lh-1, .lh-sm, .lh-basea .lh-lg. Viz zde .

• Přesunuli .d-nonejsme utilitu do našeho CSS, abychom jí dali větší váhu oproti jiným zobrazovacím utilitám.

• Rozšíření .visually-hidden-focusablepomocníka také o práci na kontejnerech pomocí :focus-within.

Pomocníci

• Lámání Responzivní pomocníci pro vkládání byli přejmenováni na pomocníky pro poměr s novými názvy tříd a vylepšeným chováním a také užitečnou proměnnou CSS.

  • Třídy byly přejmenovány, aby se změnily byna xv poměru stran. Například .ratio-16by9je nyní .ratio-16x9.
  • Vypustili jsme .embed-responsive-itemselektor skupiny prvků a ve prospěch jednoduššího .ratio > *selektoru. Není potřeba žádná další třída a pomocník pro poměr nyní funguje s jakýmkoli HTML elementem.
  • Mapa $embed-responsive-aspect-ratiosSass byla přejmenována na $aspect-ratiosa její hodnoty byly zjednodušeny tak, aby zahrnovaly název třídy a procento jako key: valuepár.
  • Proměnné CSS jsou nyní generovány a zahrnuty pro každou hodnotu v mapě Sass. Upravte --bs-aspect-ratioproměnnou na .ratioa vytvořte libovolný vlastní poměr stran .

• Lámání Třídy „čtenář obrazovky“ jsou nyní „vizuálně skryté“ třídy .

  • Změnil soubor Sass z scss/helpers/_screenreaders.scssnascss/helpers/_visually-hidden.scss
  • Přejmenováno .sr-onlya .sr-only-focusablena .visually-hiddena.visually-hidden-focusable
  • Přejmenován sr-only()a sr-only-focusable()smíchán s visually-hidden()a visually-hidden-focusable().

• bootstrap-utilities.cssnyní zahrnuje i naše pomocníky. Pomocníky již není nutné importovat do vlastních sestavení.

JavaScript

• Byla zrušena závislost na jQuery a přepsány pluginy tak, aby byly v běžném JavaScriptu.

• LámáníDatové atributy pro všechny pluginy JavaScriptu jsou nyní rozděleny do jmenných prostorů, aby pomohly odlišit funkci Bootstrap od třetích stran a vašeho vlastního kódu. Například používáme data-bs-togglemísto data-toggle.

• Všechny pluginy nyní mohou přijímat selektor CSS jako první argument. Můžete předat prvek DOM nebo jakýkoli platný selektor CSS a vytvořit novou instanci pluginu:

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

• popperConfiglze předat jako funkci, která akceptuje výchozí konfiguraci Popperu Bootstrapu jako argument, takže můžete tuto výchozí konfiguraci sloučit svým způsobem. Platí pro rozbalovací nabídky, vyskakovací okna a popisky.

• Výchozí hodnota pro fallbackPlacementsse změní na ['top', 'right', 'bottom', 'left']pro lepší umístění prvků Popper. Platí pro rozbalovací nabídky, vyskakovací okna a popisky.

• Odstraněno podtržítko z veřejných statických metod jako _getInstance()→ getInstance().