Információk

Több hasábos layout minták

Hogyan lehet több hasábosra bontani az oldal tartalmát?

A webáruház egy függőlegesen 12 részre osztott rács rendszeren alapul.

Amennyiben több hasábba szeretnénk elkülöníteni bizonyos tartalmi elemeket azt az alábbi módon tudjuk megtenni:
Nyitunk egy "row" osztályú div-et <div class="row"> és ennek a belsejébe helyezünk el "col" előtagú osztállyal rendelkező további <div>-eket.

Ezek a col előtagú osztálynevek 3 részből tevődnek össze:

  1. col - ez egy általános név, minden esetben ez fog kelleni az osztálynév elejére
  2. sm/md/lg/xl - ezek az opciók határozzák meg, hogy az adott beállítás mely készülék(ek)re vonatkozzon
    • sm = mobiltelefon
    • md = tablet álló nézet
    • lg = laptop / fektetett tablet
    • xl = asztali számítógépek
  3. 1-12 - az itt látható számmal (1 és 12 között) tudjuk megszabni, hogy az adott blokk hány egységet foglaljon el

Például: <div class="col-md-4"></div> vagy <div class="col-lg-6"></div>

Mintakód a hasábok div-jére:

<div class="col-lg-6">Hasáb tartalma</div>

A nézetre vonatkozó paraméter nem csak az adott nézetre vonatkozik, hanem minden annál nagyobb nézetre. Tegyük fel egy col-md-6 osztály azt fogja eredményezni, hogy az adott hasáb tablet álló nézetben (md), tablet fektetett nézetben és laptopokon (lg), valamint asztali gépeken (xl) mind 6 egységnyi területet foglal el, mobiltelefonokon viszont 12 egységet.


Példák

Ez két 50% széles, egymás melletti hasáb HTML kódja:

1. hasáb tartalma

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas in tempor lacus, eu sollicitudin erat. Phasellus ipsum risus, vulputate nec libero in, facilisis dictum sem. Proin eu eros et urna auctor volutpat.

2. hasáb tartalma

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas in tempor lacus, eu sollicitudin erat. Phasellus ipsum risus, vulputate nec libero in, facilisis dictum sem. Proin eu eros et urna auctor volutpat.

<div class="row">
<div class="col-lg-6">
Bal oldali, 1. hasáb tartalma
</div>
<div class="col-lg-6">
Jobb oldali, 2. hasáb tartalma
</div>
</div>


Két egymás melletti hasáb különböző szélességgel (ahol a bal oldali a szélesebb):
Fontos, hogy a row osztályú div-en belüli col előtagú osztálynevek végén lévő számok összegének mindig 12-nek kell lennie, ha azt szeretnénk, hogy a hasábok egymás mellé kiférjenek!

1. hasáb tartalma

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas in tempor lacus, eu sollicitudin erat. Phasellus ipsum risus, vulputate nec libero in, facilisis dictum sem. Proin eu eros et urna auctor volutpat.

2. hasáb tartalma

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas in tempor lacus, eu sollicitudin erat. Phasellus ipsum risus, vulputate nec libero in, facilisis dictum sem. Proin eu eros et urna auctor volutpat.

<div class="row">
<div class="col-lg-8">
Bal oldali, 1. hasáb tartalma
</div>
<div class="col-lg-4">
Jobb oldali, 2. hasáb tartalma
</div>
</div>


Három egymás melletti hasáb:
3 hasáb esetén a col osztályok végére a 4-es számot kell alkalmazni (4 + 4 + 4 = 12), ha pedig 4 hasábot szeretnénk, akkor a 3-as számot (3 + 3 + 3 + 3 = 12)

1. hasáb tartalma

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas in tempor lacus, eu sollicitudin erat. Phasellus ipsum risus, vulputate nec libero in, facilisis dictum sem. Proin eu eros et urna auctor volutpat.

2. hasáb tartalma

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas in tempor lacus, eu sollicitudin erat. Phasellus ipsum risus, vulputate nec libero in, facilisis dictum sem. Proin eu eros et urna auctor volutpat.

3. hasáb tartalma

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas in tempor lacus, eu sollicitudin erat. Phasellus ipsum risus, vulputate nec libero in, facilisis dictum sem. Proin eu eros et urna auctor volutpat.

<div class="row">
<div class="col-lg-4">
Bal oldali, 1. hasáb tartalma
</div>
<div class="col-lg-4">
Jobb oldali, 2. hasáb tartalma
</div>
</div>
<div class="col-lg-4">
Jobb oldali, 3. hasáb tartalma
</div>
</div>