in English

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.x 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:
  • 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.
  • 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.
  • 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 .
  • 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 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.
  • 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.
  • 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 pro stylizované vnořené tabulky. 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:
  • 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.