Bootstrap

Bootstrap

• framework pro tvoření webových stránek
• má předpřipravený design, komponenty a všechen kód
• stačí přidat knihovnu pomocí link

Framework

• je knihovna určena pro větší projekty
• určuje všechny důležité komponenty, jejich design a chování
• většinou definuje základy webových stránek
• koder na těchto základech staví

Proč frameworky

Výhody frameworků

• máme vše připraveno pod nosem
• můžeme věci pouze skládat
• není nutné rozumět funkcím za kódem

Nevýhody frameworků

• máme vše hotové a těžko se věci modifikují
• stránky vypadají stejně
• licenční problémy

Kde by byl problém se stejným designem stránek?

Historie Bootstrapu

• jeden z nejstarších frameworků vůbec (první verze 2011)
• stav tvorby webových stránek v dané době
• pomalé, bez rozložení, všemožné hacky
• hlavní důvod byl grid systém
• aktuální verze je v5, jinou se učit nebudeme

Proč se nebudeme učit jiné verze?

Život bez flexu a gridu

• ve dřívějších dobách neexistoval flex či grid
• nebylo podporováno všude a proto se muselo rozložení dělat jinak
• často to bylo procenty a pomocí floatů (float) a zobrazení (display)
• grid systém si vysvětlíme později

Práce s frameworky

• každý framework je jiný
• používáme dokumentaci, kde:
• se věci učíme
• najdeme ukázky
• najdeme informace o zprovoznění

Dokumentace Bootstrapu

https://getbootstrap.com

Důležité prvky Bootstrapu

• typografie
• kontejner
• barvy

Grid systém

• nyní využívá již flexbox
• řádky a sloupce
• každý řádek má 12 sloupců
• přesně definované velikosti
• automatické doplnění

Další prvky

• obrázky
• tabulky
• formuláře
• komponenty
• karty
• navigace
• tlačítka

System odsazení

Responzivita v Boostrapu

Responzivita v Boostrapu

• Bootstrap má připravených 6 různých breakpointů
• breakpoint = místo zlomu, kde nastává responzivita
• ty používáme s grid systémem a dalšími komponentami

Breakpointy

Responzivita kontejneru

• na kontejneru můžeme aplikovat různé zalomení
• zalomení určí kdy kontejner začne zabírat celou stránku
• např. container, container-xl

Responzivita grid systému

• jednotlivým sloupcům můžeme změnit velikost na zlomu
• např. col-2 col-xl-8, col-12 col-md-6 col-lg-4 col-xxl-3

Další frameworky

• https://bulma.io
• https://material.io/design
• https://tailwindcss.com
• https://get.foundation
• https://semantic-ui.com

Frameworky

Práce

Vyberte si jeden z výše uvedených frameworků (vyjma Materail Designu) a vytvořte pomocí dokumentace nějaký web. Zjistěte něco zajimavého o daném frameworku.