Jak vytvořit responzivní web s použitím Bootstrap

22. Červen 2017 · Tvorba webu

Vývojáři Twitteru jsou asi hodně šikovní kluci, jejich Bootstrap na tvorbu webů považuju za hodně skvělý počin. Bootstrap je volně ke stažení na http://getbootstrap.com/ aktuálně stable verze 3.3.7. Jestli tvoříte weby a chcete je jednoduše udělat použitelné na všech zařízeních, tak s Bootstrapem ušetříte hromadu práce a času. Již vytvořené HTML5 navigační menu, tlačítka, tabulky včetně stylů CSS3 to vše můžete ihned použít. Bootstrap používá jQuery, takže budete potřebovat nalinkovat Javascript Boostrapu, CSS a jQuery. Ve verzi 4 ještě javascript Tether. Pro snadnější práci s CSS styly se dá použít preprocesor Less nebo Sass.

Grid

Začít používat Bootstrap není tak snadné, je třeba pochopit nejdříve Grid (mřížka se 12 sloupci). Existují na to naštěstí i pluginy např. do Chrome, kde je krásně vidět, kolik sloupců budete na daný prvek potřebovat. Rozdělením stránky do gridu si ulehčíte opravdu hodně práce. Grid lze nastavovat pro klasické desktopy (lg), tablety (sm) a mobily (xs). Novější verze 4 má ještě další rozměry (xl). Např. chci mít 3 obrázky (<div><img …></div>) vedle sebe na PC, na tabletu dva vedle sebe a na mobilu jenom jeden, takže použiju class=”col-lg-4 col-sm-6 col-xs-12″. Na řádek se vleze max. 12 sloupců, přebytek se automaticky hodí na nový řádek, jednoduchý.

Navbar

Navigační menu je třeba udělat tak, že se na malém zařízení smrskne do tlačítka (collapse) a dá se rozbalovat jako rolovatelné menu. To vše Bootstrap řeší za vás, stačí vytvořit list <ul> s odkazy, přidat styly a menu je hotové.

Carousel

Fotogalerie nebo slider s obrázky jednoduše zobrazíte přes carousel. Využití na úvodní stránce s cílem upoutat pozornost nebo na fotoalbum.

Ikonky glyphicons

Součástí balíku ve verzi B3 jsou ikonky např. user, calendar. Ve verzi 4 už chybí a musí se nalinkovat samostatně, důvodem je asi fakt, že lepší než Glyphicons je Font Awesome. To je na vás, co použijete. Funguje to stejně, ikonku přidáte např. pomocí <i class=”fa fa-user”></i> a můžete ikonkám nastavit barvu a pozadí pomocí CSS, to vše bez grafického editoru, fakt skvělá věc!