Torneremo in questa lezione e dimostreremo il sistema di griglia di bootstrap e il sistema di rete è probabilmente la
ragione numero uno per cui le persone usano il bootstrap per le ore di lavoro.
I pulsanti sono belle modifiche stilistiche che possiamo fare con il bootstrap, ma il sistema
di griglia bootstrap fungerà da scheletro dell'intera applicazione.
È davvero un modo facile per noi di aggiungere una struttura e di strutturare la nostra applicazione.
Quindi lascia che ti mostri alcuni esempi di cosa puoi fare con il sistema di griglia.
Ho alcuni siti aperti da Bootstrap ex-beau il primo qui è una pagina di prodotto per un lanciatore d'acqua
e scorrere verso il basso.
Notare il lay out qui.
Abbiamo tre elementi affiancati e poi notiamo anche che cambiano dimensione, quindi si ridimensionano e quando colpiscono le dimensioni
del tablet si impilano uno sopra l'altro.
Quindi questo è il sistema di griglia di bootstrap al lavoro, proprio come qui, dove abbiamo un altro effetto simile.
Si scala e quindi si impilano su tablet e dimensioni mobili.
Ecco un altro esempio.
Questo è il musicista islandese e Olafur Arnolds e questo è scorrere verso il basso su questo sito.
di griglia in modo da poter vedere un layout simile, ma non è solo che sia stato realizzato con un sistema di grid.
Abbiamo alcuni contenuti che sono stati creati con il sistema
Questo qui questo contenuto.
Queste date del tour qui.
In pratica, usando il sistema di griglia possiamo dire che vogliamo che alcuni contenuti occupino il 100% dello schermo,
quindi possiamo anche usarlo per dire che vogliamo che ognuno di questi occupi il 25% della larghezza
dello schermo fino a quando non colpiamo il lato mobile o la dimensione del tablet per ogni take up 50 ora e poi
quando colpiamo Mobile prendono ciascuno il 100 percento.
Stessa cosa fatta qui.
Ci permette di dividerlo con lo schermo in pezzi e scegliere quanti pezzi vogliamo.
Ognuno dei nostri elementi da prendere ed ecco l'ultimo che abbiamo già visto.
Si chiama creativo deserto del deserto scorrere qui contenuti simili.
Ecco il sistema di griglia e anche qui.
Quindi questo è tutto fatto con il sistema di griglia.
Tutto questo è davvero molto importante e molto eccitante.
Ci aiuta a sistemare le cose così facilmente rispetto a quello che dovremmo fare senza bootstrap.
Quindi utilizzeremo il sistema di griglia di bootstrap e praticamente tutte le applicazioni che utilizziamo con il bootstrap.
E lascia che ti mostri uno di loro.
Questa è la nostra applicazione del campo yo e notiamo che abbiamo una griglia di campeggi per across.
E mentre ridimensiono lo schermo, notiamo che si scala e quindi passiamo a due attraverso e poi giù a Mobile.
Andiamo da una parte ed è un layout mobile davvero bello e facile da usare.
Quindi questo è solo un posto dove useremo un sistema di grid.
Ora cominciamo a scrivere del codice usando il sistema di griglia in modo tale a schermo intero questa
finestra e torniamo indietro per ottenere dotcom bootstrap nella scheda Valutati.
Puoi cliccare sul sistema di griglia.
C'è un bel po 'nel sistema di rete, ma comincerò semplicemente indicando un singolo
numero qui 12.
Questo è molto importante per il funzionamento del sistema di rete.
Quindi ogni contenitore e bootstrap può essere diviso in 12 diverse colonne e quindi usando il sistema
a griglia possiamo scegliere quante di quelle 12 unità ogni elemento dovrebbe occupare.
Quindi in questo caso sembra che abbiano qualcosa che occupa circa 10 unità su 12.
E poi qui due su 12 unità o potrebbero essere nove e tre, ma hanno qualche rapporto in
cui hanno più di quei 12 sul lato sinistro e poi una piccola frazione dei 12 sul lato destro.
Quindi se torniamo al campo qui questo è il nostro contenitore proprio qui.
E ciascuno di questi su 12 unità ciascuno occupa tre unità.
Quindi finiamo con quattro colonne uguali e poi lo riduciamo qui.
Ora prendono ciascuno sei unità su 12.
Quindi, di nuovo quel numero 12 è molto importante.
Ora andiamo a destra.
La nostra primissima griglia.
un file. H t m l è vuoto tranne che per i bootstrap del file SS e per iniziare dobbiamo definire un container.
Quindi ho una griglia creata da
Ogni volta che usiamo una griglia Boucek deve essere all'interno di un contenitore.
Quindi la classe è uguale al contenitore.
E la prima cosa che dobbiamo fare è trovare un altro div con la classe uguale alla riga invece di ogni riga.
Abbiamo 12 unità tra cui scegliere.
Quindi, quello che inizieremo facendo è solo una divisione 50 50, avremo 1 div che occupa 6 su
12 e quindi un altro div che occupa 6 su 12.
Quindi facciamolo ora.
Aggiungeremo un div e poi aggiungerò anche la mia seconda divisione e al momento sono solo due dispositivi vuoti.
Non hai intenzione di lavorare.
Ma quello che farò è aggiungere una classe al primo e questa sembrerà una colonna un po 'strana Un grande
sei e faremo la stessa cosa qui.
La classe è uguale alla colonna sei.
Quindi aggiungeremo del contenuto qui.
Diranno solo colonne di sei grandi dimensioni.
La stessa cosa qui.
E mentre lo faccio risparmiamo e in realtà non vedremo molto che non vediamo la griglia stessa.
Quindi per renderlo più chiaro definirò qui una classe invece di un tag di stile.
Quello che farò è definire una classe.
Lo chiamerò semplicemente rosa e applicherò questa classe a due o due div in modo che possiamo vederli.
Quindi adesso sono solo bianchi.
Senza frontiere
Solo un po 'di testo.
Ma se aggiungiamo questo.
Così rosa
E poi vogliamo che lo sfondo sia rosa e faremo un bordo viola di un pixel solido viola e
poi applicheremo la classe rosa a queste due div.
Ciascuno occupa sei unità.
Ora torniamo indietro e aggiorniamo.
Eccoci.
Puoi vedere che abbiamo due div che occupano esattamente la metà del contenitore.
Il contenitore inizia qui e qui.
E ci siamo divisi in due.
Quindi ora possiamo tornare indietro e giocare un po 'di più e proviamo ad aggiungere una terza colonna.
E questa volta la colonna centrale sarà composta da otto unità, quindi la sinistra e la destra saranno due.
Quindi finisco e cambierò questi numeri qui.
Eccoci.
Finiremo con una bella colonna centrata nel mezzo e poi due colonne più piccole a sinistra ea destra che
potremmo usare per una barra laterale o qualcosa del genere.
Quindi questo è un concetto molto basilare che sta alla base di tutto il sistema di griglia di bootstrap.
Abbiamo 12 unità che attraversano qualsiasi contenitore in cui stiamo lavorando e possiamo progettare quelle
12 unità nel modo che vogliamo.
Quindi potremmo fare 12 singole colonne ciascuna una colonna più grande e potremmo farlo
12 volte proprio così.
Assicurati di non perdere il conto.
Eccoci.
E poi ci libereremo di questi due per ora.
E se fossi fresco vedrai in una fila che abbiamo 12 colonne di dimensioni uguali.
Ognuno prende una unità e poi ti mostrerò anche che possiamo aggiungere altre righe.
Quindi facciamolo ora che la classe div è uguale alla riga e andrà solo sotto questa prima riga che abbiamo.
Quindi all'interno di questo facciamo div.
La classe è uguale alla colonna Dasch grande e facciamo quattro.
Quindi lo divideremo in tre unità di dimensioni uguali.
Quindi la colonna si arresta per lei andare così.
Andiamo a dare un'occhiata ora e puoi vedere che non abbiamo applicato la classe rosa, ma abbiamo creato tre colonne di
dimensioni uguali che scendono al di sotto delle 12 colonne di dimensioni uguali.
Quindi potremmo aggiungere alla classe rosa solo per rendere più facile vedere cosa sta succedendo.
E noi andiamo.
Quindi questo è solo un semplice esempio.
In realtà non avresti queste scatole rosa molto probabilmente sul nostro sito.
Ma come puoi vedere qui abbiamo una griglia in cui abbiamo file e ogni riga ha quattro colonne che attraversano.
Ognuno è largo tre unità o qui su questo sito Tim creativo.
Abbiamo tre colonne che attraversano ciascuna una larghezza di quattro unità.
La stessa cosa qui.
Tre colonne che attraversano qui.
Abbiamo quattro colonne.
Ognuno ha tre unità di larghezza.
Ecco le basi della griglia nel prossimo video.
Parleremo di come rendere la griglia reattiva e avere layout diversi a diverse dimensioni.
In questo momento abbiamo lavorato con una colonna di grandi dimensioni.
dimensioni e vedremo quelle nel prossimo video e vedremo anche come possiamo scrivere griglie annidate
in cui possiamo aggiungere un'altra riga all'interno di una di queste colonne e dividere quella in ulteriori 12 pezzi.
Ho spiegato con molti mezzi e ci sono altre tre