3I_WTL_2025/13_boostrap_intro

13 - Úvod do Bootstrapu

🎯 Co se naučíte

V této lekci se seznámíte s Bootstrap frameworkem a jeho základními komponentami.

📚 Témata lekce

• Co je Bootstrap - CSS framework pro rychlý vývoj
• Připojení Bootstrapu k projektu (lokální soubory)
• Container - základní obal pro obsah (.container)
• Grid systém - 12sloupcová mřížka
  • .row - řádek
  • .col - sloupce (automatická šířka)
  • .col-6 - sloupec se šířkou 6/12
• Responzivní třídy - col-md-6, col-lg-3
• Typography - display-1, display-5
• Utility třídy:
  • Okraje: m-2, mx-2, p-2
  • Borders: border, border-danger, rounded
  • Další: <mark>, <code>, <kbd>

📂 Soubory v projektu

• index.html - HTML s Bootstrap třídami
• css/bootstrap.css - Bootstrap CSS (lokální)
• js/bootstrap.js - Bootstrap JavaScript (lokální)

💻 Ukázka z lekce

<!-- Container -->
<div class="container">
    <h1 class="display-1">Hello, Bootstrap!</h1>

    <!-- Grid systém -->
    <div class="row">
        <div class="col-md-6 col-lg-3">
            <div class="border border-primary rounded m-2 p-2">
                Obsah sloupce
            </div>
        </div>
        <div class="col-md-6 col-lg-3">
            Další sloupec
        </div>
    </div>
</div>

🚀 Jak s lekcí pracovat

1. Otevřete index.html v prohlížeči
2. Prozkoumejte Bootstrap třídy v HTML
3. Změňte velikost okna - sledujte responzivní chování
4. Vyzkoušejte Developer Tools (F12) - Device Toolbar
5. Experimentujte s různými utility třídami
6. Změňte col-md-6 na col-lg-4 a sledujte změny

💡 Tip pro studenty

Bootstrap Grid System:

• 12 sloupců celkem v každém řádku
• col-6 = 6/12 = 50% šířky
• col-4 = 4/12 = 33.33% šířky
• col = automatická šířka (rovnoměrně rozdělí prostor)

Responzivní breakpointy:

• xs (extra small) = < 576px (mobil) - není třeba psát, je výchozí
• sm (small) = ≥ 576px
• md (medium) = ≥ 768px (tablet)
• lg (large) = ≥ 992px (desktop)
• xl (extra large) = ≥ 1200px

Příklad responzivity:

<div class="col-12 col-md-6 col-lg-3">
    <!-- Mobil: 100% šířky (12/12) -->
    <!-- Tablet: 50% šířky (6/12) -->
    <!-- Desktop: 25% šířky (3/12) -->
</div>

Container vs Container-fluid:

• container = fixní šířka, centrovaný
• container-fluid = 100% šířky

Důležité:

• VŽDY používejte row pro řádky
• Sloupce (col) musí být uvnitř row
• Celkový součet sloupců by měl být 12 (nebo méně)

🎨 Utility třídy:

<!-- Okraje (margin) -->
m-2   = margin všude
mx-2  = margin vlevo a vpravo
my-3  = margin nahoře a dole
mt-4  = margin nahoře

<!-- Padding -->
p-2   = padding všude
px-3  = padding vlevo a vpravo

<!-- Borders -->
border              = přidá border
border-primary      = modrý border
border-3            = tlustší border
rounded             = zaoblené rohy

🔗 Související lekce

• Předchozí: 12_grid - CSS Grid (pochopení grid systému)
• Důležité přípravné projekty:
  • AI_extra_material/ai_01_grid_responsive - CSS Grid praxe
  • AI_extra_material/ai_04_prep_bootstrap - komplexní příprava
• Další: 14_bootstrap_layout - pokročilejší Bootstrap layouty
• Související: 15_bootstrap_components - Bootstrap komponenty