Migrácia na v5

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

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

• 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

• Pridaný nový akordeónový komponent .

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.

Strúhanka

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

Kolotoč

• 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) ×, č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.

Rozbaľovacie ponuky

• 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é a data-bs-popper="none"keď je rozbaľovacia ponuka 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

• PrelomenieVypadol komponent jumbotronu, pretože ho možno replikovať pomocou nástrojov. Pozrite si ukážku nášho nového Jumbotronu.

Zoznam skupiny

• Do skupín zoznamu bol pridaný nový .list-group-numberedmodifikátor .

Navigácie a karty

• Pridané nové nullpremenné pre font-size, font-weight, colora :hover colordo .nav-linktriedy.

Navbary

• PrelomenieNavigačné panely teraz vyžadujú kontajner (na drastické zjednodušenie požiadaviek na medzery a CSS).

Offcanvas

• Pridaný nový komponent 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:

  Kopírovať

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

• popperConfigmožno odovzdať ako funkciu, ktorá akceptuje predvolenú konfiguráciu Popper Bootstrapu ako argument, takže môžete túto predvolenú konfiguráciu 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().