3I_WTL_2025/14_bootstrap_layout

14 - Bootstrap Layout

🎯 Co se naučíte

V této lekci se naučíte vytvářet kompletní layout stránky s pomocí Bootstrapu.

📚 Témata lekce

• Header s navigací - nav, nav-pills, nav-item
• Flexbox utility třídy - d-flex, justify-content-center, align-items-center
• Main content - hlavní obsah stránky
• Jumbotron - velká úvodní sekce (hero section)
• Tabulky - table, table-hover, table-dark, table-info
• Footer - patička stránky s mt-auto
• Sticky footer - přilepený footer (flexbox pattern)
• Buttons - btn, btn-primary

📂 Soubory v projektu

• index.html - kompletní layout s header, main, footer
• css/bootstrap.css - Bootstrap CSS
• js/bootstrap.js - Bootstrap JS

💻 Ukázka z lekce

<body class="d-flex flex-column min-vh-100">
    <!-- Header -->
    <header class="d-flex flex-wrap justify-content-center py-3 border-bottom">
        <a href="#" class="me-auto fs-4">Název Stránky</a>
        <ul class="nav nav-pills">
            <li class="nav-item">
                <a href="#" class="nav-link active">Home</a>
            </li>
            <li class="nav-item">
                <a href="#" class="nav-link">About</a>
            </li>
        </ul>
    </header>

    <!-- Main -->
    <main class="container">
        <!-- Jumbotron -->
        <div class="p-5 bg-secondary text-white rounded">
            <h1 class="display-3">Hello world!</h1>
            <p>Lorem ipsum...</p>
            <a href="#" class="btn btn-primary">Více info</a>
        </div>

        <!-- Tabulka -->
        <table class="table table-hover">
            <tr class="table-dark">
                <td>Jméno</td>
                <td>Email</td>
            </tr>
            <tr class="table-info">
                <td>Jan</td>
                <td>jan@email.cz</td>
            </tr>
        </table>
    </main>

    <!-- Footer -->
    <footer class="footer mt-auto">
        <div class="nav justify-content-center py-2">
            <span>© 2025</span>
        </div>
    </footer>
</body>

🚀 Jak s lekcí pracovat

1. Otevřete index.html v prohlížeči
2. Prozkoumejte strukturu: header → main → footer
3. Změňte velikost okna - sledujte responzivní navigaci
4. Vyzkoušejte hover efekt na tabulce
5. Experimentujte s barevnými třídami tabulek
6. Zkuste přidat další navigační položky

💡 Tip pro studenty

Sticky Footer pattern:

<body class="d-flex flex-column min-vh-100">
    <header>...</header>
    <main class="container">...</main>
    <footer class="footer mt-auto">...</footer>
</body>

• d-flex flex-column = flexbox ve vertikálním směru
• min-vh-100 = minimální výška 100% viewportu
• mt-auto = margin-top: auto (footer se přilepí dolů)

Flexbox utility třídy:

<!-- Display -->
d-flex          = display: flex
d-inline-flex   = display: inline-flex

<!-- Direction -->
flex-row        = řádkový (výchozí)
flex-column     = sloupcový

<!-- Justify content (horizontální zarovnání) -->
justify-content-start     = vlevo
justify-content-center    = na střed
justify-content-end       = vpravo
justify-content-between   = mezi

<!-- Align items (vertikální zarovnání) -->
align-items-start    = nahoře
align-items-center   = na střed
align-items-end      = dole

Navigace:

<ul class="nav nav-pills">
    <li class="nav-item">
        <a href="#" class="nav-link active">Aktivní odkaz</a>
    </li>
    <li class="nav-item">
        <a href="#" class="nav-link disabled">Neaktivní odkaz</a>
    </li>
</ul>

Tabulky:

<!-- Základní tabulka -->
<table class="table">...</table>

<!-- S hover efektem -->
<table class="table table-hover">...</table>

<!-- Barevné řádky -->
<tr class="table-primary">...</tr>   <!-- modrá -->
<tr class="table-success">...</tr>   <!-- zelená -->
<tr class="table-danger">...</tr>    <!-- červená -->
<tr class="table-warning">...</tr>   <!-- žlutá -->
<tr class="table-info">...</tr>      <!-- světle modrá -->
<tr class="table-dark">...</tr>      <!-- tmavá -->

Buttons:

<button class="btn btn-primary">Primary</button>
<button class="btn btn-secondary">Secondary</button>
<button class="btn btn-success">Success</button>
<button class="btn btn-danger">Danger</button>
<button class="btn btn-warning">Warning</button>
<button class="btn btn-outline-primary">Outline</button>

🔗 Související lekce

• Předchozí: 13_bootstrap_intro - úvod do Bootstrapu
• Další: 15_bootstrap_components - Bootstrap komponenty
• Související:
  • 10_flex - Flexbox (pochopení flexbox utility tříd)
  • AI/ai_02_semantic_portfolio - sémantická struktura stránky