WIKI

Responzivní framework Bootstrap je bezesporu jedním z nejoblíbenějších nástrojů pro tvorbu moderních a responzivních webových stránek. Jeho hlavní síla spočívá v úžasném Grid systému, který umožňuje jednoduché a efektivní rozvržení obsahu na různých zařízeních a obrazovkách. V tomto článku se podíváme, jak přesně funguje responzivní framework Bootstrap a ukážeme si konkrétní příklady použití jeho Grid systému.

Co je Bootstrap a Grid systém?

Bootstrap je responzivní framework, který poskytuje sadu nástrojů pro tvorbu moderních webových stránek a aplikací. Jeho hlavními komponentami jsou CSS stylů, JavaScriptové pluginy a předpřipravené komponenty, které umožňují snadnou tvorbu uživatelsky přívětivých a responzivních webových rozhraní.

Grid systém v Bootstrapu je základním stavebním prvkem responzivního designu. Jedná se o systém rozdělení stránky do sloupců a řádků, který umožňuje vývojářům flexibilně rozložit obsah a přizpůsobit ho různým velikostem obrazovek. Grid v Bootstrapu je založen na dvanácti sloupcích a vývojáři mohou jednoduše přizpůsobit rozložení pro různé zařízení pomocí responsivních tříd.

Ukázky použití Grid systému

1. Jednoduché rozložení

Následující příklad ukazuje, jak vytvořit jednoduché rozložení s dvěma sloupci na desktopu a jedním sloupcem na mobilním telefonu.

<div class="container">
  <div class="row">
    <div class="col-md-6">
      Obsah prvního sloupce
    </div>
    <div class="col-md-6">
      Obsah druhého sloupce
    </div>
  </div>
</div>

V tomto příkladu používáme třídu "container" pro ohraničení obsahu a třídu "row" pro řádek. Dále máme dva sloupce, každý s třídou "col-md-6", což znamená, že každý sloupec zabere polovinu šířky obrazovky na zařízení s desktopovým zobrazením.

 

2. Rozložení pro různá zařízení

V dalším příkladu ukážeme, jak jednoduše přizpůsobit rozložení pro různá zařízení.

<div class="container">
  <div class="row">
    <div class="col-md-4 col-sm-6">
      Obsah prvního sloupce
    </div>
    <div class="col-md-4 col-sm-6">
      Obsah druhého sloupce
    </div>
    <div class="col-md-4 col-sm-12">
      Obsah třetího sloupce
    </div>
  </div>
</div>

V tomto příkladu používáme třídy "col-md-4" pro sloupce na desktopu a "col-sm-6" pro sloupce na tabletech. Poslední sloupec využívá třídu "col-sm-12", což znamená, že bude zabírat celou šířku obrazovky na mobilních telefonech.

 

3. Návěští a obsah

Bootstrap umožňuje také snadno kombinovat návěští a obsah v jednom sloupci.

<div class="container">
  <div class="row">
    <div class="col-md-3">
      <h3>Návěští</h3>
    </div>
    <div class="col-md-9">
      <p>Obsah spojený s návěštím.</p>
    </div>
  </div>
</div>

V tomto příkladu máme dva sloupce, první s třídou "col-md-3" pro návěští a druhý s třídou "col-md-9" pro obsah. Návěští zabere třetinu šířky obrazovky na desktopu a obsah zbylé dvě třetiny.

 

Responzivní framework Bootstrap nabízí skvělý Grid systém, který výrazně usnadňuje tvorbu moderních a responzivních webových stránek. Díky jeho třídám pro rozvržení a responsivním designem mohou vývojáři snadno přizpůsobit obsah pro různá zařízení, od desktopů po mobily. Ukázky použití Grid systému v Bootstrapu nám dávají představu o jeho síle a flexibilitě při tvorbě uživatelsky přívětivých a responzivních webových rozhraní.