Sekcia pridaj sa

Sekcia pridaj sa je tvorená 2 stĺpcovým rozložením na celú šírku prehliadača.

Vytvorenie sekcie

Na začiatok si vytvoríme sekciu a priradíme jej jedinečný identifikátor pomocou id.

<div id="join">
...
</div>

Definovanie containeru

V tomto rozložení je obsah centrovaný na celú šírku prehliadača, preto použijeme namiesto triedy .container, triedu .container-fluid.

<div id="join" class="container-fluid">
...
</div>

Vytvorenie row

Keďže obsah je rozdelený do 2 stĺpcov v prvom kroku definuje html element a priradíme mu .row triedu.

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

Vytvorenie 2 stĺpcového rozloženia

Na rozdelenie obsahu do 2 stĺpcov použijeme opäť triedy Bootstrapu. Keďže 12/2 = 6, náš kód bude vyzerať nasledovne:

<div class="col-xs-12 col-sm-6 col-md-6 col-lg-6 join1">
  Blok 1
</div>

<div class="col-xs-12 col-sm-6 col-md-6 col-lg-6 join2">
  Blok 2
</div>

Poznámka: Triedu .join1 a .join2 sme pridali pre potrebu rozlíšenia jednotlivých sekcií. Bližšie bude táto časť vysvetlená v CSS sekcii tutoriálu.

Vloženie textu

Text pridáme tentokrát pomocou <span></span> elementu. 

<span class="join-info">Poď programovať s PyLadies
</span>

Riadkovanie

Podľa dizajnu vidíme, že PyLadies sa nachádza na novom riadku. Text na nový riadok pridáme pomocou <br /> elementu.

<span class="join-info">Poď programovať s <br />
PyLadies
</span>

Vloženie odkazu

Odkazy sa vkladajú v HTML pomocou <a></a> tagu. <a></a> obsahuje atribúty:

  1. href na pridanie adresy, kam bude link odkazovať. <a href="https://www.example.com/">Text odkazu</a>.
  2. target na určenie spôsobu otvorenia adresy. <a target="_blank">Text odkazu</a>.

Odkaz vložíme pomocou:

<a href="http://pyladies.cz/" target="_blank">PyLadies</a>

Zobrazenie bloku ako celku

<div class="col-xs-12 col-sm-6 col-md-6 col-lg-6 join1">
  <span class="join-info">Pod programovat s <br />
    <a href="http://pyladies.cz/" target="_blank">PyLadies</a>
  </span>
</div>

Úloha

  1. Otvor index.html vo webovom prehliadači.
  2. Pridaj rovnako ako v tutoriály informácie pre blok 2 podľa priloženého wireframu.
  3. Ulož súbor index.html
  4. Otvor index.html vo webovom prehliadači
  5. Pridaj triedu .text-center do správneho elementu tak, aby bol obsah na webstránke v oboch blokoch vycentrovaný.
  6. Ulož súbor index.html
  7. Otvor index.html vo webovom prehliadači

Ak si postupoval/a správne, na záver tejto lekcie vyzerá sekcia nasledovne:

<div id="join" class="container-fluid">
  <div class="row text-center">
    <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6 join1">
      <span class="join-info">Poď programovať s <br />
        <a href="http://pyladies.cz/" target="_blank">PyLadies</a>
      </span>
    </div>
    <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6 join2">
      <span class="join-info">Poď programovať s <br />
        <a href="http://www.czechitas.cz/" target="_blank">Czechitas</a>
      </span>
    </div>
  </div>
</div>