Twitter Bootstrap

Twitter Bootstrap patrí medzi najpopulárnejšie frontendové frameworky umožňujúci vytvárať responzívne (optimalizované pre mobilné a tabletové zariadenia) webové stránky.

Je na ňom postavených viac ako polovica webstránok, ktoré denne používaš, podporuje mnoho preddefinovaných HTML komponentov (pod komponentom si predstav napríklad modálne okno), je ľahko pochopiteľný a umožní nám vytvoriť webovú stránku pomerne rýchlo a jednoducho.

Ďalšou výhodou je možnosť výberu jednej z mnohých voľne dostupných alebo platených šablón, ktoré vytvoria základnú alebo aj celú štruktúru webovej stránky za nás.

Ak ti aktuálne rozloženie Bootstrapovej stránky nevyhovuje, je možné si ho ľahko upraviť podľa potrieb konkrétneho webu.

Potrebujeme ešte webdizajnérov?

Často kladená otázka na forách venujúcich sa HTML a webovému dizajnu. Je pravda, že v súčasnosti väčšina webstránok vyzerá podobne, ak nie aj rovnako.

Every website looks the same, and that’s ok.

Zdroj: http://www.webdesignerdepot.com/2015/10/every-website-looks-the-same-and-thats-ok/

Ak však chceš byť originálny/a a prísť s vlastnými nápadmi, grafici dokážu z bežných Bootstrap elementov vyskladať a navrhnúť častokrát unikátne a moderne vyzerajúce webstránky.

Twitter Bootstrap grid systém

Grid systém predstavuje rozdelenie webstránky do 12 stĺpcov, v ktorých bude umiestnený obsah. Na web sa môžeme pozerať ako na obyčajnú tabuľku tvorenú riadkami a stĺpcami, ktoré obsahujú náš konkrétny obsah (napríklad slider, formulár a podobne). Jednou z najväčších výhod Bootstrapu je možnosť využiť preddefinovaný grid systém plne podporujúci responzívnosť web stránok a mobile-first princíp tvorby webov.

Ako grid systém funguje v praxi

Obsah webstránky chceme zobraziť buď zarovnaný v jednom bloku (ako keď pracuješ vo worde) alebo chceme využiť plný priestor od jedného okraju webového prehliadaču po druhý.

Zobrazenie obsahu zarovnaného do bloku

Obsah webstránky zarovnaný do bloku sa definuje prostredníctvom triedy .container.

<div class="container"></div>

Zobrazenie obsahu na celú šírku webového prehliadača

Obsah webstránky zarovnaný na celú šírku sa definuje prostredníctvom triedy .container-fluid.

<div class="container-fluid"></div>

Riadok - .row

Keď už vieš, či chceš obsah webstránky umiestniť buď do bloku alebo na celú šírku si definuješ "riadky" ako v tabuľke, do ktorých umiestniš "stĺpce". Riadky sa priraďujú pomocou triedy .row.

<div class="row"></div>

Stĺpec - .col-

Následne priradíme do nami vytvorených riadkov stĺpce. Stĺpce sa priraďujú pomocou triedy .col-{typ-zobrazenia}-{počet stĺpcov}.

Typ zobrazenia predstavuje rozlíšenie, pod akým chceme web zobraziť (počítač, mini-notebook, tablet, mobil). Podľa toho vyberieme jednu z možností:

  1. lg - pre zobrazenie na desktope (počítači)
  2. md - pre zobrazenie na menších počítačoch (13 palcových a menej) a na väčších tabletoch
  3. sm - pre zobrazenie na tabletových zariadeniach a väčších mobilných zariadeniach
  4. xs - pre zobrazenie na mobilných zariadeniach

Typ zobrazenia je určený pomocou rozlíšenia v pixloch.

Upozornenie: Nezabudni, že súčet stĺpcov, vždy musí dávať 12!

Na základe mobile-first princípu je dobré začať definovaným triedy od najmenšieho zariadenia, čiže .col-xs-$ po najväčšie zariadenie čiže .col-lg-$.

Prečo to tak je? Z dôvodu optimalizácie a rýchlosti načítania na mobilných a tabletových zariadeniach.

Úloha

  1. Máme nasledujúcu ukážku kódu:
<div>
  <div class="row">
    <div>
    ...
    </div>
  </div>
</div>
  1. Ako by si vytvoril/a zarovnaný obsah do bloku o šírke 12 stĺpcov pre desktopové rozlíšenie?
  2. Ako by si vytvoril/a obsah na celú šírku o 12 stĺpcoch pre desktopové rozlíšenie?
  3. Ako by si vytvoril/a zarovnaný obsah do bloku o šírke 3 stĺpcov pre mobilné rozlíšenie?
  4. Môžeme podľa teba kombinovať v jednom HTML elemente rozlíšenie pre tablet, mobil a desktop?