Griglia Bootstrap - Dispositivi medi

Esempio di griglia Bootstrap: dispositivi medi

Nel capitolo precedente abbiamo presentato un esempio di griglia con classi per piccoli dispositivi. Abbiamo usato due div (colonne) e abbiamo dato loro una suddivisione del 25%/75%:

Ma su dispositivi medi il design potrebbe essere migliore con una suddivisione del 50%/50%.

Suggerimento: per dispositivi medi si intende una larghezza dello schermo compresa tra 992 pixel e 1199 pixel .

Per i dispositivi medi utilizzeremo le .col-md-*classi.

Ora aggiungeremo le larghezze delle colonne per i dispositivi medi:

Ora Bootstrap dirà "alla piccola dimensione, guarda le classi con -sm- in esse e usa quelle. Alla dimensione media, guarda le classi con -md- in esse e usa quelle".

L'esempio seguente risulterà in una suddivisione del 25%/75% sui dispositivi piccoli e del 50%/50% sui dispositivi medi (e grandi). Su dispositivi extra piccoli, si accumulerà automaticamente (100%):

Usando solo medio

Nell'esempio seguente, specifichiamo solo la .col-md-6classe (senza .col-sm-*). Ciò significa che i dispositivi di medie e grandi dimensioni si divideranno del 50%/50%, perché la classe aumenta. Tuttavia, per i dispositivi di piccole dimensioni, verrà impilato verticalmente (100% di larghezza):

Il prossimo capitolo mostra come aggiungere una percentuale di suddivisione diversa per i dispositivi di grandi dimensioni.