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

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 stále existujú. 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 súvisiacu 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é sa často nepoužívali. 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.
PrelomenieVypadla .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
PrelomenieVypadla .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 vlastné, väčšina z nich nevyžaduje vlastný kód 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 deti 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 Pre náš mriežkový systém boli zrušené triedy rozloženia špecifické pre formulár. 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-*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 flip fallbackPlacements 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 pre 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-widthpomôcky .
PrelomeniePremenovaný .text-monospacena .font-monospace.
PrelomenieOdstránené .text-hide, pretože ide o zastaralú 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:
```
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().