Návrh designu ve frameworku Bootstrap, grid systém, komponenty

Formát: 30 min praktická úloha, 15 min obhajoba + teorie. Tady je teorie dost komplexní (z ní zvládneš praktiku, i kdybys Bootstrap neviděl), plus konkrétní úloha s řešením a tipy.


Část 1: Teorie

Co je Bootstrap

Bootstrap je CSS framework s předpřipravenými třídami a JavaScriptovými komponentami. Místo psaní vlastního CSS přidáváš třídy přímo do HTML.

Vznik 2011, vyvinuto v Twitteru (Mark Otto, Jacob Thornton)
Aktuální verze 5.3.x (rok 2024 a později), čistý CSS bez jQuery
Princip Mobile-first, utility-driven, responzivní
Velikost CSS 200 KB, JS 80 KB (minifikováno + gzip)

Bootstrap vs alternativy

Framework Charakteristika
Bootstrap Komponentový, "vše hotové", typický look
Tailwind CSS Utility-first, žádné komponenty, větší flexibilita ale víc psaní
Material UI React komponenty podle Material Designu (Google)
Bulma Modernější CSS framework, lehčí než Bootstrap
Foundation Konkurent Bootstrapu, dnes spíš v ústraní

Plusy Bootstrapu:

Mínusy:


Instalace