Migrace na v5

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 dokumentace

• 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.
• Přeorganizovali 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 měřítka Sass.

• box-shadowmixins nyní umožňují nullhodnoty a vypouštějí 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žité. 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

• 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-checkje nyní .form-check.
  • .custom-check.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.

• 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é a data-bs-popper="none"když 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).

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:

  kopírovat

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