Přejít na hlavní obsah Přejít na navigaci v dokumentech
in English

Migrace na v5

Sledujte a kontrolujte změny ve zdrojových souborech Bootstrap, dokumentaci a komponentách, které vám pomohou při migraci z verze 4 na verzi 5.

Na této straně

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

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

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.

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

  • 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) &times;, 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.

  • 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

Seznam skupiny

  • Do třídy byly přidány nové nullproměnné pro font-size, font-weight, colora .:hover color.nav-link
  • LámáníNavbary nyní vyžadují kontejner uvnitř (pro výrazné zjednodušení požadavků na mezery a CSS).

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:

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