HTML and CSS Reference
In-Depth Information
</div>
<br class="clearfix visible-sm-block" />
<div class=" col-lg-2">
<h2>Col3</h2>
<p>Contenuto</p>
</div>
<br class="clearfix visible-md-block" />
<div class="col-sm-6 col-md-4 col-lg-2">
<h2>Col4</h2>
<p>Contenuto</p>
</div>
<br class="clearfix visible-sm-block" />
<div class="col-sm-6 col-md-4 col-lg-2">
<h2>Col5</h2>
<p>Contenuto</p>
</div>
<div class="col-sm-6 col-md-4 col-lg-2">
<h2>Col6</h2>
<p>Contenuto</p>
</div>
</div>
Anche se questo codice HTML รจ apparentemente semplice, ci sono molti dettagli tecnici
che meritano di essere approfonditi. Prima di tutto viene creato un
div
con classe CSS
row
, la quale rappresenta una riga. All'interno di questo tag
div
vengono creati sei
div
,
tanti quante sono le colonne che vogliamo inserire. Infine, vengono inseriti dei tag
br
per
far andare a capo le colonne in base al tipo di layout. Da un punto di vista del codice
HTML, questo layout non dice molto; la vera magia consiste nelle classi CSS applicate:
col-*
. Bootstrap suddivide il layout in quattro categorie, in base a delle media query:
