Předvánoční slevová akce PHP týden
Pouze tento týden sleva až 80 % na PHP e-learning!
Využij předvánočních slev a získej od nás 20 % bodů zdarma! Více zde

Lekce 1 - Úvod do CSS frameworku Bootstrap

Unicorn College Tento obsah je dostupný zdarma v rámci projektu IT lidem.
Vydávání, hosting a aktualizace umožňují jeho sponzoři.

Vítám všechny webdesignery, ať již ty zkušené, kteří znají nazpaměť pomalu všechny CSS vlastnosti, tak i ty nezkušené, kteří s webdesignem teprve začínají. V tomto on-line kurzu se naučíme používat CSS framework Bootstrap, který se masově rozšířil jak mezi ty, kteří webdesign milují, tak i mezi ty, kteří jej dvakrát nemusí. V obou případech totiž dosáhnete perfektních výsledků s minimálním snažením a získáte čas věnovat se důležitějším částem webu, než. je např. stylování tabulky. Ale vezměme to vše od začátku.

Co je to framework?

V minulosti docházelo k poměrně bouřlivému zdokonalování jazyků, jak těch programovacích, tak těch značkovacích (HTML) a případně dalších, např. stylovacího jazyka CSS. Jak čas běžel, jazyky začaly být v určitém ohledu již "hotové" a nyní umožňují vytvořit ty části aplikací, pro které jsou určené, velmi rychle a efektivně. I se sebedokonalejšími nástroji ovšem musíme stále pracovat, např. v CSS musíme pro každý náš projekt znovu a znovu definovat úplně základní styly, tedy že tabulka má mít rámeček nebo že tlačítko má být barevný obdélník. Elementy v prvních verzích jazyka HTML totiž nijak nastylované nebyly a kvůli zpětné kompatibilitě se to nesmí již nikdy změnit. Když již definujete ten samý rámeček pro tabulku v desátém projektu, nutně vás napadne vytvořit si nějakou knihovnu, kam si ty nejpoužívanější styly uložíte. Knihovnu budete kopírovat do svých projektů a rázem zde budou styly dostupné bez nutnosti ztrácet čas jejich definováním znovu a znovu. Webdesign je přeci o nápadu a ne o opisování rámečku tabulky nebo definování, že sleva má být zeleně. To je plýtvání vaším časem. A že by každý web měl mít unikátní design? To sice ano, ale v naprosté většině případů stačí jen drobně upravit ten základní, tabulky budou mít na většině webů rámečky, tlačítka budou většinou obdélníková a pod. Když je vaše knihovna dostatečně velká, tak velká, že poskytuje styly pro naprostou většinu částí současných webových stránek, říkáme ji framework. Framework je tedy ucelená knihovna nebo sada knihoven, která dává dohromady hotové řešení. A takovou CSS knihovnu vytvořili v roce 2011 ve firmě Twitter, dnes je známá jako framework Bootstrap a je nejpopulárnějším CSS frameworkem na světě.

Twitter Bootstrap

Bootstrap logo

Zaměstnance Twitteru trápila nekonzistence různých aplikací ve firmě, jejich vzhled byl odlišný a byla nutná znalost konkrétního stylu k jejich úpravě. Proto začali pracovat na univerzálním CSS frameworku, který firma nakonec uvolnila jako open-source. To znamená, že jej můžete volně používat i ke komerčním účelům a nemusíte to ani nikde uvádět. Bootstrap určitě není něco, za co byste se měli stydět, naopak se stal značkou, která zaručuje moderní a dobře fungující kabát pro web, kde je použitý. To nejlepší je ale obrovské množství volně dostupných šablon, které jsou nápadité, vzhledově velmi rozmanité a po menší úpravě poslouží jako fungující základ pro vaši práci. Začít používat CSS framework je pro vývojáře podobný posun jako třeba začít používat CSS a nepsat styly přímo do HTML, jako se to dělalo v roce 1995. Framework si samozřejmě můžete vytvořit i svůj vlastní, nicméně v tomto kurzu se budeme věnovat právě již existujícímu Bootstrapu. Budete pracovat rychleji a levněji. Co více si přát?

Je responzivní, je mobile-first, je flat

Bootstrap kopíruje ty nejmodernější trendy ve webdesignu. Ty nejdůležitější jsou:

  • Responzivita - Bootstrap styly jsou dokonale přizpůsobené pro mobilní zařízení. Je tedy 100% responzivní. A právě mobilní telefony jsou v dnešní době na webu již častější zařízení, než klasické počítače. Určitě nechcete, abyste přišli o zákazníky jen proto, že někdo otevřel vaše stránky na mobilním telefonu a písmo je tak malé, že jej nemůže přečíst.
  • Mobile-first - Framework byl ve verzi 3 kompletně přepsán, aby podporoval mobile-first přístup. Jeho kód je tak kompaktnější a podporuje dobré praktiky.
  • Flat design - Co dnes není flat? Váš web bude vypadat svěží a in. A když se trend změní, můžete si být jistí, že Bootstrap na to zareaguje. A pokud se vám flat přeci jen nelíbí, můžete si stáhnout jakékoli jiné ze schémat, která jsou pro Bootstrap dostupná (viz dále).
  • Grid - Obsahuje dvanáctisloupcový grid systém. Pokud již znáte výhody grid systému, víte, že ve většině případů úplně nahradí pozicování elementů na stránce, které je potom navíc pravidelné a responzivní. Případně se o gridu dozvíte dále v tomto kurzu.
  • Je zdarma - Bootstrap je zadarmo i pro komerční účely.

Startbootstrap.com

Tento výukový obsah pomáhají rozvíjet následující firmy, které dost možná hledají právě tebe!

Přímo Bootstrap sice nabízí nějaké základní šablony, o level lepší ovšem naleznete např. na webu https://startbootstrap.com/, kde máte k dispozici nádherné hotové šablony. Tedy ne pouhé kostry, ale opravdu hotové weby s moderním designem, které stačí jen upravit. Všechny jsou samozřejmě responzivní, mobile-first a zadarmo. Nejčastěji jsou pod Apache licencí, kdy není ani třeba uvést autora. Osobně jej však zmiňuji do patičky, přijde mi to fér :) Najít se dají samozřejmě i placené šablony a to obvykle vysoce profesionální a jen za několik set Kč. To je oproti tvorbě šablony na zakázku jen zlomek ceny.

Landing page ze startbootstrap.com

Šablona pro landing page ze startbootstrap

Šablona pro mobilní aplikace ze startbootstrap.com

Šablona pro mobilní aplikace ze startbootstrap, stačí vyměnit obrázek na displeji

Responzivní kostra pro e-shopy ze startboostrap.com

Responzivní kostra pro e-shopy, kterou jsme použili i v našich kurzech e-shopů (E-shop v ASP.NET, E-shop v PHP a E-shop v Nette)

Ukažme si ještě nějakou šablonu pro dashboardy (administrační sekce webů). Tato zrovna není ze startbootstrap, ale je dostupná zadarmo na githubu:

Dashboard schéma Gentella pro Bootstrap

Dashboard schéma Gentella pod licencí MIT (zdarma).

Material design

Určitě jste se již někdy setkali s populárním material designem, jehož guidelines vydal Google a tento vzhled používá ve všech svých produktech. Vzhled je flat, ale používá stíny, kulaté rohy, obdélníková a kruhová tlačítka a např. checkboxy ve formulářích styluje jako animované přepínače. Schéma material designu pro Bootstrap naleznete na https://mdbootstrap.com. Můžete tak spojit jednoduchost Bootstrapu s nádherným vzhledem od Google. Samozřejmě existují další a další schémata, stačí zagooglit, i portů material designu pro Boostrap je hned několik.

Některé formulářové prvky MDB pro Bootstrap

Některé formulářové prvky material designu (MDB) pro Bootstrap

Flipping cards z material design v Bootstrapu

Tzv. flipping cards, po kliknutí se karta plynulou animací otočí a ukáže se její druhá strana. První karta je vidět zezadu, druhá zepředu, třetí se právě otáčí.

Hello world

Co by to bylo za úvodní díl, kdybychom si Bootstrap nevyzkoušeli? Asi nejdůležitější základnou pro vás bude oficiální web http://getbootstrap.com/. Určitě vás nepřekvapí, že web sám je vytvořený v Bootstrapu :)

Layouty

Vytvořit rozložení stránky (layout) je poměrně složité. To není přímo chyba Bootstrapu, ale obecný fakt. Je zde potřeba definovat spoustu věcí včetně responzivního menu, formuláře pro vyhledávání, patičky a podobně. To vše na běžné stránce náš uživatel nebo zákazník očekává. A Bootstrap je o CSS stylech, HTML kostru bychom si museli stále sami napsat. I to ovšem Bootstrap elegantně vyřešil a nabídl hned několik nejčastěji používaných layoutů jako kostry webů s přichystaným Bootstrapem ke stažení. Na webu přejděte na záložku Examples a vyberte si nějaké rozložení, které se vám líbí. Já si zvolím Jumbotron, ve kterém upravím texty a obsah. Můžete si také zvolit nějakou hotovou šablonu rovnou z startbootstrap­.com. Jak přidávat další obsah si ukážeme během kurzu. Web getboostrap bohužel z nějakého důvodu neumožňuje stažení těchto ukázek a musí se stáhnout celý balík (odkaz na stránce Examples nahoře), kde jsou jednotlivé ukázky poté ve složce docs/[vaše_verze]/examples, ta má je ve složce "jumbotron".

Bootstrap Jumbotron šablona v původní velikosti

Můžete si vyzkoušet, že web je opravdu responzivní zmenšením okna prohlížeče:

Bootstrap Jumbotron šablona ve velikosti pro mobilní zařízení

Později je vhodné upravit odkazy na zdroje v šabloně tak, aby byly v té samé složce jako je šablona a nevyžadovaly další nadřazené složky, které jsou nad složkou examples.

Bootstrap lze používat kromě stažením šablony s ním také nalinkováním jeho kódu z CDN úložiště. Osobně mi však přijde mnohem lepší vycházet již z předpřipravené šablony a mít zároveň všechny soubory uložené u sebe. V minulosti se již několikrát stalo, že CDN velkých společností byla přetížená nebo dokonce na několik hodin vypadla. A to pro vás znamená zbytečnou ztrátu zákazníků.

Myslím, že jsme si udělali velmi dobrou představu o tom co Bootstrap umí a proč je dobrý nápad CSS frameworky využívat. V příloze naleznete mnou upravenou šablonu Jumbotron, ale stáhněte si raději aktuální Bootstrap přímo z webu. V příští lekci, Bootstrap - Reboot, se budeme věnovat základním stylům Bootstrapu a ukážeme si jak je používat.


 

Stáhnout

Staženo 324x (2.85 MB)
Aplikace je včetně zdrojových kódů v jazyce HTML a CSS

 

 

Článek pro vás napsal David Čápka
Avatar
Jak se ti líbí článek?
37 hlasů
Autor pracuje jako softwarový architekt a pedagog na projektu ITnetwork.cz (a jeho zahraničních verzích). Velmi si váží svobody podnikání v naší zemi a věří, že když se člověk neštítí práce, tak dokáže úplně cokoli.
Unicorn College Autor sítě se informační technologie naučil na Unicorn College - prestižní soukromé vysoké škole IT a ekonomie.
Všechny články v sekci
Kompletní kurz CSS frameworku Bootstrap
Miniatura
Následující článek
Bootstrap - Reboot
Aktivity (4)

 

 

Komentáře

Avatar
Martin
Člen
Avatar
Martin:30.10.2017 18:01

Ahoj, bude nejake pokracovani prosim prosim :)

 
Odpovědět
30.10.2017 18:01
Avatar
Nocik
Člen
Avatar
Odpovídá na Martin
Nocik:30.10.2017 20:10

Přečti si poslední větu této lekce a odpověď ihned dostaneš, jen dodám, že všechno chce čas, tohle určitě není jediný rozpracovaný seriál ;)

Odpovědět
30.10.2017 20:10
Vítězství je stav mysli.
Avatar
Martin
Člen
Avatar
Odpovídá na Nocik
Martin:1.11.2017 15:46

ja jsem si ji precetl, jen jsem nenasel nikde kdy byl clanek pridan, takze jsem proste napsal ;)

 
Odpovědět
1.11.2017 15:46
Avatar
Nocik
Člen
Avatar
Odpovídá na Martin
Nocik:1.11.2017 16:55

Tak to potom jasan. To by zde někde mohlo být zveřejněno, kdy byl článek přidán. Každopádně to zde bylo přidáno cca před týdnem, možná ani to ne.. nemám nějak pojem o čase takže přesně ti to neřeknu :D ale moc dlouho tu to není :)

Odpovědět
1.11.2017 16:55
Vítězství je stav mysli.
Avatar
Martin
Člen
Avatar
Martin:1.11.2017 17:03

No to jsem si myslel taky, protoze kdyz jsem tu brouzdal tak pred mesicem, tak tam tohle vubec nebylo. Tak ja cekam, a nemuzu se dockat.

 
Odpovědět
1.11.2017 17:03
Avatar
Vochechule Vochechulová:6.1.2018 10:54

Ahoj,možná hloupá otázka...Jak šablonu Jumbotron dostat a otevřít ve Visual Studiu?

 
Odpovědět
6.1.2018 10:54
Avatar
Petr Zajac
Člen
Avatar
Petr Zajac:25.2.2018 19:34

Zdravím
Možná hloupá otázka. Jaký je rozdíl mezi Bootstrap a CMS (redakčním sysémem jako např. Wordpress)?
Díky

 
Odpovědět
25.2.2018 19:34
Avatar
Jurajs
Člen
Avatar
Odpovídá na Petr Zajac
Jurajs:25.2.2018 20:45

Stačí si to vygooglit :D ....máš pravdu - STUPID question!!

 
Odpovědět
25.2.2018 20:45
Tento výukový obsah pomáhají rozvíjet následující firmy, které dost možná hledají právě tebe!
Avatar
Petr Zajac
Člen
Avatar
Odpovídá na Jurajs
Petr Zajac:25.2.2018 22:20

Než jsem se zeptal Tady tak jsem světe div se googlil. Dozvěděl jsem se že Bootstrap je framework. A také jsem se v jedné anglické diskusi dozvěděl že "it's like comparing cream cakes with motorcycles." Takže podobně NIC neříkající odpověď jako od Tebe :-(
Vím že v CMS se obsah vygeneruje z databáze podle vzoru který je dán v PHP šabloně (že si obsah může upravovat sám uživatel) Zjistil jsem že i Bootstrap má jakési šablony, ale jestli do těhle šablon (HTML + CSS) zadám obsah "natvrdo" jako kodér web stránek, nebo si to může udělat (díky backendu) i sám uživatel se mi nepodařilo zjistit během cca hodiny a půl co jsem se tím prokousával ...

 
Odpovědět
25.2.2018 22:20
Avatar
Petr Zabransky:26.10.2018 15:50

Bootstrap mi přijde jako skvěly nástroj. Jednoduché nakodovani funkčního responzivniho webu a hlavně jednoduchá sprava a jednotnost na všech webech. V tom je obrovská sila. Jen jedna vada na kráse je, že musím načítat cely bootstrap 160kB. Může se bootstrap natvrdo promazat, co se nepoužívá ? Nebo řeší tohle SASS ? Kombinuje se bootstrap s preprocesory nebo bud jedno nebo druhé. Chci začít delat profesionalne stranky, umim slušně Html i css, ucim se prave bootstrap a zvazuji zacit s preprocesory. Potreboval bych nějak nasměrovat. Delat si svou knihovnu mi prijde nevhodné. Chci jit spis cestou nejakych standardu. Lip se pak orientuje a otvira se vic moznosti pro pripadne zamestnani kdyby podnikani neklaplo. Mockrat dekuji za radu.

 
Odpovědět
26.10.2018 15:50
Avatar
Odpovídá na Vochechule Vochechulová
Jan Jurníček:6.11.2018 14:32

Bootstrap včetně šablony Jumbotron ve Visual Studiu už je. Ve Visual Studiu 2017 stačí vytvořit nový projekt a ve formuláři Nový projekt si vybrat v kategorii Web šablonu Webová aplikace ASP.NET (Net Framework). Je vytvořen nový projekt, přilinkovány styly a javascript pro Bootstrap a přímo na výchozí stránce Default.aspx máš hned v prvním bloku div použitu šablonu Jumbotron. Tedy tak to je ve Visual Studiu 2017 Community.

 
Odpovědět
6.11.2018 14:32
Avatar
Odpovídá na Vochechule Vochechulová
Jan Jurníček:7.11.2018 18:37

Hmm ... Ale dodám, že po poslední aktualizaci mám ve Visual Studiu 2017 Community Bootstrap v3.3.7. Čili spousta věcí z tohoto kurzu v této starší verzi nebude pravda (například se v něm nepoužívají jednotky rem) a když jsem se jej pokusil nahradit nejnovější verzí Bootstrapu, tak některé věci z výchozího patternu aplikace přestaly fungovat (například navbar zmizel).

 
Odpovědět
7.11.2018 18:37
Avatar
Ivan Novák
Člen
Avatar
Ivan Novák:21.11.2018 22:01

Ahojte, chcem sa spýtať čo si myslíte o CSS GRID? Myslíte si, že nahradí bootstrap?

 
Odpovědět
21.11.2018 22:01
Avatar
Odpovídá na Petr Zajac
Niesomtu Hraskova:4. února 13:05

cms napriklad wordpress je redakcny system..predstav si to takto: na to aby mohol clovek ktory nevie programovat mat nejaky eshop ci webovu stranku kde publikuje recepty atd. potrebuje nejake ui rozhranie ktore bude prenho natolko zrozumitelne ze dokaze sam vkladat na web produkty, formulare,foto­galeriu, tlacitka ci text ktory moze stlacenim obycajneho tlacitka s oznacenim "b" graficky zmenit na tucny bold text a podobne...je to jednoducho take rozhranie pre ludi ktori chcu vediet upravovat dizajn aleboposielat ci vkladat data menit funkcionalitu bez toho aby sa museli ucit programovacie jazyky v kt. to je pisane.. a bootstrap to je v podstate nieco ako pomocne kolieska na biku, miesto toho aby si stale padal a preto dosiel do ciela za 3hodiny si namontujes kolieska a si tam za hodinu...neviem ci pochopis prirovnanie ale je to v podstate ako ked si dlhorocny webdizajner pri kazdom projekte kde dizajnuje pomocou css ulozi"super dizajnove vychytavky" napriklad pekne gulate tlacitko ktore je cervene ma biely text ked nanho prejdesmysou tak sa mu zmeni pozadie na biele a prida sa mu cerveny okraj a text sa tiez zmeni na cerveny zmeni na cerveny. ked toto tlacitko pises pomocou css musis napisat cca tolko textu kolko som teraz pouzila na opisanie jeho vyzoru:)) ked taketo tlacitko pouzivas potom vo vela projektoch kedze si dobry dizajner a mas vela roboty ... tak sa ti predsa nechce zakazdym pisat tolko kodu aby to tlacitko bolo cervene atd.. preto vezmes cely tento kod ktory ti to tlacitko zobrazuje cervene atd.. a jednoducho mu definujes nejaku premennu ktora ho bude reprezentovat ta premenna sa napr bude volat btn-danger a potom vzdy ked napises v html kode triedu btn-danger tak budes mat to cervene tlacitko lenze miesto toho aby si pokazdy musel zapisovat strasne dlhy css kod tak ti staci elegantne napisat iba btn-danger... to je bootstrap bootstrap ma taketo skratky ako btn-danger .. hmm snad si pochopil :)) ak nie tak nic..

Editováno 4. února 13:07
Odpovědět
4. února 13:05
Víte, jaké adresy jsou nejvíce zadávány v prohlížeči MS Internet Explorer? https://www.mozilla.com/firefox/ https://w...
Avatar
Jakub Podskalský:9. července 0:10

Z hlediska rychlosti je lepší nalinkovat CDN než stažený soubor. Protože CDN zajistí to, že se ten boostrap nemusí znovu stahovat, protože už je z velké pravděpodobnosti stažena jeho cache, když na Bootstrapu běží nemálo webů. Zato nalinkovaný soubor se pokaždé začne stahovat. Jak bylo zmíněno, problém může právě nastat při výpadku CDN. Takže to má své pro a proti.
Nicméně mám pocit, že jsem už jednou viděl použití obojí, respektive nastavení fallbacku na stažení souborů. To je ideální. :)

 
Odpovědět
9. července 0:10
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 15 zpráv z 15.