Skripta OVI

Bootstrap

Bootstrap je nejpopulárnější open-source front-end framework pro rychlý vývoj responzivních webových stránek zaměřených na mobilní zařízení. Obsahuje připravené šablony návrhů založené na HTML, CSS a JavaScriptu pro typografii, formuláře, tlačítka, navigace a další komponenty.

web: https://getbootstrap.com/docs/5.0/

front-end – část webových stránek, kterou vidí návštěvník

back-end – administrátorská část webových stránek

Instalace

Bootstrap připojíme v headu stránky skriptem: 

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

Responzivita

Bootstrap je navržen tak, aby kód nejprve správně fungoval na malých obrazovkách a pomocí CSS pravidla @media se postupně rozšiřoval a upravoval pro větší displeje (tablety, notebooky, monitory).

K určení toho, kdy se má vzhled stránky změnit, používá Bootstrap tzv. Breakpoints (body zlomu) navázané na minimální šířku obrazovky:

BreakpointZkratkaŠířka obrazovky
Extra smallžádná< 576px
Smallsm≥ 576px
Mediummd≥ 768px
Largelg≥ 992px
Extra largexl≥ 1200px
Extra extra largexxl≥ 1400px

Grid systém

Bootstrap využívá 12sloupcový mřížkový systém postavený na CSS flexboxu

viz https://www.w3schools.com/css/css_grid_12column.asp

Prvky v tomto systému se skládají ze tří typů prvků:

  • container – obaluje celou oblast mřížky
  • row – řádek
  • col-* – sloupce. Místo * se napíše číslo, kolik z 12 sloupců má prvek zabírat.

Příklad:

V následujícím příkladu se na mobilu zobrazí dva boxy pod sebou (každý zabere plnou šířku, tedy 12 sloupců). Od středně velkých displejů (md a větších) se seřadí vedle sebe, protože každý zabere přesně polovinu šířky (6 z 12 sloupců).

<div class="container">
  <div class="row">
    <div class="col-12 col-md-6">Sloupec A</div>
    <div class="col-12 col-md-6">Sloupec B</div>
  </div>
</div>

Pomocné třídy

Bootstrap nabízí pomocné třídy pro rychlé sestavování prvků přímo v html bez nutnosti psaní celého vlastního CSS

Odsazení (Margin a Padding): Používá formát {vlastnost}{strana}-{velikost}.

  • mt-3 → Margin-Top velikosti 3.
  • px-2 → Padding-Left a Padding-Right velikosti 2.

Barvy: Bootstrap definuje slovní názvy barev.

  • bg-primary (hlavní barva pozadí)

Flexbox: d-flex (aktivuje flexbox), justify-content-center (vycentruje obsah horizontálně).

Komponenty

Boostrap obsahuje už hotové předpřipravené komponenty, které stačí zkopírovat do kódu.

Např.

  • modální vyskakovací okna
  • carousel
  • rozbalovací menu

admin