La griglia del framework Bootstrap – Parte 2

Le Classi di gestione della griglia Quando abbiamo scritto ...

Le Classi di gestione della griglia
Quando abbiamo scritto .col-md-numero, quella -md- sta per medium. Il framework Bootstrap ha un certo numero di queste classi per adattare il layout dello schermo a diverse dimensioni .

xs – Schermi extra piccoli come gli smartphone: .col-xs-numero
sm – Dispositivi a schermo piccolo come tablet: .col-sm-numero 
md – Schermi di dimensioni medie come desktop e laptop a bassa risoluzione: .col-md-numero 
lg – Schermi di grandi dimensioni ad alta risoluzione: .col-lg-numero
Bootstrap tiene conto della risoluzione dello schermo e del dpi quando decide quali classi attivare ( link ).  Quando definiamo una regola per qualsiasi dimensione del dispositivo, questa regola verrà ereditata e applicata a tutte le dimensioni più grandi, a meno che non la sovrascriviamo fornendone una nuova.

Clearfix
In alcuni casi, quando una colonna ha molto più contenuto e di conseguenza un’altezza maggiore di quella successiva, il layout si interromperà. Le colonne si accumuleranno una sotto l’altra, invece di passare alla riga successiva come dovrebbero. Per evitare ciò, aggiungiamo un div  con la classe clearfix che forzerà  tutte le colonne  su una nuova riga, risolvendo il problema.

Offsets 
Per impostazione predefinita, le colonne si attaccano l’una all’altra senza lasciare spazio, fluttuando verso sinistra. Lo spazio in eccesso rimasto in quella fila rimane vuoto a destra.Per creare margini a sinistra delle colonne possiamo usare le classi di offset. L’applicazione di una classe .col-md-offset-2 a qualsiasi colonna la sposterà a destra, come se ci fosse una cella .col-md-2 invisibile. È possibile avere diversi offset per le diverse dimensioni dello schermo grazie ai prefissi xs, sm, md e lg. Puoi utilizzare gli offset per centrare facilmente le colonne.

Push e Pull ( Spingi e tira )
Le classi push e pull ci consentono di riordinare le colonne in base alle dimensioni dello schermo. Si sposta una colonna a destra e si tira l’altra a sinistra.Le classi push e pull hanno il seguente formato: .col-SIZE-push-numero e .col-SIZE-pull-numero . I valori   possibili sono sm, xs, md e lg. Questo rappresenta in quale dei 4 scenari di dimensioni dello schermo vogliamo effettuare lo scambio. Numero dice a Bootstrap quante posizioni vogliamo spostare.

Conclusione
Una veloce introduzione della parte più importante di Bootstrap, che vi consentirà di utilizzare per la prima volta questo framework nei vostri progetti. Ovviamente rimane ancora molto da approfondire . Tutto quello che vi serve è presente nella documentazione online di Bootstrap .

Link sito Framework  Bootstrap

Kenji Agency : creazione  siti web a Treviso