Vydělávej až 160.000 Kč měsíčně! Akreditované rekvalifikační kurzy s garancí práce od 0 Kč. Více informací.
Hledáme nové posily do ITnetwork týmu. Podívej se na volné pozice a přidej se do nejagilnější firmy na trhu - Více informací.

8. diel - Úvod do Bootstrap

V predchádzajúcej lekcii, Grid systém od Flexbox Grid , sme si ukázali, ako sa pracuje s grid systémom od flexboxgrid.com.

V dnešnej lekcii sa pozrieme na známy framework Bootstrap, z ktorého vychádza FlexBox Grid systém, o ktorom sme si povedali v minulej lekcii.

Čo je to framework?

V minulosti dochádzalo k pomerne búrlivému zdokonaľovanie jazykov, ako tých programovacích, tak tých značkovacích (HTML) a prípadne ďalších, napr. Stylovacího jazyka CSS. Ako čas bežal, jazyky začali byť v určitom ohľade už "hotové" a teraz umožňujú vytvoriť tie časti aplikácií, pre ktoré sú určené, veľmi rýchlo a efektívne. I sa najdokonalejšom nástrojmi však musíme stále pracovať, napr. V CSS musíme pre každý náš projekt znovu a znovu definovať úplne základné štýly, teda že tabuľka má mať rámček alebo že tlačidlo má byť farebný obdĺžnik. Elementy v prvých verziách jazyka HTML totiž nijako nastylované neboli a kvôli spätnej kompatibilite sa to nesmie už nikdy zmeniť. Keď už definujete ten istý rámček pre tabuľku v desiatom projekte, nutne vás napadne vytvoriť si nejakú knižnicu, kam si tie najpoužívanejšie štýly uložíte. Knižnicu budete kopírovať do svojich projektov a razom tu budú štýly dostupné bez nutnosti strácať čas ich definovaním znovu a znovu. Webdesign je predsa o nápade a nie o opisovanie rámčeku tabuľky alebo definovanie, že zľava má byť zelene. To je plytvanie vaším časom. A že by každý web mal mať unikátny dizajn? To síce áno, ale v naprostej väčšine prípadov stačí len drobne upraviť ten základný, tabuľky budú mať na väčšine webov rámčeky, tlačidlá budú väčšinou obdĺžniková pod. Keď je vaše knižnica dostatočne veľká, tak veľká, že poskytuje štýly pre naprostú väčšinu častí súčasných webových stránok , hovoríme ju framework. Framework je teda ucelená knižnica alebo sada knižníc, ktorá dáva dokopy hotové riešenie. A takú CSS knižnicu vytvorili v roku 2011 vo firme Twitter, dnes je známa ako framework Bootstrap a je najpopulárnejším CSS frameworkom na svete.

Twitter Bootstrap

Bootstrap logo - Responzívne webdesign

Zamestnanca Twitteri trápila nekonzistencie rôznych aplikácií vo firme, ich vzhľad bol odlišný a bola nutná znalosť konkrétneho štýlu k ich úprave. Preto začali pracovať na univerzálnom CSS frameworku, ktorý firma nakoniec uvoľnila ako open-source. To znamená, že ho môžete voľne používať aj na komerčné účely a nemusíte to ani nikde uvádzať. Bootstrap určite nie je niečo, za čo by ste sa mali hanbiť, naopak sa stal značkou, ktorá zaručuje moderné a dobre fungujúce kabát pre web, kde je použitý. To najlepšie je ale obrovské množstvo voľne dostupných šablón, ktoré sú nápadité, vzhľadovo veľmi rozmanité a po menšej úprave poslúži ako fungujúci základ pre vašu prácu. Začať používať CSS framework je pre vývojárov podobný posun ako treba začať používať CSS a nepísať štýly priamo do HTML, ako sa to robilo v roku 1995. Framework si samozrejme môžeme vytvoriť aj svoj vlastný, však prečo by sme to mali robiť, ak niekto už urobil túto zdĺhavú prácu a dal nám tento framework ako open source?

Je responzívne, je mobile-first, je flat

Bootstrap kopíruje tie najmodernejšie trendy vo webdesignu. Tie najdôležitejšie sú:

  • Responzivita - Bootstrap štýly sú dokonale prispôsobené pre mobilné zariadenia. Je teda 100% responzívne. A práve mobilné telefóny sú v dnešnej dobe na webe už častejšie zariadení, než klasické počítače. Určite nechcete, aby ste prišli o zákazníkov len preto, že niekto otvoril vaše stránky na mobilnom telefóne a písmo je tak malé, že ho nemôže prečítať.
  • Mobile-first - Framework bol vo verzii 3 kompletne prepísaný, aby podporoval mobile-first prístup. Jeho kód je tak kompaktnejší a podporuje dobré praktiky.
  • Flat design - Čo dnes nie je flat? Váš web bude vyzerať svieža a in. A keď sa trend zmení, môžete si byť istí, že Bootstrap na to zareaguje. A ak sa vám flat predsa len nepáči, môžete si stiahnuť akékoľvek iné zo schém, ktoré sú pre Bootstrap dostupná (pozri ďalej).
  • Grid - Obsahuje podobný dvanáctisloupcový grid systém, ktorý sme si uviedli minule.
  • Je zadarmo - Bootstrap je zadarmo aj pre komerčné účely.

Ako už teda vieme, bootstrap nám oproti Flexbox Grid systému ponúka naviac aj veľa štýlov, ktorými môžeme do rôznych formátov stylovať tlačidlá, tabuľky, formuláre, apod. Všetko môžeme nájsť v dokumentácii na oficiálnych stránkach Bootstrap.

Okrem oficiálnej dokumentácie existujú ešte 2 stránky, ktoré posunuli tvorbu v Bootstrap ešte na trochu vyššiu úroveň. Sú to startbootstrap­.com a mdbootstrap.com, ktoré nám môžu pomôcť začať s frameworkom a alebo výrazne uľahčiť prácu so šablónou.

Startbootstrap.com

Na tejto stránke nájdete hotové šablóny, ktoré sú kompletne napísané v Bootstrap, nie je preto potrebné tvoriť celý web od nuly, ale stačí len poupraviť tieto šablóny. Je dôležité podotknúť, že to sú už weby pripravené k publikácii. Nie je to teda iba kostra, kde by neboli ani reálne obrázky a informácie. Väčšina šablón je zadarmo, existujú ale tiež profesionálne šablóny, ktoré sa pohybujú okolo pár sto korún, takže nie je problém je pre nejaký projekt zakúpiť. Cena za ich vytvorenie na mieru by bola pravdepodobne niekoľkonásobne väčšia. Poďme sa pozrieť na niektoré ukážky:

Landing page zo startbootstrap.com - Responzívne webdesign

Šablóna pre landing page zo startbootstrap .<> Šablóna pre mobilné aplikácie zo startbootstrap.com - Responzívne webdesign

Šablóna pre mobilné aplikácie zo startbootstrap, stačí vymeniť obrázok na displeji .<> Responzívne kostra pre e-shopy zo startboostrap.com - Responzívne webdesign

Responzívne kostra pre e-shopy, ktorú sme použili aj v našich kurzoch e-shopov ( E-shop v ASP.NET, E-shop v PHP a E-shop v Nette)

Ukážme si ešte nejakú šablónu pre dashboardy (administračné sekcie webov). Táto zrovna nie je zo startbootstrap, ale je dostupná zadarmo na GitHub:

Dashboard schéma Gentella pre Bootstrap - Responzívne webdesign

Dashboard schéma Gentella pod licenciou MIT (zdarma).

Mdbootstrap.com

Určite ste sa už niekedy stretli s populárnym material dizajnom, ktorého guidelines vydal Google a tento vzhľad používa vo všetkých svojich produktoch. Vzhľad je flat, ale používa tiene, guľaté rohy, obdĺžniková a kruhová tlačidlá a napr. Checkboxy vo formulároch štýlom ako animované prepínače. Schéma material dizajnu pre Bootstrap nájdete na mdbootstrap.com. Môžete tak spojiť jednoduchosť Bootstrap s nádherným vzhľadom od Google. Samozrejme existujú ďalšie a ďalšie témy, stačí zagooglit, aj portov material dizajnu pre Boostrap je hneď niekoľko.

Niektoré formulárové prvky MDB pre Bootstrap - Responzívne webdesign

Niektoré formulárové prvky material dizajnu (.mdb) pre Bootstrap .<> Flipping cards z material design v Bootstrap - Responzívne webdesign

Tzv. flipping cards, po kliknutí sa karta plynulú animácií otočí a ukáže sa jej druhá strana. Prvá karta je vidieť zozadu, druhá spredu, tretí sa práve otáča.

Ukážka responzivity

Pre Bootstrap máme tu na sieti kompletnú sekciu článkov. Nás z neho ale zaujíma iba už spomínaný grid systém (na ktorý sa podrobnejšie pozrieme v ďalšej lekcii). S ostatnými vlastnosťami frameworku sa môžete zoznámiť práve vo vyššie spomínanej sekcii. Poďme si teraz ukázať malú ukážku toho, ako dokáže byť Bootstrap krásne responzívne. Presuňme sa spoločne na Examples na oficiálnom webe Bootstrap (Ak už nie je posledná verzia 4.5, ako to bolo v čase písania článku, tak si vpravo hore verziu zmeňte na najnovšie). Kliknite na akúkoľvek ukážku a ľubovoľne meňte veľkosť okna prehliadača. Teraz by už každému malo byť jasné, v čom spočíva sila Bootstrap a ako jednoduchá tvorba stránok (alebo len i šablón) práve s ním.

Bootstrap na veľkom displeji - Responzívne webdesign

Takto vyzerá šablóna na veľkom displeji počítača .<> Bootstrap na malom displeji - Responzívne webdesign

Takto vyzerá šablóna na malom displeji telefónu

Šablónu môžeme už len ľahko upraviť a využiť na vlastnom webe. Bootstrap nám všetko zjednodušil a ušetril drahocenný čas.

V ďalšej lekcii, Grid systém Bootstrap , sa pozrieme na grid systém od Bootstrap.


 

Predchádzajúci článok
Grid systém od Flexbox Grid
Všetky články v sekcii
Responzívne webdesign
Preskočiť článok
(neodporúčame)
Grid systém Bootstrap
Článok pre vás napísal Štěpán Zavadil
Avatar
Užívateľské hodnotenie:
Ešte nikto nehodnotil, buď prvý!
Autor se věnuje tvorbě webových aplikací v JavaScriptu
Aktivity