I Framework per il Web - HTML5 con CSS e JavaScript - page 244

Large : riconoscibile dalla sigla lg nelle classi CSS. Questo layout entra in gioco
quando la larghezza del browser è superiore a 1200px (tipicamente quella dei mo-
nitor 16:9 e dei grandi schermi).
Medium : riconoscibile dalla sigla md nelle classi CSS. Questo layout entra in gioco
quando la larghezza del browser è superiore a 992px e inferiore a 1200px (tipica-
mente quella dei monitor più vecchi).
Small : riconoscibile dalla sigla sm nelle classi CSS. Questo layout entra in gioco
quando la larghezza del browser è superiore a 768px e inferiore a 992px (tipica-
mente quella dei tablet).
Extra-small : riconoscibile dalla sigla xs nelle classi CSS. Questo layout entra in gio-
co quando la larghezza del browser è inferiore a 768px (tipicamente quella degli
smartphone).
Grazie a questa suddivisione, possiamo decidere come organizzare le colonne in base al
layout. Nel nostro esempio:
quando le dimensioni sono large (primo layout della figura 11.2 ), entra in gioco la
classe col-lg-2 , la quale specifica che il div occupa due colonne virtuali;
quando le dimensioni sono medium (secondo layout della figura 11.2 ) , entra in gioco
la classe col-md-4 , quindi il div occupa quattro colonne virtuali;
quando le dimensioni sono small (terzo layout della figura 11.2 ), entra in gioco la
classe col-sm-6 , quindi il div occupa sei colonne virtuali;
quando le dimensioni sono extra-small (quarto layout della figura 11.2 ) , entra in
gioco la classe col-xs-12 , quindi il div occupa tutte le colonne virtuali (questa
classe non è specificata, in quanto è inutile specificarla poiché per default tutta la
riga viene occupata).
Nel codice HTML viene dichiarata solo una riga ma, fatta eccezione per il layout large ,
tutti gli altri mostrano le colonne su più righe. Questo avviene perché sugli altri layout lo
spazio occupato dalle colonne è maggiore delle dodici virtuali, quindi il browser le manda
a capo.
Per garantire un corretto allineamento quando si va a capo, vengono usati i tag br . A
questi tag applichiamo la classe clearfix , per mandare correttamente a capo, e la classe
visible-{abbreviazione}-block , per visualizzare o nascondere questo tag a se-
conda del tipo di layout. In questo modo, quando il layout è small il tag br diventa attivo