Preskočiť na hlavný obsah Preskočiť na navigáciu v dokumentoch
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.

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

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-*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é 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

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

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().