0 Kč s DPH

Dlaždice na úvodní stránce

Na mnoha webech je vidět unikátní rozložení úvodní stránky s dlaždicemi odkazujícími na další články nebo služby. Dnes si ukážeme, jak tyto dlaždice pomocí CSS stylů a hotového frameworku Bootstrap vytvoříme v šablonách SLIDE a ONE.


Styl a rozložení dlaždic vychází z již zmiňovaného frameworku Bootstrap s vytvořeným tzv. mřížkovým systémem (grid system), který jednotlivé prvky svazuje do nastavené šířky. Šířka jednotlivých prvků se mění v závislosti na velikosti zobrazovacího zařízení. V našich responzivních šablonách je tato mřížka použita pro rozložení webu, a to na levý a pravý sloupec. 

Mřížkový systém funguje podobně jako tabulka. Tedy je tu řádek, ve kterém se nacházejí buňky/sloupce, které mají přidělenu vlastnost, a ta jim říká, jakou mají mít šířku na různých zařízeních.

V níže uvedené tabulce vidíme jednotlivé třídy specifické pro jeden rozměr zobrazovacího zařízení.  

  Velikost zobrazovaného zařízení
  < 768px ≥ 768px ≥ 992px ≥ 1200px
Označení sloupce col-xs- col-sm- col-md- col-lg-

Příklad použití mřížkového systému

Sloupce uzavíráme do řádku v tomto kódu  <div class="row"> </div>. Sloupců v jednom řádku může být maximálně dvanáct, čemuž odpovídá první příklad.

Příklad 1:

.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1

Příklad 2:

.col-md-8
.col-md-4

Příklad 3:

.col-md-4
.col-md-4
.col-md-4

Příklad 4:

.col-md-6
.col-md-6

Zdrojový kód bloku tří sloupců:

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

Hodnota za názvem sloupce ukazuje, jak bude široký. V případě sloupce col-xs-12 bude sloupec roztažený přes celou stránku na zařízeních s šířkou menší, než 768px, tudíž budou sloupce řazeny pod sebou. Sloupec col-sm-6 bude zabírat polovinu stránky, což znamená, že budou dva vedle sebe a třetí pod nimi. A sloupce col-md-4 budou tři vedle sebe. Aby se sloupce zobrazovaly v jednom řádku, musí být součet jednotlivých hodnot 12, což platí v případě col-md-4 a col-lg-4.

Zdrojový kód dlaždic

Pro tvorbu dlaždic využijeme níže uvedený kód, který vložíme do zdrojového kódu úvodní stránky, a uložíme. Poté je možné texty a obrázky dále upravovat v grafickém editoru. Jednoduše na ně klikneme a upravíme. Při opětovných úpravách musíme dávat pozor, abychom zdrojový kód neodmazali nebo nějak neupravili.

Pro usnadnění využijte zobrazení textu s bloky. Nastavení provedete v editoru pod položkou Zobrazit > Ukázat bloky. S tímto zobrazením uvidíte ve které části upravujete text a zda nedošlo k narušení kódu. 

<div class="row sluzby">

<div class="col-xs-12 col-sm-6 col-md-4 col-lg-4">
<div class="thumbnail">
<img src="/obrazek/2/obrazek1-jpg/" alt=""  />
<div class="caption">
<h2>Nadpis </h2>
<p>Krátký popis</p>
<p><a class="btn btn-primary" href="/inpage/sluzba1/">Více informací</a></p>
</div>
</div>
</div>

<div class="col-xs-12 col-sm-6 col-md-4 col-lg-4">
<div class="thumbnail">
<img src="/obrazek/2/obrazek2-jpg/" alt=""  />
<div class="caption">
<h2>Nadpis </h2>
<p>Krátký popis</p>
<p><a class="btn btn-primary" href="/inpage/sluzba2/">Více informací</a></p>
</div>
</div>
</div>

<div class="col-xs-12 col-sm-6 col-md-4 col-lg-4">
<div class="thumbnail">
<img src="/obrazek/2/obrazek3-jpg/" alt=""  />
<div class="caption">
<h2>Nadpis </h2>
<p>Krátký popis</p>
<p><a class="btn btn-primary" href="/inpage/sluzba3/">Více informací</a></p>
</div>
</div>
</div>
</div>

Použití dlaždic na webu

Níže vidíme, jak vypadají námi vytvořené tři dlaždice na webu. Jejich responzivní chování vyzkoušíme zmenšením a zvětšením okna prohlížeče.

Služby

Služby

Prohlédněte si námi nabízené služby.

Více informací

Reference

Reference

Máme velké množství referencí, dokonce i ze zahraničí.

Více informací

Fotogalerie

Fotogalerie

Prohlédněte si fotografie z realizovaných staveb.

Více informací

Změna barvy pozadí, tlačítek a textu

Dlaždice lze dále upravovat v rámci CSS stylů. Níže přidáváme stylopisy na změnu barvy pozadí dlaždic, tlačítek a textů. Stylopisy stačí zkopírovat, vložit do vlastních CSS stylů (VZHLED > Vlastní CSS) a upravit hexa kód barev (#000000). U každé vlastnosti je komentář s popisem, co ovlivňuje.

Barva pozadí a ohraničení dlaždice

.sluzby .thumbnail {
background-color:#ffffff;                        /* barva pozadí */
border:1px solid #eeeeee;                        /* tloušťka ohraničení, styl čáry, barva ohraničení */
border-radius:0px;                               /* oblé rohy, hodnota 0px znaméná ostré rohy */
}

Barva textu a nadpisů

.sluzby .thumbnail .caption {color:#252525;}      /* barva textu */
.sluzby .thumbnail .caption h2{color:#006197;}    /* barva nadpisu */

Barva tlačítka

U tlačítek jsou dvě možnosti změny barvy. Můžeme využít již nastavených tlačítek, které použijeme a změníme u nich třídu tlačítka. 

Nyní je tlačítko nastaveno takto: <a class="btn btn-primary" href="/inpage/sluzba3/">Více informací</a>

Jeho třída je class="btn btn-primary", jehož barevné nastavení se mění dle barvy šablony. Stačí třídu btn-primary změnit na např. btn-success a přebarví se nám na zelenou. Další možnosti přednastavených tlačítek naleznete na stránkách Bootstrapu.

Pro ty, kteří si nevyberou z barevných variací, je další možností přímá úprava tlačítka v CSS stylech s níže uvedeným stylopisem. 

.sluzby .thumbnail .caption .btn-primary {
color:#ffffff;                                    /* barva textu */
background-color:#006197;                         /* barva pozadí */
border:1px solid #006197;                         /* barva ohraničení */
}

.sluzby .thumbnail .caption .btn-primary:hover {
color:#ffffff;                                    /* barva písma při najetí myši na tlačítko */
background-color:#0e8cf7;                         /* barva pozadí po najetí myši na tlačítko */
border:1px solid #0e8cf7;                         /* barva ohraničení po najetí myši na tlačítko */
}

Při úpravě pozadí prvků můžete zvolit jinou barvu, barevný přechod i vlastní obrázek. Vše je již popsáno v článcích: Vylepšete si pozadí stránek s online generátory a Jak změnit pozadí webových stránek.

Poznámka pro šablonu Hanami

Zdrojový kód je shodný s jedním rozdílem. Třídy thumbnail přepište na cardbox

Tým inPage
inpage(zav)zoner.cz

Přidat komentář

Přehled komentářů

  • Změna počtu dlaždic - správné stylování

    18.2.2017 18:59:14 | Jiří Herian

    Dobrý den, můžete poradit co vše nastavit ve stylování, když například změním počet dlaždic ze 3 na 4. Nemohu to přeprat...
    Děkuji

    Odpovědět | Zobrazit odpovědi

    • Re: Změna počtu dlaždic - správné stylování

      20.2.2017 12:42:27 | Tým inPage

      Dobrý den,
      postup by byl následující:
      1) zkopírujete a ještě jednou vložíte celý prvek div
      <div class="col-xs-12 col-sm-6 col-md-4 col-lg-4">
      ....
      </div>
      2) a poté ve všech těchto 4 prvcích změníte počet sloupců pro md a lg následovně: col-md-4 col-lg-4 upravíte na col-md-3 col-lg-3

      Sloupců je na šířku 12, tedy pokud máte 3 prvky, dáte je po 4 sloupcích. Pokud 4 prvky, dáte je po 3 sloupcích.

      Odpovědět

  • RE:TOP Produkty

    11.3.2016 8:16:41 | tým inPage

    Dobrý den Jáne,
    stačí když si v menu E-Shop v Nastavení e-shopu vyberete v roletce Náhodný TOP produkt počet zobrazovaných produktů. TOP produkty jsou ty produkty, které si v nastavení produktu označíte jako Oblíbený. Můžete tak jednoduše ovlivnit, který výběr produktů se vám na webu objeví.

    Odpovědět

  • TOP Produkty

    10.3.2016 20:58:50 | Ján Mažgút

    Prosím o radu:
    Jak udělat dlaždice TOP produktů v šablone ONE na uvodní stránce, tak jak máte v ukázce na http://www.one.inpage.cz/ "Top produkty našeho E-shopu"
    Děkuji za odpověď.

    Odpovědět

  • RE:Zmena parametru dlazdic

    17.12.2015 9:51:09 | tým inPage

    Dobrý den,
    pro správné zobrazení v responzivních verzích doporučujeme spíše volit obsah tak, aby byl všude stejně dlouhý. Popř. můžete k třídě: .sluzby .thumbnail přidat vlastnost min-height: 200px; V tomto případě dlaždice nikdy nebude menší než 200px a v případě potřeby se vytáhne.

    Odpovědět

  • Zmena parametru dlazdic

    17.12.2015 9:02:33 | Petr

    Děkuji za doplnění. Ještě mám doplňující dotaz, jestli je možné nastavit pevnou výšku dlaždic, resp. funkci sjednocující jejich výšku, když je např. v jednotlivých dlaždicích rozdílné množství textu/řádků. Děkuji.

    Odpovědět

  • RE: Zmena parametru dlazdic

    11.12.2015 11:00:35 | Tým inPage

    Dobrý den,
    ano je to možné. Tyto úpravy lze provést v rámci CSS stylů nebo použitím již přednastavených stylů. Postup, jak na to jsme do článku doplnili pod nadpisem "Změna barvy pozadí, tlačítek a textu".

    Odpovědět

  • Zmena parametru dlazdic

    10.12.2015 13:10:15 | Petr

    Dobrý den,
    je možné doplnit kódy měnící parametry vzhledu dlaždic - např. barvu pozadí nebo tlačítka?
    Děkuji.

    Odpovědět

  • Dlaždice

    24.11.2015 15:37:54 | Tomas

    Super, funguje, tenhle článek mě posunul, dík.

    Odpovědět

inPage.cz - webové stránky, doména a webhosting snadno.