✅ Imparare a usare la griglia Bootstrap

Sommario

Colonna a
Colonna B
Colonna C
Colonna a
Colonna B
Colonna C

Bootstrap gestisce una struttura grid-based o anche conosciuta come Griglia, che non è altro che un layout sullo schermo che ci aiuta a organizzare i nostri elementi, è come se dividessimo lo schermo in righe e colonne e lo gestissimo come una grande tabella.
Questo tipo di manipolazione ci porta a pensare ai design in un modo "unico" e nel momento in cui abbiamo un po' più di esperienza nell'uso Bootstrap Cominceremo a vedere tutto in questo modo e così guadagneremo consistenza e velocità nel nostro modo di lavorare.
La prima cosa da sapere è che questo design del Griglia ci consente di lavorare in modo da poter implementare le visualizzazioni mobili in modo nativo, questo ovviamente dalla versione 3 di Bootstrap, grazie al fatto che questa versione è stata realizzata pensando al design mobile.
Nelle versioni precedenti del framework, le classi dovevano essere specificate direttamente in modo che il nostro design avesse la capacità di adattarsi alle risoluzioni dei dispositivi mobili, ora le diverse classi del Griglia lo fanno automaticamente.
Per sfruttare questa caratteristica bisogna pensare da piccolo a grande, cioè le classi che applichiamo vanno sempre pensate come le più piccole e poi si scalerà ad altre risoluzioni, cioè se definiamo un classe sm (piccolo o piccolo), automaticamente Bootstrap presuppone che questa sia l'espressione minima e che possa quindi essere ridimensionata a md (mediana) o a lg (grande).
Prima di passare ad esempi più pratici dobbiamo capire quali sono le classi che possiamo utilizzare nelle colonne di a Griglia E dobbiamo anche sapere per quale caso ciascuno si applica, in questo modo quando progettiamo il nostro sito possiamo prendere in considerazione il dispositivo più piccolo che vogliamo raggiungere.
Con questo approccio possiamo costruire siti Mobile friendly, quanto stanno diventando importanti oggi per i motori di ricerca e i loro risultati, aiutandoci così oltre a fare buoni siti a guadagnare dei punti nella nostra reputazione SEO, con lo stesso lavoro ovviamente.
Schermi del telefonoÈ il dispositivo più piccolo che in teoria può navigare nel nostro design, sebbene le risoluzioni dei telefoni siano state gradualmente convertite in Full HD, questo è generalmente per la fascia più alta, mentre la fascia media e la fascia bassa che in teoria è la maggior parte mantiene risoluzioni molto più basse. Il tipo di Griglia che si applica a quel caso è: col-xs- e vale per soluzioni inferiori alla larghezza 768 pixel.
Schermi per tabletSono in teoria il secondo dispositivo più piccolo, grazie alla sua maggiore proporzione di dimensioni il tablet offre una superficie di navigazione più ampia, quindi possiamo utilizzare un po' più di contenuti rispetto allo schermo di un telefono, oltre a quello generalmente la navigazione sui tablet avviene in orizzontale. La classe che si applica a questo dispositivo è col-sm- e si applica alle risoluzioni con larghezze maggiori di 768 pixel e sotto 992 pixel.
Apparecchiature per piccoli schermiSono generalmente quelli appartenenti alle fasce basse di desktop e laptop, possono essere apparecchiature con schermi inferiori a 15 pollici, o che hanno più di 10 anni di vita, sono anche i laptop destinati agli studenti e al settore con bassi potere d'acquisto, questo è il settore maggioritario. La classe che si applica in questo caso è col-md- e le risoluzioni limite per la larghezza sono maggiori di 992 pixel e meno di 1200 pixel.
Apparecchiature per grandi schermiQui possiamo incasellare le apparecchiature più moderne, e anche gli schermi di oltre 15 pollici, in questa categoria stanno entrando le nuove apparecchiature come ultraportatili, risoluzione 4K o QHD anche dove stiamo vedendo superfici maggiori di 1080p. Escludendo le larghezze che tratteremo qui sono quelle maggiori di 1200 pixel, questo mentre la prossima versione di Bootstrap probabilmente.
Poiché conosciamo la teoria alla base del sistema Griglia di Bootstrap, È bene iniziare a fare la sua applicazione pratica, ma prima di vedere il codice dobbiamo capire un paio di concetti in più, dobbiamo sempre per convenzione e buone pratiche usare un elemento con la classe contenitore, poiché questo creerà il contenitore come indica il nome per mantenere le nostre diverse colonne. L'altro concetto che dobbiamo sapere è che ci saranno sempre 12 colonne, quindi le diverse combinazioni che facciamo devono tenere conto di questo numero.
Nell'esempio seguente creeremo un codice per un layout di 3 colonne grandi, utilizzeremo la classe col-md- e poiché vogliamo 3 colonne uguali quando dividiamo 12 per 3 otteniamo il numero 4, quindi questa sarà la dimensione di ciascuna delle nostre colonne risultanti.
Diamo un'occhiata al codice senza ulteriori indugi:

Griglia di bootstrap

Esempio di come utilizzare le colonne in bootstrap

Colonna a

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi hendrerit augue et laoreet aliquam. Aliquam facilita il mio in lorem pharetra, ut volutpat magna laoreet. Fusce sed mi ut turpis bibendum dictum.

Colonna B

Colonna C

La struttura è molto semplice, abbiamo creato un div con la classe contenitore, e all'interno di un div con la classe riga infine all'interno di quest'ultimo abbiamo creato 3 div con la classe col-md-4 Questa è la classe per schermi piccoli per computer non portatili, e vediamo come coniare il numero 4, che indica che ogni div di questi è equivalente a 4 colonne del Griglia. Vediamo come appare, quando eseguiamo nel nostro browser:

INGRANDIRE

Se notiamo, abbiamo 3 colonne grandi, ma cosa succede quando riduciamo la dimensione a una risoluzione inferiore al minimo della classe applicata, poiché le colonne verranno semplicemente impilate una sopra l'altra come vediamo in la seguente immagine:

INGRANDIRE

Sebbene questa non sia una cosa negativa, a volte non è il comportamento che vogliamo che il nostro design assuma, per questo possiamo includere i comportamenti direttamente con le classi per le diverse risoluzioni, vediamo nel codice seguente come cambiamo le classi del colonne diverse per ottenere un risultato diverso:

Griglia di bootstrap

Esempio di come utilizzare le colonne in bootstrap

Colonna a

Colonna B

Colonna C

Ora se notiamo nel nostro codice tutto rimane uguale tranne che per le nostre classi, dove per le colonne A e B abbiamo aggiunto la classe col-sm-6 e per la colonna C la classe col-sm-12, questo significa che quando la risoluzione viene ridotta, le classi sm governeranno, come vediamo nell'immagine seguente:

INGRANDIRE

Vediamo che nella stessa dimensione del primo esempio, invece di essere impilate, le colonne A e B diventano nella stessa regione e la colonna C prende una singola riga per se stessa. Qui vediamo la grande utilità di Griglia soprattutto con i design che si concentrano sull'essere reattivi e mobili.
Con questo finiamo questo tutorial, dove abbiamo imparato come funziona il sistema di Griglia di BootstrapOvviamente questa è solo la punta dell'iceberg, ci sono molti più contenuti che possiamo esplorare in altri tutorial, ma con questa conoscenza di base possiamo iniziare a vedere come unire i nostri progetti in modo più logico e con meno sforzo grazie a il quadro.Ti è piaciuto e hai aiutato questo Tutorial?Puoi premiare l'autore premendo questo pulsante per dargli un punto positivo