Impara la griglia di Bootstrap in 10 minuti !

 Bootstrap è il framework più utilizzato al momento. Quando si pensa di costruire siti web responsive  è il primo che si sceglie sia per professionisti sia per quelli che fanno il suo primo passo in questo campo. Chiunque che conosce HTML, CSS e un po 'di JavaScript può imparare Bootstrap in pocco tempo.

In questa rapida lezione vedremo di capire la sistema a griglia uno dei concetti fondamentali per utilizzo coretto di Bootstrap. Esso ci permette di creare layout di pagine responsive che si adattano a varie dimensioni dello schermo del dispositivo che l'utente sta utilizzando.

Come è fatta la griglia di Bootstrap e come funziona.

1. Righe e colonne

La griglia è costituita da righe( class="row") e colonne (class="col-"). Questo ci permette di posizionare liberamente gli elementi verticalmente e orizzontalmente.

Le righe sono simili a blocchi. Ciò significa, che quando si crea una fila, esso occupa l'intera larghezza dell'elemento in qui si trova. Si può pensare di righe come  linee orizontali nel layout.

L'allineamento dei elementi in orizzontale nella griglia avviene tramite colonne. Colonne(  .col) sono posiamo dire i figli diretti di una riga(.row) e tutti i contenuti dovrebbero andare al  interno di esso. Posizionando contenuti direttamente all'interno di una riga(.row) comportera la rotura di layout della pagina .

grigliBotstraprow

<!-- Errato --> <div class="row">  Il nostro contenuto </div>
<!-- Coretto --> <div class="row"><div class="col-md-12">Il contenuto va inserito qui</div> </div>

 

Nota: Le righe e le colonne hanno un rapporto speciale. Le colonne hanno 15px di padding sulla destra e sinistra in modo che il loro contenuto sia correttamente distanziato dai bordi . Tuttavia, questo creerebbe una certa differenza nella larghezza per prima e ultima colonna nella situazione quando si inserisce un row nuovo nella prima e ultima colonna . Per compensare questa inconvenienza è stato impostato in negativo margini sinistro e destro per prima e ultima colonna rispettivamente di -15px. Questo è il motivo per cui si dovrebbe sempre mettere le colonne all'interno di righe(row).

2. Le righe(row) sono divise in 12 colonne(col)

Per scoprire di piu leggi questo articolo

Le righe sono suddivise orizzontalmente in 12 parti uguali. Quando pensimo di inserire una colonna all'interno di una riga, dobbiamo specificare il numero di parti (di 12 disponibili) che occupera.

Questo viene fatto indicando un numero in coda alla classe .col  classe specifica .col-md-NUMERO,  ( .col-md indica la largezza in px dello scermo del disposito in uso per visualizzazione della pagina di piu leggi qui  ) dove come numero può essere un numero intero da 1 a 12. A seconda del numeroindicato la colonna occuperà una percentuale della larghezza di riga: 6 sarà 50% (12 / 6), 3 sarà 25% (12/3) e così via. L'esempio che segue dovrebbe rendere le cose più chiare:

<div class="row">    
<div class="col-md-12">larghezza massima</div>
</div>
<div class="row">  
   <div class="col-md-3">25%</div>  
  <div class="col-md-3">25%</div>    
<div class="col-md-6">50%</div>
</div>

Per vedere  funzionamento delle colonne e righesu varie schermi  clicca sul nome del fail che ho creato come esempio  griglia.html

3. Posizionamento colonne(col) in Bootstarp

Dobbiamo sempre tenere in considerazione, che ci sono solo 12 posti (.col   colonne ) disponibili in una linea(.row in una riga ). Se sommiamo lo spazio richiesto da una seria di colonne adiacenti e il risultato supera 12, le ultime colonne in quel gruppo dovranno passare alla riga successiva. Diamo uno sguardo ad un esempio pratico:

Le prime due colonne hanno dimensioni rispettivamente 8 e 4 (8 + 4 = 12), il che rende la prima linea (row) completa. Non c'è abbastanza spazio per la terza , quindi essa dovrà spostarsi alla riga successiva.

Leggi di piu

<div class="row">     <div class="col-xs-8"></div>     <div class="col-xs-4"></div>     <div class="col-xs-9">This column will move to the next line.</div> </div>

4. Classi dimensioni schermo

Ricordate quando abbiamo scritto .col-MD-NUMERO nella fase nel punto 2? Questo -md- acronimo di media. Bootstrap ha un certo numero di queste classi per le diverse dimensioni dello schermo di dispositivi su quali sara visualizzata la nostra pagina:

xs – Extra small schermo come un smartphone. La sintassi .col-xs-numero

sm – Small screen dispositivi come tablet. .col-sm-numero

md – Scermi di media grandeza come ad esempio  desktop a bassa risoluzione e laptop.  .col-md-numero

lg – Large, scermi di alta risoluzione. .col-lg-numero

Bootstrap prende la risoluzione dello schermo e dpi in considerazione al momento di decidere quali classi mostrare . Questo è un modo chiave nella  gestione e visualizzazione della nostra pagina web su varie dispositivi.

Quando definiamo una regola per una certa dimensione dello schermo del dispositivo, questa regola verrà presa in sonsiderazione e applicata durante la visualizzazione su tutti i schermi di dimensioni più grandi, a meno che non indicheremo noi stessi una classe per schermo grande. Prova di rimpicciolire o ingrandire la finestra del tuo browser per vedere come si adatta la nostra pagina a questi cambiamenti della larghezza dello schermo

 

5. Clearfix

In alcuni situazioni, quando una colonna posiede molto più contenuti rispetto gli altri in un row, il layout potrebbe diciamo rompersi. Le colonne con il contenuto minore saranno tutti messi una sotto l'altra, invece di passare alla riga successiva come dovrebbero.

Per evitare questo, si aggiunge un div di aiuto con la classe clearfix. Esso costringerà le colonne dopo questo div di passare per forza ad una nuova linea, vediamo l'esempio.

 

<div class="row">    
<div class="col-xs-6 tall-column">Una colonna molto più alta rispetto al resto.</div>  
   <div class="col-xs-6"></div> 
    <div class="clearfix"></div>  
   <div class="col-xs-6"></div>
</div>

6. Offset è il tuo amico

Per default, colonne sono posizionati  in un row senza lasciare spazio tra di loro. Qualsiasi spazio in eccesso in una riga(row) rimane vuoto sulla destra.

Per creare margine libero sulla sinistra di una colonna possiamo utilizzare le classi di offset. L'applicazione di una classe .col-MD-offset-2 portera alla situazione  che sulla sinistra della colonna  con questa classe  vvera creato lo spazio libero pari a  2 collone , come se ci fosse una invisibile colonna .col-MD-2 . Possiamo creare diversi offset(spazzi liberi dal contenuto ) per diverse dimensioni dello scermo grazie ai preffisi che gia conosciamo dalle colonne XS, SM, MD e LG .

È possibile utilizzare gli offset per centrare facilmente le colonne:

<div class="row">  
   <div class="col-md-6 col-md-offset-3"></div>   
  <div class="col-md-10 col-md-offset-1"></div>
</div>

Leggi di piu

7. Spingere e tirare

Le classi push and pull (spingere e tirare) ci permettono di riordinare le colonne a seconda delle dimensioni dello schermo. push premete di spostare una colonna a destra, e pull spostare verso sinistra. Questo concetto è diverso da offset ,push e pull utilizza posizionamento relativo position: relative e non spostano altre colonne.

Le classi di push e pull hanno il seguente formato: .col-SIZE-push-NUMERO, e .col-SIZE-pull-NUMERO.

I valori possibili di dimensione sono sm, xs, md e lg. Essi rappresentano i quatro tipi di scermi come abbiamo gia visto sopra e specificano per il qule scehermo procedere con cambiare  posizione.

Per esempio

<div class="row">
<div class="col-xs-4 col-md-push-8">Su schermi di portatili e desktop questo testo andrà a destra e l'immagine andrà a sinistra, cambiando il posto.</div>
<div class="col-xs-8 col-md-pull-4"><img src="/city.jpg" class="img-responsive"></div>
</div>

Legi di piu

Letto 2328 volte