Sekcia záujmy

Sekcia záujmy je ako vidíš aj na obrázku tvorená 1 stĺpcovým rozložením pre nadpis a 3 stĺcovým rozložením pre zobrazenie 3 záujmov.

Opakovanie: V lekcii o Twitter Bootstrape sme si povedali, že web je tvorený riadkami a 12-timi stĺpcami, pričom súčet stĺpcov musí byť vždy 12.

Vytvorenie sekcie

Na vytváranie sekcií v HTML využívame tag <section></section>. Aby sme vedeli sekciu správne identifikovať priradíme jej unikátny názov podľa selectoru id.

<section id="interests">
...
</section>

Vycentrovanie obsahu v sekcii do bloku

Obsah sekcie "záujmy" je nacentrovaný v bloku, preto mu priradíme triedu .container.

<section id="interests" class="container">
...
</section>

Vytvorenie nadpisu

Nadpis "Čomu sa venujem" je nacentrovaný v strede stránky. V prvom kroku definujeme triedu .row - riadok. (ako keď vytvárame tabuľku).

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

V druhom kroku určíme, že nadpis bude v rozložení 12-tich stĺpcov celej šírky containeru.

<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
...
</div>

Finálne sekcia pripravená pre vloženie nadpisu

<section id="#interests" class="container">
  <div class="row">
    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
    ...
    </div>
  </div>
</section>

Vloženie nadpisu

Nadpis vkladáme do h1 - h6 elementov. Keďže <h1></h1> sme použili v slideri, ostatné nadpisy na webstránke zobrazíme pomocou <h2></h2> elementu (menšia dôležitosť).

<h2>Čomu sa venujem</h2>

Vycentrovanie nadpisu

Otvor si index.html vo webovom prehliadači. Nadpis sa zobrazil, no ešte nie je zarovnaný v strede. Keďže že sme si pre nadpis rezervovali 12 stĺpcov, môžeme ho nacentrovať pomocou Bootstrapovej preddefinovanej triedy .text-center.

Úloha

  1. Pridaj triedu .text-center k <h2></h2> elementu pre nadpis
  2. Ulož súbor index.html
  3. Pozri sa ako vyzerá web v prehliadači

Vytvorenie 3 stĺpcového bloku so záujmami

Ako vidíš z návrhu, sekcia záujmy obsahuje 3 položky.

  1. Programovanie v Pythone
  2. Web dizajnu
  3. Behaniu

V prvom kroku definujeme triedu .row - riadok. (ako keď vytvárame tabuľku).

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

V druhom kroku určíme - 12/3 = 4, z čoho vyplýva, že pre každý blok využijeme 4 stĺpce.

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

V tomto kroku však súčet nie je 12, iba 4, preto je potrebné kód 3 x zopakovať.

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

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

<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4">
  Blok 3
</div>

Teraz už súčet 12 máme :)

Úloha

  1. V súbore index.html pod sekciu s nadpisom vlož kód pre 3 stĺpcové zobrazenie obsahu.
  2. Súbor index.html ulož.
  3. Otvor súbor index.html v prehliadači.
  4. Skús upraviť kód, tak aby sa zobrazili namiesto 3 stĺpcov 4 stĺpce.

Vloženie obsahu do stĺpca

Následne poďme do stĺpcov vložiť potrebný obsah. Obsah v stĺpci je tvorený:

  • Ikonka záujmu
  • Nadpis záujmu
  • Popis

Opäť, aby sa nám lepšie s obsahom v stĺpci ako celkom pracovalo, obalíme si ho do wrapperu, ktorému priradíme triedu pre lepšiu identifikáciu.

Pod div element <div class="col-xs-12 col-sm-12 col-md-4 col-lg-4"> vložíme:

<div class="interest-wrapper">
...
</div>

Vloženie ikonky

S ikonkami sa v súčastnosti pracuje v rôznych formátoch (png, font, ico, svg,...).

V súčastnosti väčšinou namiesto png obrázkov alebo ikoniek využívame písmo. S písmom je možné pracovať oveľa flexibilnejšie ako s obrázkami. Vieme mu priamo meniť veľkosť, farbu, zarovnanie a mnoho ďalších formátovacích vlastností spojených s písmami, ktoré by v prípade obrázkov šli docieliť oveľa zložitejším spôsobom.

Aby sme mohli písmo s ikonkami na webe používať, pôjdeme na stránku Font-awesome , kde nakopírujeme kód do našej <head></head> sekcie webstránky.

Úloha

  1. Choď na stránku Font-awesome
  2. Skopíruj <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css">
  3. Otvor súbor index.html
  4. Pridaj kód do <head></head> sekcie hneď pod kód, kde máme vložený odkaz na Bootstrap
  5. Ulož súbor index.html

Vloženie písma

Poďme spolu vložiť napríklad ikonku pre programovanie.

  1. Pôjdeme na stránku Font-awesome
  2. Do vyhľadávača zadáme "code"
  3. Vyberieme si jednu z ikoniek, ktorá sa nám páči
  4. Skopírujeme vygenerovaný kód <i class="fa fa-file-code-o fa-i" aria-hidden="true"></i>
  5. Otvoríme súbor index.html
  6. Pod <div class="interest-wrapper"></div> vložíme <i class="fa fa-file-code-o fa-i" aria-hidden="true"></i>
  7. Súbor index.html uložíme
  8. Pozri si ako vyzerá tvoj web v prehliadači

Vloženie nadpisu

Pod obrázok vložíme nadpis záujmu. Tentokrát použijeme element <h3></h3>.

<h3>Programovaniu v Pythone</h3>

Vloženie popisu

Popis záujmu vložíme opäť pomocou <p></p> tagu.

<p>Donec sed odio dui. Etiam porta sem malesuada magna mollis euismod. Nullam id dolor id nibh ultricies vehicula ut id elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna.</p>

V tejto chvíli kód ako celok vyzerá nasledovne:

<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4">
      <div class="interest-wrapper">
        <i class="fa fa-paint-brush fa-i" aria-hidden="true"></i>
        <h3>Web dizajnu</h3>
        <p>Donec sed odio dui. Etiam porta sem malesuada magna mollis euismod. Nullam id dolor id nibh ultricies vehicula ut id elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna.</p>
      </div>
    </div>

Úloha

  1. Ulož súbor.index.html.
  2. Otvor index.html v prehliadači.
  3. Doplň obsah pre druhý stĺpec.
  4. Pozri sa ako web vyzerá v prehliadači.
  5. Doplň obsah pre tretí stĺpec.
  6. Pozri sa ako web vyzerá v prehliadači.
  7. Ako by si vycentroval/a celý blok?

Vycentrovanie celého bloku

Na centrovanie sme už použili triedu .text-center. Ak chceme vycentrovať blok ako celok je potrebné triedu pridať na úroveň najvyššieho elementu (hlavného rodiča). V našom prípade je to div element, kde máme priradenú aj .row triedu.

Finálne celá sekcia so záujmami vyzerá nasledovne:

<section id="#interests" class="container">
  <div class="row">
    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
      <h2 class="text-center">Čomu sa venujem</h2>
    </div>
  </div>
  <div class="row text-center">
    <div class="col-xs-12 col-sm-12 col-md-4 col-lg-4">
      <div class="interest-wrapper">
        <i class="fa fa-file-code-o fa-i" aria-hidden="true"></i>
        <h3>Programovaniu v Pythone</h3>
        <p>Donec sed odio dui. Etiam porta sem malesuada magna mollis euismod. Nullam id dolor id nibh ultricies vehicula ut id elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna.</p>
      </div>
    </div>
    <div class="col-xs-12 col-sm-12 col-md-4 col-lg-4">
      <div class="interest-wrapper">
        <i class="fa fa-paint-brush fa-i" aria-hidden="true"></i>
        <h3>Web dizajnu</h3>
        <p>Donec sed odio dui. Etiam porta sem malesuada magna mollis euismod. Nullam id dolor id nibh ultricies vehicula ut id elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna.</p>
      </div>
    </div>
    <div class="col-xs-12 col-sm-12 col-md-4 col-lg-4">
      <div class="interest-wrapper">
        <i class="fa fa-wheelchair fa-i" aria-hidden="true"></i>
        <h3>Behaniu</h3>
        <p>Donec sed odio dui. Etiam porta sem malesuada magna mollis euismod. Nullam id dolor id nibh ultricies vehicula ut id elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna.</p>
      </div>
    </div>
  </div>
</section>