Detailně: layout v Bootstrapu 4

Vzhůru dolů 28.03.2017 21:30 Detailně: layout v Bootstrapu 4 Pojďme se spolu podívat na nový systém pro tvorbu rozvržení stránky v chystané verzi Bootstrapu. Pořádně do hloubky. Ten flexbox! Grid systém nového Bootstrapu je na něm postavený a dost to pomáhá. Evolučně ale vychází z předchozí verze, takže tutoriál vlastně využijete i vy, trojkaři. Ve čtyřce je možné stáhnout CSS soubor s gridem samostatně, což je další plus. Ano, Bootstrap 4 je stále v alfa verzi. Nicméně, změny grid systému chystané do první bety jsou jen malinké, takže si troufnu napsat, že tahle stránka zůstane beze změn i po vydání betaverze a jednou i verze finální. Samotný grid systém bych se prostě už nebál používat. Rychlá navigace po stránce: kontejner, řádka, sloupec, sloupec do mřížky, responzivní sloupec, posuny, push a pull, změna pořadí a zarovnávání. Úplné základy Základní struktura kódu je stále složená z kontejneru , řádky a sloupce layoutu : Struktura zůstává stejná s trojkou, jen se to chová jinak. Uvidíte. A v trojce jsme nemohli používat samostatnou třídu .col. Kontejner rozvržení Kontejner je obal pro váš layout. Bootstrap má dva typy obalů: .container je kontejner fixní šířky: má stupně omezené maximální šířkou. Jeho maximální šířky jsou 540px na small šířkách okna, 720px 960px a 1140px . .container-fluid je pružný, takže se roztahuje do plné šířky okna prohlížeče. Ten asi budete využívat méně často. Kontejnerů můžete mít na stránce samozřejmě víc. V ukázce je porovnání pružného i fixního kontejneru: cdpn.io/e/RpYqwK. Tohle zůstává stejné. Ve verzi 4 ale přibyl jeden bod breakpoint pro mobilní zařízení. Psal jsem o tom v článku o chystaných novinkách ve čtyřce. Řádek rozvržení Řádky jsou vodorovná seskupení sloupců rozvržení. Na třídu .row nesmíte zapomenout, má totiž dvě funkce: Spuštění layoutu. .row je flex kontejner, rodič layoutu. Zarovnávání layoutu. Má totiž nastavený záporný vnější okraj. Při používání Bootstrapu 3 se na .row často zapomínalo. Ve čtyřce už bez řádky není možné udělat layout. To je docela účinná tabletka proti zapomnětlivosti. Do ukázky se podívejte, co se stane, když řádek omylem vynecháte: cdpn.io/e/VpGVKm. Sloupec: .col Sloupec je základní stavební jednotka layoutů v Bootstrapu. Nově je ve verzi 4 možné zapsat sloupec jednoduše pomocí prvku s třídou .col bez přípony. .col má nastaveno flex-grow: 1, takže sloupečky budou stejně široké. Viz vlastnosti flex položky. To je prima. Jen pozor, layout neuvidíte na menších velikostech okna. Flexbox vlastnosti v .col jsou nastavené tak, aby zohledňovaly obsah okna. Zažijete to i v ukázce, když si okno zmenšíte pod 260 pixelů: cdpn.io/e/ZeMmJg. Sloupec zarovnaný do mřížky: .col- Bootstrap používá pravidelnou mřížku. Zarovnání do ní je z pohledu uživatele, designéra, ale i kodéra výhodné. Věřím, že tyhle třídy použijete velmi často. Výchozí mřížka je dvanáctisloupcová. K dispozici tedy máte třídy .col-1 až .col-12. Vizualizace rozvržení layoutu webu do dvanáctisloupcové mřížky. getbootstrap.com Jde kombinovat mřížku se sloupečky bez přípony? Jistě: .col třídy se pak díky flex-grow:1 dělí rovným dílem o prostor, který zůstává po „mřížkových“ sloupečcích. Opět se tady ale musíte smířit se vzdorovitostí .col tříd, které poslouchají pnutí obsahu a ne vždy vám udělají layout tak, jak si ho představujete. cdpn.io/e/BWOGvq. Pokročilým použitím s preprocesorem Sass je samozřejmě možné výchozí počet sloupců změnit. Stačí přenastavit proměnnou $grid-columns. Sloupec responzivní: .col- Abychom mohli udělat různé layouty na různě velkých šířkách okna, nemůžeme žít bez responzivních přípon: Body zlomu Extra small Small Medium Large Extra large Šířka okna Třídy je samozřejmě možné úplně v pohodě kombinovat a dělat různé layouty pro různá rozlišení: Nejlépe to všechno uvidíte v další mé ukázce: cdpn.io/e/zZJyGN Posuny: .offset- Sloupečky můžete posunovat směrem doleva přidáním vnějšího okraje třídami z rodiny posunů. V ukázce třeba mám sloupec třetinové délky .col-md-4, který posouváme o třetinu zleva offset-md-4. Ve výsledku bude tedy centrovaný. cdpn.io/e/jBvXmP Push a pull Třída .push- funguje podobně jako offsety. Prostě v daném bodu zlomu posune prvek o daný počet sloupečků mřížky doprava. .pull- dělá pravý opak – posouvá doleva. Jde to hezky využít pro změnu pořadí prvků: V příkladu se díky tomu na md breakpointu, tedy od šířky okna 768 pixelů, oba sloupce prohodí. 1. je v kódu první, ale v layoutu bude až na druhém místě. cdpn.io/e/xqamPp Změna pořadí Kromě výše uvedených způsobů lze měnit pořadí sloupců layoutu pomocí třídy .flex-first: Vychází to z flexboxí vlastnosti order. Ukázka: cdpn.io/e/dvqrZv To je věc nová pro čtvrtou verzi. Ale jak sami vidíte, pro změnu pořadí je to daleko příjemnější než metoda pomocí tříd .pull a .push. Zanořování Velmi užitečné je, že layout můžete zanořovat. Prostě přidejte další řádku layoutu – třídu .row: Každá nově vytvořená řádka layoutu se řídí šířkou rodiče. Takže se vám může stát, že zanořený layout opustí celostránkovou dvanáctisloupcovou mřížku. Nemusí vám to vadit, ale raději na to upozorňuji. cdpn.io/e/xqamzW Zarovnávání Použití flexboxu otevřelo v mřížce Bootstrapu 4 kromě jiného také výborné možnosti zarovnání obsahu. Samozřejmě v obou směrech a jak pro celý layout, tak jeho jednotlivé položky. Zarovnání na vodorovné ose: Zarovnání Celý layout Doleva .justify-content-start Na střed .justify-content-center Doprava .justify-content-end Mezery kolem sloupců .justify-content-around Mezery mezi sloupci .justify-content-between Vychází to z vlastnosti flex kontejneru justify-content. Následuje příklad použití: Pro tenhle kód se první sloupec přilepí doleva a druhý doprava. Volný prostor se totiž rozdělí mezi jednotlivé sloupce . cdnp.io/ZeMPbP Zarovnání na svislé ose: Zarovnání Celý layout Sloupec Doleva .align-items-start .align-self-start Na střed .align-items-center .align-self-center Doprava .align-items-end .align-self-end Vychází to z vlastností flex kontejneru align-items a flex položky align-items. Příklad použití: Všechny sloupce layoutu jsou na svislé ose zarovnané doprostřed . Jen tomu poslednímu jsme dopřáli výjimku. Je zarovnaný dole, ke konci svislé osy layoutu . cdnp.io/XMPGjv To je vše. Děkuji za pozornost a ať vám mřížka v Bootstrapu 4 dobře slouží. Odkazy na závěr: Sada ukázek na CodePenu. Dokumentace gridu na webu Bootstrapu 4. Samostatný Bootstrap 4 grid ke stažení. Naše školení pokročilého využití Bootstrapu. Děkuji partnerům Vzhůru dolů. Aktuálně hledají tyto lidi: .