0 Kč s DPH

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 xssmmd 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.

Šířka zobrazovacího zařízení < 768px ≥ 768px ≥ 992px ≥ 1200px
Označení sloupce col-xs- col-sm- col-md- col-lg-

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>

Nadpis

Libovolný text, který si zde přejete zobrazit. 

Více

Nadpis

Libovolný text, který si zde přejete zobrazit. 

Více

Nadpis

Libovolný text, který si zde přejete zobrazit. 

Více


Č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>

Nadpis

název obrázku

Libovolný text, který si zde přejete zobrazit.

Nadpis

název obrázku

Libovolný text, který si zde přejete zobrazit.

Nadpis

název obrázku

Libovolný text, který si zde přejete zobrazit.

Nadpis

název obrázku

Libovolný text, který si zde přejete zobrazit.

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>

Nadpis

Libovolný text, který si přejete zobrazit. Incididunt nisi velit dolore ut irure qui minim consectetur eiusmod culpa ea qui mollit quis nostrud adipisicing mollit enim labore laboris dolore reprehenderit dolore magna aliquip fugiat minim do tempor aliqua ad nostrud sunt ad elit nostrud nisi do amet consectetur velit occaecat officia ut occaecat esse deserunt sit adipisicing dolore cupidatat duis culpa ut voluptate tempor occaecat occaecat dolor quis non excepteur incididunt adipisicing reprehenderit anim velit officia sit elit consequat qui dolor in qui elit veniam commodo magna tempor dolore elit officia dolor et culpa excepteur eiusmod ut id dolor minim esse id duis aute aliquip laborum nulla sed laboris irure duis reprehenderit proident consequat do fugiat eu non sed nulla exercitation sint do fugiat excepteur nisi eu nisi sed consectetur dolor minim ut proident in qui consequat

Další informace

Libovolný text, který si přejete zobrazit.

Nadpis panelu

Libovolný text, v panelu


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

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.

Tým inPage
info(zav)inpage.cz

Přidat komentář