Bootstrap
Note k videu
Petr Voborník - Bootstrap aneb je to sice rychlejší, ale zato lepší výsledek
0:00:00 - Připojení Bootstrapu
0:01:58 - Instalace vhodných rozšíření do Visual Studia Code
0:05:21 - Horizontální řešení layoutu stránky
0:13:46 - Skrytí/zobrazení/výměna prvků na základě šířky okna
0:16:40 - One-page stránka - ukázka plánovaného výsledku
0:18:32 - Základní HTML dokument
0:19:10 - Navigace (menu)
0:22:37 - Bootstrap ikony
0:25:18 - Navigace - dokončení
0:31:26 - Tmavý panel s výzvou
0:36:49 - Formulář pro přihlášení k newsletteru s odezvou
0:42:43 - Obrázek vpravo
0:44:58 - Podporované systémy - 3/2/1 položek vedle sebe
0:51:01 - Carousel - prezentace obrázků
0:57:49 - Karty s tarify
1:06:11 - Modální dialog
1:08:04 - FAQ - Otázky a rozevírací odpovědi
1:11:57 - Zápatí stránky (footer)
1:12:50 - Rekapitulace
1:17:13 - Konec
Instalace vhodných rozšíření do Visual Studia Code
Bootstrap 5 Quick Snippets - generování dle šablon (napiš bs5)
Lorem ipsum generator - Napiš lorem
Lorem picsum - obrázky (napiš picsum)
emmet (www.emet.io) vix div.container>p*5>a
Horizontální řešení layoutu stránky
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
container + nic, sm, md, lg, xl, xxl, fluid => 540, 720, 960, 1140, 1320
taky můžeš pozicovat 3axis (zindex). poradi je zindex-dropdown, sticky, fixed, modal-backdrop, modal, popover, tooltip (1000,1020,1030,...1070)