skrabanek
/
3I_WTL_2025
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Malý repozitář pro WTL 3.I 2025/2026
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
29 Commits
1 Branch
0 Tags
4.8 MiB
 
 
 
Branch: master
Branches Tags
${ item.name }
Create tag ${ searchTerm }
Create branch ${ searchTerm }
from 'master'
${ noResults }
3I_WTL_2025/14_bootstrap_layout/README.md

4.7 KiB
Raw Permalink Blame History

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_extra_material/ai_02_semantic_portfolio - sémantická struktura stránky