Migrace na v4

Bootstrap 4 je zásadní přepis celého projektu. Nejpozoruhodnější změny jsou shrnuty níže, následované konkrétnějšími změnami příslušných komponent.

Stabilní změny

Při přechodu z Beta 3 na naše stabilní vydání v4.0 nedochází k žádným převratným změnám, ale jsou zde některé pozoruhodné změny.

Tisk

• Opraveny nefunkční tiskové nástroje. Dříve by použití .d-print-*třídy neočekávaně potlačilo jakoukoli jinou .d-*třídu. Nyní odpovídají našim dalším zobrazovacím utilitám a vztahují se pouze na toto médium ( @media print).

• Rozšířené dostupné nástroje pro zobrazení tisku tak, aby odpovídaly dalším nástrojům. Beta 3 a starší měly pouze block, inline-block, inlinea none. Stable v4 přidány flex, inline-flex, table, table-rowa table-cell.

• Opraveno vykreslování náhledu tisku napříč prohlížeči s novými styly tisku, které určují @page size.

Beta 3 změny

Zatímco Beta 2 zaznamenala většinu našich přelomových změn během beta fáze, stále máme několik, které je třeba vyřešit ve verzi Beta 3. Tyto změny platí, pokud aktualizujete na Betu 3 z Beta 2 nebo jakékoli starší verze Bootstrapu.

Smíšený

• Odebrána nepoužívaná $thumbnail-transitionproměnná. Nic jsme nepřeváděli, takže to byl jen další kód.
• Balíček npm již neobsahuje žádné jiné soubory než naše zdrojové a dist soubory; pokud jste na ně spoléhali a spouštěli naše skripty přes node_modulessložku, měli byste tomu přizpůsobit svůj pracovní postup.

formuláře

• Přepsala vlastní i výchozí zaškrtávací políčka a rádia. Nyní mají oba odpovídající strukturu HTML (vnější <div>se sourozencem <input>a <label>) a stejné styly rozvržení (výchozí skládaný, vložený s třídou modifikátoru). To nám umožňuje stylizovat štítek na základě stavu vstupu, zjednodušit podporu pro disabledatribut (dříve vyžadoval nadřazenou třídu) a lépe podporovat naši validaci formuláře.

  V rámci toho jsme změnili CSS pro správu více background-imagezaškrtávacích políček a rádií ve vlastních formulářích. Dříve měl nyní odstraněný .custom-control-indicatorprvek barvu pozadí, přechod a ikonu SVG. Přizpůsobení přechodu pozadí znamenalo nahrazení všech, pokaždé, když jste potřebovali změnit pouze jeden. Nyní máme .custom-control-label::beforepro výplň a přechod a .custom-control-label::afterzpracovává ikonu.

  Chcete-li vytvořit vlastní zaškrtnutí, přidejte .custom-control-inline.

• Aktualizovaný volič pro skupiny tlačítek založených na vstupu. Místo [data-toggle="buttons"] { }pro styl a chování používáme dataatribut jen pro chování JS a pro styling spoléháme na novou .btn-group-toggletřídu.

• Odebráno .col-form-legendve prospěch mírně vylepšeného .col-form-label. Tímto způsobem .col-form-label-sma .col-form-label-lglze jej snadno použít na <legend>prvky.

• Vstupy vlastních souborů obdržely změnu v $custom-file-textproměnné Sass. Už to není vnořená mapa Sass a nyní ovládá pouze jeden řetězec – Browsetlačítko, které je nyní jediným pseudoprvkem generovaným z našeho Sass. Text Choose filenyní pochází z .custom-file-label.

Vstupní skupiny

• Doplňky skupiny vstupů jsou nyní specifické svým umístěním vzhledem ke vstupu. Upustili jsme .input-group-addona .input-group-btnpro dvě nové třídy .input-group-prependa .input-group-append. Nyní musíte explicitně použít dodatek nebo předponu, což zjednodušuje většinu našich CSS. V rámci přílohy nebo předpony umístěte tlačítka tak, jak by existovala kdekoli jinde, ale zalamujte text do .input-group-text.

• Styly ověřování jsou nyní podporovány, stejně jako více vstupů (ačkoli můžete ověřit pouze jeden vstup na skupinu).

• Třídy velikosti musí být na nadřazeném .input-groupprvku a nikoli na jednotlivých prvcích formuláře.

Beta 2 změny

V beta verzi se snažíme o žádné zásadní změny. Ne vždy však věci jdou podle plánu. Níže jsou uvedeny zásadní změny, které je třeba mít na paměti při přechodu z Beta 1 na Beta 2.

Lámání

• Odstraněná $badge-colorproměnná a její použití na .badge. Používáme funkci barevného kontrastu k výběru colorna základě background-color, takže proměnná je zbytečná.
• grayscale()Funkce byla přejmenována na, gray()aby nedošlo ke konfliktu s nativním grayscalefiltrem CSS.
• Přejmenováno .table-inversena , .thead-inverse, a .thead-defaultna .*-darka .*-light, což odpovídá našim barevným schématům používaným jinde.
• Responzivní tabulky nyní generují třídy pro každý bod přerušení mřížky. Toto se liší od Beta 1 v tom, že to, .table-responsiveco jste používali, je spíše .table-responsive-md. Nyní můžete použít .table-responsivenebo .table-responsive-{sm,md,lg,xl}podle potřeby.
• Zahozená podpora Bower jako správce balíčků byla pro alternativy (např. Yarn nebo npm) zastaralá. Podrobnosti viz bower/bower#2298 .
• Bootstrap stále vyžaduje jQuery 1.9.1 nebo vyšší, ale doporučuje se používat verzi 3.x, protože Bootstrap podporuje prohlížeče v3.x a navíc verze 3.x má nějaké bezpečnostní opravy.
• Odebrána nepoužívaná .form-control-labeltřída. Pokud jste tuto třídu použili, byla to duplikát .col-form-labeltřídy, která byla vertikálně vystředěna a <label>s ní spojeným vstupem v horizontálních rozvrženích formuláře.
• Změněno color-yiqz mixinu, který obsahoval colorvlastnost, na funkci, která vrací hodnotu, což vám umožňuje použít ji pro jakoukoli vlastnost CSS. Například místo color-yiq(#000), byste napsali color: color-yiq(#000);.

Zvýraznění

• Zavedeno nové pointer-eventspoužití na modalech. Vnější .modal-dialogprochází událostmi s pointer-events: nonepro vlastní manipulaci s kliknutím (umožňuje pouze naslouchat .modal-backdropvšem kliknutím) a poté proti němu působí skutečným .modal-contents pointer-events: auto.

souhrn

Zde jsou velké položky vstupenek, kterých byste si měli být vědomi při přechodu z v3 na v4.

Podpora prohlížeče

• Byla zrušena podpora IE8, IE9 a iOS 6. v4 je nyní pouze IE10+ a iOS 7+. Pro weby, které potřebují jeden z nich, použijte v3.
• Přidána oficiální podpora pro Android v5.0 Lollipop's Browser a WebView. Dřívější verze prohlížeče Android a WebView zůstávají pouze neoficiálně podporovány.

Globální změny

• Flexbox je ve výchozím nastavení povolen. Obecně to znamená odklon od plováků a více napříč našimi součástmi.
• Přešlo z Less na Sass pro naše zdrojové soubory CSS.
• Přepnuto z pxna remjako naše primární jednotka CSS, ačkoli pixely se stále používají pro dotazy na média a chování mřížky, protože výřezy zařízení nejsou ovlivněny velikostí typu.
• Globální velikost písma se zvětšila z 14pxna 16px.
• Přepracované vrstvy mřížky, aby se přidala pátá možnost (adresování menších zařízení na 576pxa pod) a odstranění -xsinfixu z těchto tříd. Příklad: .col-6.col-sm-4.col-md-3.
• Samostatné volitelné téma bylo nahrazeno konfigurovatelnými možnostmi prostřednictvím proměnných SCSS (např. $enable-gradients: true).
• Systém sestavení přepracován tak, aby místo Gruntu používal řadu skriptů npm. Viz package.jsonvšechny skripty nebo soubor readme našeho projektu pro potřeby místního rozvoje.
• Nereagující použití Bootstrapu již není podporováno.
• Vypustil online Customizer ve prospěch rozsáhlejší dokumentace k nastavení a přizpůsobených sestavení.
• Přidány desítky nových tříd obslužných programů pro běžné páry CSS vlastnost-hodnota a zkratky pro mezery mezi okrajem a odsazením.

Mřížkový systém

• Přesunuto do flexboxu.
  • Přidána podpora pro flexbox v mixinech mřížky a předdefinovaných třídách.
  • Součástí flexboxu je podpora pro třídy vertikálního a horizontálního vyrovnání.
• Aktualizované názvy tříd mřížky a nová vrstva mřížky.
  • Níže byla přidána nová smvrstva mřížky 768pxpro podrobnější kontrolu. Nyní máme xs, sm, md, lga xl. To také znamená, že každá úroveň byla zvýšena o jednu úroveň (takže .col-md-6ve v3 je nyní .col-lg-6ve v4).
  • xstřídy mřížky byly upraveny tak, aby nevyžadovaly infix, aby přesněji reprezentovaly, že začínají používat styly na min-width: 0a nikoli na nastavené hodnotě pixelu. Místo .col-xs-6, je to teď .col-6. Všechny ostatní vrstvy mřížky vyžadují infix (např. sm).
• Aktualizované velikosti mřížky, mixiny a proměnné.
  • Síťové okapy nyní mají mapu Sass, takže můžete určit konkrétní šířky okapů v každém bodě přerušení.
  • Aktualizované mřížkové mixy pro použití make-col-readyprep mixin a make-colpro nastavení flexa max-widthpro jednotlivé velikosti sloupců.
  • Změněny body přerušení dotazu na média a šířky kontejneru mřížkového systému, aby se zohlednila nová vrstva mřížky a zajistilo se, že sloupce jsou rovnoměrně dělitelné podle 12jejich maximální šířky.
  • Zarážky mřížky a šířky kontejnerů jsou nyní zpracovávány prostřednictvím map Sass ( $grid-breakpointsa $container-max-widths) namísto několika samostatných proměnných. Ty zcela nahrazují @screen-*proměnné a umožňují vám plně přizpůsobit úrovně mřížky.
  • Změnily se i dotazy na média. Namísto opakování našich deklarací mediálních dotazů pokaždé se stejnou hodnotou nyní máme @include media-breakpoint-up/down/only. Nyní místo psaní @media (min-width: @screen-sm-min) { ... }můžete psát @include media-breakpoint-up(sm) { ... }.

Komponenty

• Vypuštěné panely, miniatury a jamky pro novou všeobjímající komponentu, karty .
• Vypustilo písmo ikony Glyphicons. Pokud potřebujete ikony, některé možnosti jsou:
  • upstream verze Glyphicons
  • Octicons
  • Písmo úžasné
  • Seznam alternativ naleznete na stránce Rozšířit . Máte další návrhy? Otevřete prosím problém nebo PR.
• Zahodili plugin Affix jQuery.
  • Místo toho doporučujeme použít position: sticky. Podrobnosti a konkrétní doporučení pro polyfill najdete v položce HTML5 Please . Jedním z návrhů je použít @supportspravidlo pro jeho implementaci (např. @supports (position: sticky) { ... })/
  • Pokud jste použili Affix k aplikaci dalších stylů, které nejsou positionstyly, polyvýplně nemusí podporovat váš případ použití. Jednou z možností pro takové použití je knihovna ScrollPos-Styler třetí strany .
• Vypustila komponentu pageru, protože to byla v podstatě mírně upravená tlačítka.
• Téměř všechny komponenty byly změněny tak, aby používaly více nevnořených selektorů tříd namísto příliš specifických selektorů potomků.

Podle složky

Tento seznam zdůrazňuje klíčové změny podle komponent mezi v3.xx a v4.0.0.

Restartujte

Novinkou pro Bootstrap 4 je Reboot , nová šablona stylů, která staví na Normalize s našimi vlastními poněkud zaujatými styly resetování. Selektory v tomto souboru používají pouze prvky – nejsou zde žádné třídy. To izoluje naše styly resetování od stylů komponent pro modulárnější přístup. Některé z nejdůležitějších resetů, které to zahrnuje, jsou box-sizing: border-boxzměna, přechod z emna remjednotky u mnoha prvků, styly odkazů a mnoho resetů formulářových prvků.

Typografie

• Všechny nástroje byly přesunuty .text-do _utilities.scsssouboru.
• Zahozeno .page-header, protože jeho styly lze použít pomocí nástrojů.
• .dl-horizontalbylo vypuštěno. Místo toho použijte .rowon <dl>a použijte třídy sloupců mřížky (nebo mixiny) na jeho <dt>a podřízených <dd>.
• Přepracované blokové uvozovky, přesunutí jejich stylů z <blockquote>prvku do jediné třídy, .blockquote. Vypustil .blockquote-reversemodifikátor pro textové nástroje.
• .list-inlinenyní vyžaduje, aby na položky seznamu jeho potomků byla .list-inline-itempoužita nová třída.

snímky

• Přejmenováno .img-responsivena .img-fluid.
• Přejmenováno .img-roundedna.rounded
• Přejmenováno .img-circlena.rounded-circle

Tabulky

• Téměř všechny instance >selektoru byly odstraněny, což znamená, že vnořené tabulky budou nyní automaticky dědit styly od svých rodičů. To výrazně zjednodušuje naše selektory a potenciální přizpůsobení.
• Přejmenováno .table-condensedna .table-smkvůli konzistenci.
• Přidána nová .table-inversemožnost.
• Přidány modifikátory záhlaví tabulky: .thead-defaulta .thead-inverse.
• Přejmenované kontextové třídy tak, aby měly .table--prefix. Proto .active, .success, .warning, .dangera .infodo .table-active, .table-success, .table-warning, .table-dangera .table-info.

formuláře

• Přesunutý prvek se resetuje na _reboot.scsssoubor.
• Přejmenováno .control-labelna .col-form-label.
• Přejmenováno .input-lga .input-smna .form-control-lga .form-control-sm.
• Kvůli .form-group-*jednoduchosti byly třídy zrušeny. Místo toho nyní použijte .form-control-*třídy.
• Byl odstraněn .help-blocka nahrazen .form-texttextem nápovědy na úrovni bloku. Pro vložený text nápovědy a další flexibilní možnosti použijte pomocné třídy jako .text-muted.
• Spadl .radio-inlinea .checkbox-inline.
• Konsolidované .checkboxa .radiodo .form-checkrůzných .form-check-*tříd.
• Horizontální formy přepracovány:
  • Upustil od .form-horizontalpožadavku na třídu.
  • .form-groupjiž nepoužívá styly z .rowmixinu via, takže .rowje nyní vyžadován pro rozvržení vodorovné mřížky (např. <div class="form-group row">).
  • Přidána nová .col-form-labeltřída k vertikálně středovým štítkům s .form-controls.
  • Přidána novinka .form-rowpro rozvržení kompaktních formulářů s třídami mřížky (vyměňte své .rowza a .form-rowa jděte).
• Přidána podpora vlastních formulářů (pro zaškrtávací políčka, rádia, výběry a vkládání souborů).
• .has-errorTřídy , .has-warning, a byly nahrazeny .has-successvalidací formuláře HTML5 prostřednictvím CSS :invalida :validpseudotříd.
• Přejmenováno .form-control-staticna .form-control-plaintext.

Tlačítka

• Přejmenováno .btn-defaultna .btn-secondary.
• .btn-xsTřída úplně vypadla, protože je .btn-smproporcionálně mnohem menší než v3.
• Funkce stavového tlačítka pluginu button.jsjQuery byla vypuštěna. To zahrnuje metody $().button(string)a $().button('reset'). Doporučujeme místo toho použít malý kousek vlastního JavaScriptu, který bude mít tu výhodu, že se bude chovat přesně tak, jak chcete.
  • Všimněte si, že ostatní funkce pluginu (zaškrtávací políčka tlačítek, přepínače tlačítek, tlačítka s jedním přepínáním) byly ve verzi 4 zachovány.
• Změňte tlačítka' [disabled]na :disabled, protože IE9+ podporuje :disabled. Je to však fieldset[disabled]stále nutné, protože nativní zakázané sady polí jsou v IE11 stále chybné .

Skupina tlačítek

• Přepsaná komponenta s flexboxem.
• Odebráno .btn-group-justified. Jako náhradu můžete použít <div class="btn-group d-flex" role="group"></div>jako obal kolem prvků s .w-100.
• Třídu zcela zahodil, .btn-group-xsprotože byl odebrán .btn-xs.
• Odstraněny explicitní mezery mezi skupinami tlačítek v panelech nástrojů tlačítek; nyní použijte nástroje pro marži.
• Vylepšená dokumentace pro použití s ​​dalšími komponentami.

Rozbalovací seznamy

• Přepnuto z rodičovských selektorů na singulární třídy pro všechny komponenty, modifikátory atd.
• Zjednodušené styly rozevírací nabídky, které se již nebudou dodávat se šipkami směřujícími nahoru nebo dolů připojenými k rozbalovací nabídce.
• Rozbalovací seznamy lze nyní vytvořit pomocí <div>s nebo <ul>s.
• Přestavěné rozevírací styly a značky poskytující snadnou, vestavěnou podporu pro <a>a <button>založené rozevírací položky.
• Přejmenováno .dividerna .dropdown-divider.
• Položky rozbalovací nabídky nyní vyžadují .dropdown-item.
• Rozbalovací přepínače již nevyžadují explicitní <span class="caret"></span>; toto je nyní poskytováno automaticky prostřednictvím CSS ::afterna .dropdown-toggle.

Mřížkový systém

• Přidán nový 576pxbod přerušení mřížky jako sm, což znamená, že nyní existuje celkem pět úrovní ( xs, sm, md, lga xl).
• Přejmenovány responzivní třídy modifikátoru mřížky z .col-{breakpoint}-{modifier}-{size}na .{modifier}-{breakpoint}-{size}pro jednodušší třídy mřížky.
• Vypuštěné třídy modifikátorů push a pull pro nové třídy poháněné flexboxem order. Například místo .col-8.push-4a .col-4.pull-8použijete .col-8.order-2a .col-4.order-1.
• Přidány třídy utility flexbox pro gridový systém a komponenty.

Seznam skupin

• Přepsaná komponenta s flexboxem.
• Nahrazeno a.list-group-itemexplicitní třídou , .list-group-item-actionpro stylování verzí odkazů a tlačítek položek skupiny seznamu.
• Přidána .list-group-flushtřída pro použití s ​​kartami.

Modální

• Přepsaná komponenta s flexboxem.
• Vzhledem k přechodu na flexbox je zarovnání ikon pro zrušení v záhlaví pravděpodobně přerušeno, protože již nepoužíváme plovoucí. Plovoucí obsah je na prvním místě, ale s flexboxem to již neplatí. Aktualizujte své ikony zavírání tak, aby následovaly po modálních názvech a opravte je.
• Možnost remote(kterou bylo možné použít k automatickému načtení a vložení externího obsahu do modalu) a odpovídající loaded.bs.modaludálost byly odstraněny. Místo toho doporučujeme použít šablonu na straně klienta nebo rámec pro vázání dat nebo sami zavolat jQuery.load .

Nav

• Přepsaná komponenta s flexboxem.
• Vypustil téměř všechny >selektory pro jednodušší stylování prostřednictvím nevnořených tříd.
• Místo selektorů specifických pro HTML, jako .nav > li > aje , používáme samostatné třídy pro .navs, .nav-items a .nav-links. Díky tomu je váš HTML flexibilnější a zároveň přináší zvýšenou rozšiřitelnost.

Navbar

Navbar byl zcela přepsán do flexboxu s vylepšenou podporou pro zarovnání, odezvu a přizpůsobení.

• Responzivní chování navigačního panelu se nyní aplikuje na .navbartřídu prostřednictvím požadovaného, .navbar-expand-{breakpoint} ​​kde si můžete vybrat, kde se má navigační panel sbalit. Dříve to byla méně variabilní modifikace a vyžadovala rekompilaci.
• .navbar-defaultje nyní .navbar-light, i když .navbar-darkzůstává stejný. Jeden z nich je vyžadován na každém navigačním panelu. Nicméně, tyto třídy už ne soubor background-colors; místo toho v podstatě ovlivňují pouze color.
• Navbary nyní vyžadují nějakou deklaraci pozadí. Vyberte si z našich obslužných programů na pozadí ( .bg-*) nebo si nastavte své vlastní pomocí výše uvedených světelných/inverzních tříd pro šílené přizpůsobení .
• Vzhledem ke stylům flexboxu mohou nyní navigační panely používat nástroje flexbox pro snadné možnosti zarovnání.
• .navbar-toggleje nyní .navbar-togglera má různé styly a vnitřní značení (už ne tři <span>s).
• Třídu .navbar-formúplně opustil. Už to není nutné; místo toho pouze použijte .form-inlinea použijte nástroje pro okraj podle potřeby.
• Navigační panely již neobsahují margin-bottomnebo border-radiusve výchozím nastavení. Podle potřeby používejte nástroje.
• Všechny příklady s navigačními panely byly aktualizovány tak, aby obsahovaly nové značky.

Stránkování

• Přepsaná komponenta s flexboxem.
• Explicitní třídy ( .page-item, .page-link) jsou nyní vyžadovány na potomcích .paginations
• Součást úplně vypustila, .pagerprotože to bylo jen o málo víc než přizpůsobená tlačítka obrysu.

Strouhanka

• Explicitní třída , .breadcrumb-itemje nyní vyžadována na potomcích .breadcrumbs

Štítky a odznaky

• Konsoliduje .labela .badgeodděluje od <label>prvku a zjednodušuje související komponenty.
• Přidán .badge-pilljako modifikátor pro zaoblený vzhled „pilulky“.
• Odznaky se již ve skupinách seznamů a dalších komponentách automaticky neuvolňují. K tomu jsou nyní vyžadovány užitné třídy.
• .badge-defaultbyl vypuštěn a .badge-secondarypřidán, aby odpovídal třídám modifikátorů komponent používaných jinde.

Panely, miniatury a jamky

Úplně vypuštěno pro novou komponentu karty.

Panely

• .paneldo .card, nyní postavený s flexboxem.
• .panel-defaultodstraněna a žádná výměna.
• .panel-groupodstraněna a žádná výměna. .card-groupnení náhrada, je jiná.
• .panel-headingna.card-header
• .panel-titledo .card-title. V závislosti na požadovaném vzhledu můžete také chtít použít prvky nadpisu nebo třídy (např <h3>. , .h3) nebo tučné prvky nebo třídy (např <strong>. , <b>, .font-weight-bold). Všimněte si, že .card-title, i když je pojmenován podobně, vytváří jiný vzhled než .panel-title.
• .panel-bodyna.card-body
• .panel-footerna.card-footer
• .panel-primary, .panel-success, .panel-info, .panel-warning, a .panel-dangerbyly vynechány pro .bg-, .text-, a .bordernástroje vygenerované z naší $theme-colorsmapy Sass.

Pokrok

• Kontextové .progress-bar-*třídy byly nahrazeny .bg-*nástroji. Například se class="progress-bar progress-bar-danger"stává class="progress-bar bg-danger".
• .activeAnimované ukazatele průběhu byly nahrazeny .progress-bar-animated.

Kolotoč

• Přepracována celá součást, aby se zjednodušil design a styl. Máme pro vás méně stylů k přepsání, nové indikátory a nové ikony.
• Všechny CSS byly zrušeny vnořením a přejmenovány, což zajišťuje, že každá třída má předponu .carousel-.
  • Pro položky karuselu jsou .next, .prev, .left, a .rightnyní .carousel-item-next, .carousel-item-prev, .carousel-item-lefta .carousel-item-right.
  • .itemje také nyní .carousel-item.
  • Pro ovládací prvky předchozí/další .carousel-control.righta .carousel-control.leftjsou nyní .carousel-control-nexta .carousel-control-prev, což znamená, že již nevyžadují konkrétní základní třídu.
• Odstraněny všechny responzivní styly, odložení na nástroje (např. zobrazování titulků v určitých výřezech) a vlastní styly podle potřeby.
• Byly odstraněny přepisy obrázků pro obrázky v položkách karuselu a byly převedeny na nástroje.
• Vylepšili jsme příklad Carousel tak, aby zahrnoval nové značky a styly.

Tabulky

• Odebrána podpora stylizovaných vnořených tabulek. Všechny styly tabulek jsou nyní zděděny ve verzi 4 pro jednodušší selektory.
• Přidána varianta inverzní tabulky.

Utility

• Zobrazit, skryté a další:
  • Upravili zobrazovací nástroje tak, aby byly responzivní (např. .d-nonea d-{sm,md,lg,xl}-none).
  • Upustil od většiny .hidden-*nástrojů pro nové nástroje pro zobrazování . Například místo .hidden-sm-up, použijte .d-sm-none. Přejmenoval .hidden-printobslužné programy tak, aby používaly schéma pojmenování obslužného programu zobrazení. Další informace naleznete v části Responzivní nástroje na této stránce.
  • Přidány .float-{sm,md,lg,xl}-{left,right,none}třídy pro responzivní floating a odstraněny , .pull-lefta .pull-rightprotože jsou nadbytečné pro .float-lefta .float-right.
• Typ:
  • Do našich tříd zarovnání textu byly přidány responzivní varianty .text-{sm,md,lg,xl}-{left,center,right}.
• Zarovnání a rozestupy:
  • Přidány nové responzivní nástroje pro okraje a výplň pro všechny strany a navíc vertikální a horizontální zkratky.
  • Přidána lodní zátěž flexbox utilit .
  • Odešel .center-blockdo nové .mx-autotřídy.
• Clearfix aktualizován, aby přestal podporovat starší verze prohlížečů.

Mixiny předpony dodavatele

Mixiny předpon dodavatele Bootstrapu 3 , které byly ve verzi 3.2.0 zastaralé, byly z Bootstrapu 4 odstraněny. Protože používáme Autoprefixer , již nejsou nutné.

Odebrány následující mixiny : animation, animation-delay, animation-direction, animation-duration, animation-fill-mode, animation-iteration-count, animation-name, animation-timing-function, backface-visibility, box-sizing, content-columns, hyphens, opacity, perspective, perspective-origin, rotate, rotateX, rotateY, scale, scaleX, scaleY, skew, transform-origin, transition-delay, transition-duration, transition-property, transition-timing-function,transition-transformtranslatetranslate3duser-select

Dokumentace

Naše dokumentace byla také celkově upgradována. Zde je spodní část:

• Stále používáme Jekyll, ale máme v mixu pluginy:
  • bugify.rbse používá k efektivnímu výpisu záznamů na naší stránce s chybami v prohlížeči .
  • example.rbje vlastní větev výchozího highlight.rbpluginu, která umožňuje snadnější manipulaci s ukázkovým kódem.
  • callout.rbje podobná vlastní vidlice, ale určená pro naše speciální popisky dokumentů.
  • jekyll-toc se používá ke generování našeho obsahu.
• Veškerý obsah dokumentů byl pro snadnější úpravy přepsán v Markdown (místo HTML).
• Stránky byly reorganizovány pro jednodušší obsah a přístupnější hierarchii.
• Přešli jsme z běžného CSS na SCSS, abychom plně využili Bootstrapových proměnných, mixinů a dalších.

Responzivní nástroje

Všechny @screen-proměnné byly ve verzi 4.0.0 odstraněny. Místo toho použijte mixiny media-breakpoint-up(), media-breakpoint-down(), nebo Sass nebo mapu Sass.media-breakpoint-only()$grid-breakpoints

Naše responzivní třídy utilit byly z velké části odstraněny ve prospěch explicitních displayutilit.

• Třídy .hiddena .showbyly odstraněny, protože byly v konfliktu s metodami $(...).hide()a jQuery. $(...).show()Místo toho zkuste [hidden]atribut přepnout nebo použijte vložené styly jako style="display: none;"a style="display: block;".
• Všechny .hidden-třídy byly odstraněny, kromě tiskových nástrojů, které byly přejmenovány.
  • Odebráno z v3:.hidden-xs .hidden-sm .hidden-md .hidden-lg .visible-xs-block .visible-xs-inline .visible-xs-inline-block .visible-sm-block .visible-sm-inline .visible-sm-inline-block .visible-md-block .visible-md-inline .visible-md-inline-block .visible-lg-block .visible-lg-inline .visible-lg-inline-block
  • Odebráno z verze 4 alfa:.hidden-xs-up .hidden-xs-down .hidden-sm-up .hidden-sm-down .hidden-md-up .hidden-md-down .hidden-lg-up .hidden-lg-down
• Tiskové nástroje již nezačínají s .hidden-nebo .visible-, ale s .d-print-.
  • Stará jména: .visible-print-block, .visible-print-inline, .visible-print-inline-block,.hidden-print
  • Nové třídy: .d-print-block, .d-print-inline, .d-print-inline-block,.d-print-none

Namísto použití explicitních .visible-*tříd zviditelníte prvek tak, že jej při dané velikosti obrazovky jednoduše neskryjete. Můžete kombinovat jednu .d-*-nonetřídu s jednou .d-*-blocktřídou pro zobrazení prvku pouze na daném intervalu velikostí obrazovky (např .d-none.d-md-block.d-xl-none. zobrazuje prvek pouze na středních a velkých zařízeních).

Všimněte si, že změny zarážek mřížky ve verzi 4 znamenají, že k dosažení stejných výsledků budete muset jít o jeden zarážkový bod větší. Nové responzivní třídy obslužných programů se nepokoušejí vyhovět méně obvyklým případům, kdy viditelnost prvku nelze vyjádřit jako jeden souvislý rozsah velikostí výřezu; v takových případech budete místo toho muset použít vlastní CSS.