Bootstrap Grid - Medium Devices

Bootstrap Griglia Esempio: Dispositivi di media

Nel capitolo precedente, abbiamo presentato un esempio di griglia con classi per dispositivi di piccole dimensioni. Abbiamo usato due div (colonne) e abbiamo dato loro un 25%/75% diviso:

Ma su dispositivi medie del disegno può essere meglio come 50%/50% diviso.

Suggerimento: i dispositivi di media sono definiti come aventi una larghezza dello schermo da 992 pixel a 1199 pixel.

Per i dispositivi di media useremo i .col-md-* classi.

Ora si aggiunge la larghezza delle colonne per i dispositivi di media:

Ora Bootstrap sta per dire "al piccolo formato, guarda le classi con -sm- in loro e usare quelli. Al di medie dimensioni, guarda classi con -md- in loro e usare quelli".

Il seguente esempio si tradurrà in un 25%/75% divisa su piccoli dispositivi e 50%/50% diviso su dispositivi medie (e grandi). Su piccoli dispositivi supplementari, esso impilare automaticamente (100%):

Utilizzando unico mezzo

Nell'esempio che segue, si limita a specificare il .col-md-6 classe (senza .col-sm-* ). Ciò significa che i dispositivi di medie e grandi saranno raggruppati 50%/50% - perché la classe scale up. Tuttavia, per piccoli dispositivi, sarà impilare verticalmente (larghezza 100%):

Il prossimo capitolo mostra come aggiungere un diverso diviso per cento per le grandi dispositivi.