Columnes

Per organitzar el contingut en columnes

El nou web et permet organitzar el contingut (text, imatges, taules...) en columnes. De manera senzilla tot queda perfectament alineat!

Com s'utilitzen les columnes

Files

Primer de tot cal que creïs una fila (o tantes com en necessitis):

<div class="row">
    <!--Aquí hi posarem les nostres columnes-->
</div>

Quan parlem de fila no ens referim a una fila de text sinó a una estructura que permet mantenir les columnes al mateix nivell. És a dir, que una fila pot contenir moltes columnes a dins seu.

Columnes

Per crear una columna has de pensar quina amplada ha de tenir, o quin percentatge d'espai disponible ha de ocupar. Per defecte l'espai disponible es divideix en 12 i, per a cada columna, has de pensar quantes d'aquestes 12 parts ha de ocupar.

Per exemple, si vols 3 columnes iguals, cada columna serà de 4 parts de les 12 totals. En aquest cas el codi de la columna seria el següent:

<div class="col-md-4"></div>

Ara només falta afegir les columnes dins de la fila!

<div class="row">
    <div class="col-md-4">
        <!--CONTINGUT COLUMNA-->
    </div>
    <div class="col-md-4">
        <!--CONTINGUT COLUMNA-->
    </div>
    <div class="col-md-4">
        <!--CONTINGUT COLUMNA-->
    </div>
</div>

Si necessitessis una pàgina amb una columna molt ampla i una de més estreta, tal com passa a les pàgines de les càtedres, podries provar una estructura com la següent:

<div class="row">
    <div class="col-md-8">
        <!--CONTINGUT COLUMNA-->
    </div>
    <div class="col-md-4">
        <!--CONTINGUT COLUMNA-->
    </div>
</div>

Quadrícules

Finalment, podem crear una mena de quadrícula com la que hi ha a la pàgina del SÍRIUS VIC posant una fila com la primera sota l'altre:

<div class="row">
    <div class="col-md-4">
        <!--CONTINGUT COLUMNA-->
    </div>
    <div class="col-md-4">
        <!--CONTINGUT COLUMNA-->
    </div>
    <div class="col-md-4">
        <!--CONTINGUT COLUMNA-->
    </div>
</div>
<br>
<div class="row">
    <div class="col-md-4">
        <!--CONTINGUT COLUMNA-->
    </div>
    <div class="col-md-4">
        <!--CONTINGUT COLUMNA-->
    </div>
    <div class="col-md-4">
        <!--CONTINGUT COLUMNA-->
    </div>
</div>
<br>
<div class="row">
    <div class="col-md-4">
        <!--CONTINGUT COLUMNA-->
    </div>
    <div class="col-md-4">
        <!--CONTINGUT COLUMNA-->
    </div>
    <div class="col-md-4">
        <!--CONTINGUT COLUMNA-->
    </div>
</div>