La griglia Bootstrap – Parte 1

Bootstrap è il framework di frontend più utilizzato al momento. Quando si tratta di creare siti Web e applicazioni responsive, è una delle prime scelte  per i professionisti grazie alla semplicità con cui si lavora. Chiunque conosca HTML, CSS e un po ‘di JavaScript può imparare Bootstrap in poco tempo.

In questa breve lezione parleremo del sistema di griglia, uno dei concetti fondamentali che di Bootstrap . Ci consente di creare layout di pagina responsivi che possono essere modificati e adattati in base alle dimensioni dello schermo del dispositivo .

Righe e colonne
La griglia Bootstrap è composta da righe e colonne. Questo ci permette di posizionare liberamente gli elementi verticalmente e orizzontalmente. Ogni riga che creiamo occupa l’intera larghezza dell’elemento in cui si trova. L’allineamento orizzontale nella griglia avviene tramite colonne e queste sono essere i figli diretti di una riga ( tutto il contenuto deve essere inserito al loro interno).  Righe e colonne hanno una relazione speciale. Le colonne hanno 15 px di riempimento sinistro e destro in modo che il loro contenuto sia distanziato correttamente. Tuttavia, questo spinge il contenuto della prima e dell’ultima colonna a 15px dal genitore. Per compensare, la riga ha margini di sinistra e destra negativi di 15px. Questo è un buon motivo per posizionare le colonne all’interno delle righe.

Divisione delle righe
Le file sono divise orizzontalmente in 12 parti uguali. Quando inseriamo una colonna all’interno di una riga, dobbiamo specificare il numero di parti che occuperà. Questo viene fatto applicando una classe specifica .col-md-Numero, dove Numero può essere un numero intero compreso tra 1 e 12. A seconda del numero, una colonna occuperà una percentuale della larghezza dell’intera riga: 6 sarà 50% (12 / 6), 3 sarà il 25% (12/3) e così via.

Wrapping delle colonne
Essendoci solo 12 spazi disponibili in una linea e se  lo spazio richiesto dalle colonne adiacenti supera 12, le ultime colonne in quel gruppo dovranno spostarsi sulla riga successiva. Se su tre colonne le prime due  hanno dimensioni rispettivamente di 8 e di 4 (8 + 4 = 12), che rendono piena la prima riga. Non c’è abbastanza spazio per la terza cella, quindi dovrà passare alla riga successiva.

Nella seconda parte analizzeremo le classi Sceen Size.

Link sito Bootstrap

Kenji Agency : creazione  siti web a Treviso