Bootstrap a návrh designu

📖

Teorie

Bootstrap je CSS/JS framework, který poskytuje grid systém (12 sloupců), komponenty (navbar, cards, modal) a utility třídy. Použití gridu: container → row → col-{breakpoint}-{size}. Designové zásady zahrnují konzistenci, kontrast, typografii a responzivitu.

🎯

Tahák

1Grid: container/row/col
2Breakpointy: sm/md/lg/xl
3Utility třídy pro margin/padding

❓

Typické otázky u maturity

1Jak funguje 12-sloupcový grid?
2Kdy nepoužít Bootstrap?

🏷️

Klíčová slova

gridcontainerrowcolbreakpoint

⚡

Praktická část

Zadání:

Sestav responzivní kartu produktu pomocí Bootstrapu s obrázkem, názvem, popisem a tlačítkem.

Kroky:

1Použij card komponentu
2Nastav col-sm-6 col-md-4 pro responsivitu
3Přidej CTA tlačítko

Kód:

product-card.html

<!-- snippet using Bootstrap classes -->
<div class="col-sm-6 col-md-4">
  <div class="card">
    <img src="..." class="card-img-top" alt="Produkt">
    <div class="card-body">
      <h5 class="card-title">Název</h5>
      <p class="card-text">Krátký popis</p>
      <a href="#" class="btn btn-primary">Koupit</a>
    </div>
  </div>
</div>