Bootstrap 1

35. hodina WBA


Matěj Cajthaml — SSPŠ

©

Opakování

Jak vložíme obrázek na stránku?
Co to znamená kaskáda? Jak se projevuje v CSS?
K čemu slouží vlastnost list-style-image?
Jaký způsob předávání dat ve formulářích je bezpečnější?
Jaké znáte CSS jednotky?

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í

Je náš reset.css framework?

Co knihovna FontAwesome?

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?

Na co se tedy Bootstrap použivá?

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

Bootstrap není stavěn na to, aby vyhovoval každé stránce.

Je určen, aby pokryl co největší počet možných věcí, co by stránka mohla potřebovat.

Bootstrap a ani jiný framework není v závěrečné práci povolen.

Proč?

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

Odkaz na Bootstrap je na portálu a nebo na stránce Bootstrapu.

Zkusíme si pomocí dokumentace stránku udělat!

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í

Ynivolserp

Práce

https://ssps.cajthaml.eu/2-wba/work/38-ynivolserp

Děkuji za pozornost!

  • matej.cajthaml@ssps.cz
  • https://ssps.cajthaml.eu/