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)