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:

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

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

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