Bootstrap 4 Nové a cool funkce, které budete milovat

Další hlavní verze systému Bootstrap je za rohem. Alfa verzi lze již stáhnout z vývojové stránky Bootstrapu a zdrojový kód je také dostupný na Githubu.

Twitter Bootstrap je v současné době nejoblíbenějším rozhraním frontendu. Umožňuje vývojářům rychle vytvořit mobilní a citlivé webové stránky. Bootstrap umožňuje inteligentně využít standardní trio rozhraní HTML5, CSS3 a Javascript. V současné době je využíváno více než 6 miliony webů na webu.

Ačkoliv je Bootstrap 4 stále ve fázi vývoje (takže ho ještě nepoužívejte na živém webu), vývojáři udělali skvělou práci. V tomto příspěvku se podíváme na novou verzi, která obsahuje mnoho skvělých funkcí, které jistě zefektivnit a zlepšit pracovní postup vývoje frontendu.

1. Sass místo LESS

Doposud Bootstrap používal LESS jako svůj hlavní CSS prepocessor, ale pro novou hlavní verzi budou pravidla stylu refactored na Sass, který je mnohem populárnější mezi vývojáři frontendů, má obrovskou základnu přispěvatelů, obecně jednodušší k použití a nabízí více. možností. Díky výkonnému Libsass Sass Complier napsanému v C / C++ Bootstrap 4 bude kompilovat mnohem rychleji než dříve.

2. Nová mřížka pro menší obrazovky

Bootstrap má sofistikovaný systém citlivé sítě, který umožňuje vývojářům cílit na zařízení s různými výřezy. Bootstrap 3 má v současné době 4 sloupce tříd pro sloupce, .col-xs-XX pro mobilní telefony, .col-sm-XX pro tablety, .col-md-XX pro stolní počítače a .col-lg-XX pro větší stolní počítače. Bootstrap 4 vylepší systém mřížek o pátý, který usnadní vývojářům cílové menší zařízení pod šířkou výřezu 480px.

Nová třída mřížek převzala název předchozí nejmenší třídy a posunula aktuální názvy úrovní mřížky nahoru o jeden stupeň. V Bootstrapu 4 budou velké stolní počítače používat .col-xl-XX přepínač třídy. Je důležité vědět, že navzdory novému jménu nepřidali novou třídu pro extra velké obrazovky, ale pro extra malé obrazovky.

3. Zavádí relativní jednotky CSS

Bootstrap 4 konečně upustí podporu pro Internet Explorer 8. To je opravdu chytrý krok, protože jim umožňuje zbavit se otravných polyfillů a převést na relativní CSS jednotky. Namísto pixelů bude nová hlavní verze používat REMs a EMs které umožňují implementovat citlivou typografii na stránkách Bootstrap. To také zvýší čitelnost a zpřístupní stránky pro zdravotně postižené uživatele.

Pokud si chcete vyzkoušet, jak relativní jednotky pracují s novým Bootstrap 4, podívejte se na toto demo na Codepen.

4. Zbrusu nové Bootstrap karty

Vývojový tým se rozhodl sjednotit některé předchozí prvky uživatelského rozhraní Bootstrapu, takže se rozhodli zavést nová komponenta UI s názvem Karty. Karty nahradí dřívější studny, miniatury a panely a poskytnou uživatelům efektivnější pracovní postup. Nebojte se, karty budou mít známé prvky, jako jsou tituly, záhlaví a zápatí studní, miniatur a panelů.

Vzhledem k tomu, že karty budou flexibilnější než stávající komponenty uživatelského rozhraní, umožní větší prostor pro kreativní implementace. Tam jsou někteří průkopníci, kteří již provedli experimenty na Codepen s Bootstrap kartami. Můžete si je zkontrolovat, nebo si vytvořit vlastní karty.

5. Nový modul restartu

Nový modul Reboot nahrazuje předchozí normalize.css resetovat soubor. Není to příkop; naopak, staví na něm více pravidel. Cílem tohoto kroku bylo zahrnout všechny obecné CSS voliče a obnovit styly v jednoduchý, snadno použitelný soubor SCSS. Pokud chcete lépe pochopit, jak nový modul funguje, můžete se zde podívat na zdrojový kód.

Je dobré vědět, že nové styly resetu inteligentně nastavují vlastnost CSS na velikost krabice rámeček na element, který je tedy zděděn každým podřízeným prvkem na stránce. Pravidlo nového stylu umožňuje lépe zvládnout rozvržení. Pokud chcete zažít rozdíl mezi typy obsahu a rámečkem, podívejte se na tento praktický ukázkový program poskytovaný společností CSS-Tricks.com (nebyl vytvořen pro Bootstrap 4, pouze ukazuje, jak lze nastavit velikost okna obecně funguje).

6. Podpora pro Flexbox

Bootstrap 4 umožňuje využít pákového efektu CSS3 Flexbox Layoutu - nicméně aplikace Internet Explorer 9 nepodporuje modul flexbox - výchozí verze Bootstrap 4 využívá vlastnosti plováku a zobrazení CSS pro implementaci rozvržení tekutiny.

Flexbox má snadno použitelné rozvržení, které může být skvěle využito v responzivním designu, protože poskytuje flexibilní kontejner, který se buď rozšiřuje nebo zmenšuje, aby co nejlépe naplnil dostupný prostor. Pokud používáte funkci opt-in flexbox, použijte pouze funkci opt-in ne poskytnout podporu pro IE9.

7. Zjednodušené přizpůsobení proměnných

Všechny proměnné Sass použité v novém vydání Bootstrapu jsou obsaženy v jediném souboru nazvaném _variables.scss, který výrazně zrychlí proces vývoje. Nemusíte dělat nic jiného než kopírování nastavení z tohoto souboru do jiného volaného _custom.scss změnit výchozí hodnoty.

Můžeš přizpůsobit mnoho věcí jako jsou barvy, mezery, styly spojení, typografie, tabulky, zarážky a kontejnery mřížky, číslo sloupce a šířka žlabu a mnoho dalších.

8. Nové třídy nástrojů pro mezery

Bootstrap 3 má již mnoho praktických tříd, například těch, které mění plovoucí nebo clearfix, ale Bootstrap 4 přidává ještě více. nové třídy mezer umožňují vývojářům rychle měnit výplně a okraje na svých stránkách.

Syntaxe pro nové třídy je poměrně přímočará, například přidání .třída m-a-0 spojuje pravidlo stylu, které nastaví okraje na 0 na všech stranách daného prvku (margin-all-0). Při použití okrajů m- prefix, výplně jsou stylizované s str- předpona. Ve vývojových dokumentech se můžete podívat na všechny nové třídy pomůcek.

9. Tooltips a Popovers Powered by Tether

V nástrojích Bootstrap 4 a popovers využívá knihovnu supercool Tether, což je nástroj pro určování polohy, který umožňuje udržet absolutně umístěný prvek hned vedle dalšího prvku na stejné stránce. To znamená popisky a popovers budou automaticky umístěny správně na webových stránkách Bootstrap 4.

Nezapomeňte, že Tether je knihovnou JavaScript třetích stran, musíte ji před vložením souboru bootstrap.js samostatně zahrnout do kódu HTML.

10. Refactored JavaScript Pluginy

Vývojový tým refactored každý JavaScript plugin pro nové vydání pomocí EcmaScript 6. S inteligentní využití nejnovějších specificatons a nejnovější vylepšení mají v úmyslu zlepšit frontend zkušenosti.

Nový Bootstrap 4 prošel také dalšími vylepšeními JavaScriptu, například kontrola typu volby, obecné metody odtrhávání, a Podpora UMD, to vše bude fungovat společně, aby se nejoblíbenější rámec frontendu řídil hladce než kdy předtím.

Nyní si přečtěte: 10 lehkých alternativ k Bootstrap & Foundation