Come funziona la sistema a griglia di Bootstrap 3

Bootstrap 3 è basato su una sistema a griglia a 12 colonne che è stata progettata principalmente per i dispositivi mobili. Nella framework  Bootstrap ci sono quattro dimensioni della griglia.

Principali nozioni su Bootstrap.

  1. Introduzione a Bootstrap
  2. Colegare fail di bootstrap
  3. La sistema a grglia
  4. Offset in Bootstrp. Spazio fra le colonne
  5. Ordine delle colonne
  6. La prima pagina html su Bootstrap
  7. Header con bootstrap
  8. Come realizzare menu responsive con Bootstrap
  9. Formatazione del testo.
  10. Come creare bottoni con Bootstrap
  11. Come rendere immagini responsive con Bootstrap
  12. Carosello bootstrap
  13. Bricioli di pane con Bootstrap
  14. Come realizzare accordeon

La guida completta si possa trovare sul sito ufficiale GetBootstrap.com, cliccando su «CSS» dal menu principale e selezionando «sistema a griglia» sulla destra. Invece qui, in questo articolo cerchero di dare la mia spiegazione del funzionamento della sistema.

Cercherò di spiegare tutto atraverso un esempio. Hai solo bisogno di aprire il file griglia.html clicandolo il link e in un altra scheda in forma di una pagina web sara aperto il mio esempio. Cosi potrai procedere con la letura di questo articlo e ridurere la finestra del tuo browser con il fail griglia.html nel momento giusto seguendo le spiegazioni vedrai i cambiamenti.

La sistema  a grigli di  Bootstrap si basa sul concetto che la pagina  viene divisa in righe(row ) e le righe vengono divisi in 12 colonne (col) uguali e gli schermi di dispositivi in base della larghezza sono divise in 4 tipi: grande(.lg), medio(.md), piccolo(.sm) e molto piccolo(.xs)(che  potete vedere nel esempio citato sopra griglia.html)

Un gruppo di ellementi html  (ad esempio,  div con del contenuto ) che si desidera posizionare in orizontale è necessario racchiudere in unica scatola  (utilizando il  tag <div> ) e attribuire ad  essa la classe .row (il nostro tag di apertura avra questo aspeto < div class = "row">).

 

 

grigliBotstraprow

    <div class="row">
        <div class="col-lg-6"><p>Sono la prima colonna </p></div>
        <div class="col-lg-6"><p>sono la seconda colonna</p></div>
    </div>
    <div class="row">
        <div class="col-lg-4"><p>Sono la prima colonna </p></div>
        <div class="col-lg-4"><p>Sono la seconda colonna </p></div>
        <div class="col-lg-4"><p>Sono la terza colonna </p></div>
    </div>

Sono la prima colonna

sono la seconda colonna

Sono la prima colonna

Sono la seconda colonna

Sono la terza colonna

Nel esempio sopra con il bordo rosso ho evidenziato righe(row) e con il colore nero colonne(col)

Dopo di che questi elementi si può distribuire uno dopo altro affiancati in orizontale utilizzando per esempio classi  .col-xs  o .col-md  (in questo caso abbiamo indicato  la taglia molto piccola  o media  delle cellule nelle colonne, piu avanti vediamo nel detaglio la diferenza fra varie taglie  ).

La strutura a griglia di Boootstarp

 Suponiamo che avete bisogno di ottenere come risultato tre colonne di uguale largezza, in questo caso  è necessario dividere 12 (quantita delle colonne previste dalla griglia di Bootstrap 3 ) per  3 (il numero voluto di colonne). Nel codice  html significa che per ogni colonna .col (create con il tag <div > nel markup html di piu nel corso  CSS pratica ) avremo bisogno di aggiungere la stessa classe   <div class = "col-md-4">. Se avete bisogno  di colonne con largezza diversa è necessario mantenere solo la condizione in cui i numeri dopo la col-md- in tutte le  classi fanno la somma  di 12 (ad esempio, col-md-4 col-md-6 col-md-2).

2

Classi delle colonne in Bootstrap 3

Ma prima vedimo di capire cosa significa md per esempio o xs in queste classi.
Qui sotto vediamo nel detaglio la spiegazione del significato di ogni classe nella griglia a 12 colonne di Bootstrap.

Apri anche il mio esempio nel fail griglia.html come avevo gia spiegato sopra.

21 06 201422 20 47

 

Per prima abbiamo la rette piu piccola  (nella colonna «Extra small devices »), sviluppata per i dispositivi mobili con le  dimensioni dello schermo, che sono inferiori alla larghezza di 768 pixel. E le colonne create con questa classe di bootstrap sulla nostra pagina saràno sempre visualizzati affiancati in orizzontale, su  schermi di qualsiasi dimensioni, ed elementi della pagina in queste colonne non si sposterano nella riga succesiva  per mancanza dello spazio in largezza . 

Noti che il prefisso della rette piu piccola è  col-XS.

Se le dimensioni dello schermo del dispositivo varia da 768 a 992 pixel (per adesso maggiormente sono tablet ),  si avvicinano alla griglia di bootstrap, progettata per dispositivi di piccole dimensioni. Si chiama piccolo (smoll), e per la sua classe di  prefissi  viene utilizzata la combinazione  col-sm.(colonne per dispositivi piccoli)
Per dimensioni dello schermo di dispositivi superiore a 992 e inferiore a 1200 (principalmente computer desktop o laptop), abbiamo un altra unita di misurazione e respettiva classe. Si chiama la media, e prefisso dei questa classe  è  col-md.

Beh, per monitor con una dimensione  più di 1200 pixel di larghezza, entra in gioco la misura piu grande della griglia di  Bootstrap e che si chiama larga e la classe è  col-lg.

Gli elementi HTML racchiusi nelle ultime tre classi rimaneranno posizionati in orizzontale e afiancati uno ad altro solo quando le dimensioni della larghezza dello schermo supera  di un punto la larghezza minima indicata nella tabella sopra in px per esso, prima  di un "collasso"(spostamento nella riga sottostante).

Ad esempio, in caso che abbiamo due colonne  con la classe col-lg in una riga con la clase class="row" alle dimensioni dello schermo inferiore a 1200 pixel, esso non saranno piu posizionati afiancati  in orizzontale ma  la colonna sulla  destra sara spostata nella riga sottostante e la nostra struttura diventerà verticale. Sulla pagina del sito ufficiale GetBootstrap.com, che ho citato potete vedere diversi esempi e spiegazioni in proposito. Tuttavia, a mio parere, li è tutto  un po 'confuso e difficile da capire.

L'esempio del sistema a griglia Bootstrap 3.

 

 

Dalla teoria alla pratica !

Vediamo cinque esempi di layout del sito, costruito su diversi tipi di griglia bootstrap:

dis1    La prima riga è creata utilizzando tutti i quattro i sistemi di rete attualmente disponibili nel bootstrap (sto parlando del codice al interno della pagina griglia.html se l'apri questo fail con un editore di codice potrai vedere i classi attribuiti alle colonne <div class="col-lg-4 col-md-1 col-sm-5 col-xs-5">). E a seconda della risoluzione dello schermo del dispositivo, che state utilizzando per visualizzare la pagina ,  vedrai il nome della classe  della colonna , che viene utilizzata in ciascuna delle celle (ora sulla prima riga è scritto che si utilizza la maglia grande, e nelle cellule  «col(colonna )-lg(larga)» - ) . Riducendo la larghezza dello schermo, queste etichette cambieranno.

Nelle altre righe del esempio, quelli che seguono la prima, viene utilizzata solo un tipo della maglia della griglia di bootstrap - molto piccole, piccole, medie e grandi dimensioni (in questo ordine).

sistema a grigli Bootstrap

Così possiamo osservare e confrontare come funzionano le varie dimensioni della griglia di  Bootstrap 3 come operano insieme e separatamente (utilizzando un solo tipo). Doto che il mio  browser quando facevo uno screenshot aveva la larghezza superiore di 1200 pixel allorasi poteva vedere tutti questi cinque esempi di layout del sito afiancati orizzontalmente (colonne affiancate lungo la larghezza dello schermo).

Ora, cerchiamo di limitare la dimensione in pixel della finestra del browser scendendo sotto  1200px ma rimanendo sopra  992 pixel e vediamo il risultato.
dis3

Il titolo della nostra pagina di esempio è cambiato e indica che siamo passati ad uno schermo piu piccolo e gli prefissi di classi nelle  cellule cambiano (per questo sono state utilizzate classi dei quali ne parleremo dopo ). Ora proviamo di rimpicciolire ancora lo schermo per arrivare alla classe media della griglia, che colonne con questa classe  appaiono ancora in senso orizzontale. Allo stesso tempo, le colonne con la classe col-lg(largo) vengono riposizionati in verticale e non possono affiancare una l'altra con queste dimensioni dello scremo .

Posiamo notare che le colonne con la classe col-lg(largo) (ultima riga del disegnio) non subiranno nessuna influenza da altri colonne e si allargano per tutta la larghezza dello schermo inferiore del 1200 px . (tutto questo si puo vedere nel fail grigli.html scaricato e apperto nel browser). Tutte le altre classi usati nell'esempio mantengono il suo ordine e mantengono la  struttura orizzontale. Nella prima riga, abbiamo inserito una sistema con diversi classi e vediamo che la nostra struttura in questa riga e passata alla classe media e non c'e più quella col-lg(larga) perche non funziona piu con la grandezza dello schermo inferiore a 1200 px ma viene subito sostituita dalla class col-md nel nostro esempio .

Vediamo di ridurre ancora la dimensione della finestra del browser in largezza in modo che fosse più di 768 ma meno di 992 pixel. Vediamo un altro aspetto della nostra griglia:

dis4

dis4,1

E come avete capito o cominciate di capire, abbassando ancora la larghezza del nostro browser raggiungeremo il momento quando non saranno piu le  colonne affiancate ma avremo esse tutti riposizionati in verticale per rendere visibile il loro contenuto e per dare possibilità anche ai possessori di dispositivi più piccoli leggere e navigare su internet.

Questo è il concetto di siti responsive che si adattando allo schermo del utente non attraverso rimpicciolimento della pagina intera ma riposizionando i varie moduli da  in orizzontale in quella in verticale.
E nella lezione successiva vediamo di realizzare la nostra prima pagina responsiva con Bootstrp basandosi su nozioni che abbiamo aquisito oggi.

E dove posiamo utilizzare queste nozioni? Sicuramente per creare un sito responsivo per non perdere utenti che ci entrerano da dispositivi mobili.

Letto 2554 volte