Grid - rozdělte si stránku do sloupců

V našich responzivních šablonách používáme již hotový framework Bootstrap v3.4. Jedná se o knihovnu před-vytvořených stylů usnadňující tvorbu webových stránek. Jejím základem je mřížkový systém, který nám pomáhá rozdělit obsah a vytvářet responzivní design. Ten se mění v závislosti na velikosti zobrazovacího zařízení. V šablonách je tato mřížka použita např. pro rozložení webu, fotografií, produktů v e-shopu apod. 

Při použití mřížkového systému doporučujeme přepnout na HTML editor. WYSIWYG editor pak můžete využít pro drobné úpravy textu, odkazů či obrázků umístěných v mřížce. Hrozí ale rozhození mřížky.

Základní seznámení

Mřížkovým systém (grid system) svazuje jednotlivé prvky do nastavené šířky a funguje tak podobně jako tabulka. Tedy je tu řádek row, ve kterém se nacházejí buňky/sloupce col, které mají určitou šířku a ta se může a nemusí měnit v závislosti na šířce zobrazovacího zařízení.

Součástí sloupce jsou hodnoty xs, sm, md a lg, které nám pohlídají responzivitu. Jedná se o "body zlomu", které platí pro různě široké zobrazovací zařízení, viz tabulka níže.

Poslední částí je šířka samotného sloupce o hodnotě 1-12. Jednička znamená nejužší sloupec a 12 nejširší, tedy 100%. Pokud budete chtít mít sloupce v jednom řádku, musí být součet hodnot maximálně 12. Bude-li to víc, zařadí se do dalšího řádku.

Jak se sloupce chovají v našem návrhu, můžete vidět v prohlížeči. Stačí zmenšit šířku prohlížeče uchopením jeho hrany myší. 

Vytvoření HTML kódu

Sloupce vždy uzavíráme do  bloku  <div class="row"> </div>. Pro tři stejně široké sloupce na zařízeních nad 992px šířky využijeme třídu .col-md-4. Na zařízeních menších jak 992px budou sloupce široké 100% a zařazeny pod sebou. 

<div class="row">
  <div class="col-md-4">
  </div>
  <div class="col-md-4">
  </div>
  <div class="col-md-4">
  </div>
</div>

Responzivita

Rozdělení do třech sloupců ale není vyhovující na všech zobrazovacích zařízení. Proto přidáme další třídy, které nám šířku sloupců upraví. Níže na příkladu je rozdělení  do 3 sloupců od šířky zařízení 1200px (col-lg-4) a 992px (col-md-4). Na zařízeních širokých nad 768px (col-sm-6) se pak sloupce roztáhnou na cca 50%. Tedy třetí sloupec se zařadí pod ostatní. Na zařízeních menších než 768px (col-xs-12) jsou pak sloupce roztažené na 100% šířky.

<div class="row">
  <div class="col-xs-12 col-sm-6 col-md-4 col-lg-4">
  </div>
  <div class="col-xs-12 col-sm-6 col-md-4 col-lg-4">
  </div>
  <div class="col-xs-12 col-sm-6 col-md-4 col-lg-4">
  </div>
</div>

Praktické využití mřížkového systému

Na níže uvedených příkladech Vám ukážeme praktické využití mřížkového systému tedy html kódu, který stačí zkopírovat, vložit do HTML editoru vaší stránky a upravit dle své potřeby a pod ním zobrazení na webu.

Třísloupcová šablona

Rozdělení obsahu do třech sloupců s nadpisem, textem a odkazem. V příkladu je odkaz ve formě tlačítka, což nám udává class="btn btn-primary". V části href="" je pak adresa odkazu.

HTML kód

<div class="row">
  <div class="col-xs-12 col-sm-6 col-md-4 col-lg-4">
    <h3>Nadpis</h3>
    <p>Libovolný text, který si zde přejete zobrazit.</p>
    <p><a class="btn btn-primary" href="/inpage/grid-rozdelte-si-stranku-do-sloupcu/">Více</a>
  </div>
  <div class="col-xs-12 col-sm-6 col-md-4 col-lg-4">
    <h3>Nadpis</h3>
    <p>Libovolný text, který si zde přejete zobrazit.</p>
    <p><a class="btn btn-primary" href="/inpage/grid-rozdelte-si-stranku-do-sloupcu/">Více</a>
  </div>
  <div class="col-xs-12 col-sm-6 col-md-4 col-lg-4">
    <h3>Nadpis</h3>
    <p>Libovolný text, který si zde přejete zobrazit.</p>
    <p><a class="btn btn-primary" href="/inpage/grid-rozdelte-si-stranku-do-sloupcu/">Více</a>
  </div>
</div>

Čtyřsloupcová šablona

Rozdělení obsahu do čtyř sloupců s nadpisem, obrázkem a textem. Obrázek je tvořen tagem img jeho adresa se vkládá do src="" a vhodné je použití třídy pro responsivní chování class="img-responsive". Obrázek se přizpůsobí šířce sloupce a nebude přetékat do následujícího. Obrázky by měly mít stejný velikostní poměr, aby byl design konzistentní. 

<div class="row">
  <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3">
    <h4>Nadpis</h4>
    <p><img src="/obrazek/2/obrazek1-jpg/" alt="název obrázku" class="img-responsive"/></p>
    <p>Libovolný text, který si zde přejete zobrazit. </p>
  </div>
  <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3">
    <h4>Nadpis</h4>
    <p> <img src="/obrazek/2/obrazek2-jpg/" alt="název obrázku" class="img-responsive"/></p>
    <p>Libovolný text, který si zde přejete zobrazit. </p>
  </div>
  <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3">
    <h4>Nadpis</h4>
    <p> <img src="/obrazek/2/obrazek3-jpg/" alt="název obrázku" class="img-responsive"   /></p>
    <p>Libovolný text, který si zde přejete zobrazit. </p>
  </div>
  <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3">
    <h4>Nadpis</h4>
    <p><img src="/obrazek/2/obrazek4-jpg/" alt="název obrázku" class="img-responsive" ></p>
    <p>Libovolný text, který si zde přejete zobrazit. </p>
  </div>
</div>

Dvousloupcová šablona

Šablona s jedním širším a jedním užším sloupcem. Ttuto využijete například pro rozdělení stránky na levou obsahovou část s delším textem a informativním pravým sloupcem. V příkladu jsme využili dalšího bootstrap prvku tzv. panelu .panel s textem a odrážkami ul.

<div class="row">
  <div class="col-xs-12 col-sm-12 col-md-8 col-lg-8">
    <h1>Nadpis</h1>
    <p>Libovolný text, který si přejete zobrazit</p>
  </div>
  <div class="col-xs-12 col-sm-12 col-md-4 col-lg-4">
    <h2>Další informace</h2>
    <p>Libovolný text, který si přejete zobrazit.</p> 
    <div class="panel panel-primary">
      <div class="panel-heading">
        Nadpis panelu
      </div> 
      <div class="panel-body>
        <p>Libovolný text, v panelu</p> 
        <ul>
          <li><a href="/inpage/grid-rozdelte-si-stranku-do-sloupcu/">Odkaz 1</a></li> 
          <li><a href="/inpage/grid-rozdelte-si-stranku-do-sloupcu/">Odkaz 1</a></li>
          <li><a href="/inpage/grid-rozdelte-si-stranku-do-sloupcu/">Odkaz 1</a></li>
          <li><a href="/inpage/grid-rozdelte-si-stranku-do-sloupcu/">Odkaz 1</a></li>
        </ul>
      </div>
    </div> 
  </div>
</div>

Další využití mřížkového systému naleznete v našich návodech: 

• Vlastní patička stránek
• Dlaždice na úvodní stránce

Bližší informace o možnostech frameworku lze nalézt v anglické dokumentaci Bootstrap 3.4. S případnými dotazy se na nás neváhejte obrátit v komentářích.