3I_WTL_2025/15_bootstrap_components

15 - Bootstrap Komponenty

🎯 Co se naučíte

V této lekci se naučíte používat základní Bootstrap komponenty pro vytváření interaktivních webů.

📚 Témata lekce

• Cards - kartičky pro obsah
• Buttons - tlačítka různých stylů
• Badges - odznaky pro zvýraznění
• Alerts - upozornění a zprávy
• Progress bars - indikátory průběhu
• Breadcrumbs - navigační drobečková navigace
• Pagination - stránkování
• List groups - stylované seznamy
• Forms - formulářové komponenty

📂 Soubory v projektu

• index.html - ukázky Bootstrap komponent
• css/bootstrap.css - Bootstrap CSS
• js/bootstrap.js - Bootstrap JS

💻 Ukázky komponent

Cards (Kartičky)

<div class="card" style="width: 18rem;">
    <img src="..." class="card-img-top" alt="...">
    <div class="card-body">
        <h5 class="card-title">Nadpis karty</h5>
        <p class="card-text">Text karty...</p>
        <a href="#" class="btn btn-primary">Tlačítko</a>
    </div>
</div>

Alerts

<div class="alert alert-primary" role="alert">
    Primární alert
</div>
<div class="alert alert-success" role="alert">
    Úspěšná operace!
</div>
<div class="alert alert-danger" role="alert">
    Chyba!
</div>

Badges

<h1>Nadpis <span class="badge bg-secondary">Nový</span></h1>
<button class="btn btn-primary">
    Notifikace <span class="badge bg-danger">4</span>
</button>

Progress Bar

<div class="progress">
    <div class="progress-bar" role="progressbar"
         style="width: 75%" aria-valuenow="75"
         aria-valuemin="0" aria-valuemax="100">75%</div>
</div>

<!-- Barevné -->
<div class="progress">
    <div class="progress-bar bg-success" style="width: 50%">50%</div>
</div>

🚀 Jak s lekcí pracovat

1. Otevřete index.html v prohlížeči
2. Prozkoumejte různé komponenty
3. Vyzkoušejte změnit barvy komponent (primary → success)
4. Experimentujte s kombinacemi komponent
5. Zkuste vytvořit vlastní kartu s obrázkem a tlačítkem
6. Prozkoumejte Bootstrap dokumentaci pro více variant

💡 Tip pro studenty

Card layout:

<!-- Grid s kartami -->
<div class="row">
    <div class="col-md-4">
        <div class="card">
            <div class="card-body">
                <h5 class="card-title">Karta 1</h5>
                <p class="card-text">Obsah...</p>
            </div>
        </div>
    </div>
    <div class="col-md-4">
        <div class="card">...</div>
    </div>
    <div class="col-md-4">
        <div class="card">...</div>
    </div>
</div>

Bootstrap barvy (color variants):

Většina komponent podporuje barevné varianty:

• primary = modrá (hlavní)
• secondary = šedá
• success = zelená (úspěch)
• danger = červená (chyba)
• warning = žlutá (varování)
• info = světle modrá (info)
• light = světlá
• dark = tmavá

List Groups:

<ul class="list-group">
    <li class="list-group-item">První položka</li>
    <li class="list-group-item active">Aktivní položka</li>
    <li class="list-group-item">Třetí položka</li>
</ul>

Breadcrumbs:

<nav aria-label="breadcrumb">
    <ol class="breadcrumb">
        <li class="breadcrumb-item"><a href="#">Home</a></li>
        <li class="breadcrumb-item"><a href="#">Produkty</a></li>
        <li class="breadcrumb-item active">Notebook</li>
    </ol>
</nav>

Pagination:

<nav>
    <ul class="pagination">
        <li class="page-item"><a class="page-link" href="#">Předchozí</a></li>
        <li class="page-item"><a class="page-link" href="#">1</a></li>
        <li class="page-item active"><a class="page-link" href="#">2</a></li>
        <li class="page-item"><a class="page-link" href="#">3</a></li>
        <li class="page-item"><a class="page-link" href="#">Další</a></li>
    </ul>
</nav>

🎨 Praktické využití

E-shop produkty = Cards Úspěšné odeslání formuláře = Alert success Počet položek v košíku = Badge Upload souboru = Progress bar Navigace kategoriemi = Breadcrumbs Seznam článků = Pagination

🔗 Související lekce

• Předchozí: 14_bootstrap_layout - Bootstrap layout
• Další:
  • 16_carousel - Bootstrap carousel (slider)
  • 17_modal - Bootstrap modal (okna)
• Dokumentace: Bootstrap Components