Bentornati in questa lezione continueremo a lavorare con la griglia di bootstrap, in particolare ci sono
due caratteristiche principali che voglio evidenziare.
Il primo è che voglio affrontare le quattro diverse dimensioni che ho brevemente menzionato.
Abbiamo lavorato con la colonna Elgie non ha parlato di cosa significhi e ci sono altre tre
dimensioni con cui questo funzionerà.
Vogliono anche mostrarti come possiamo annidare le griglie all'interno di altre griglie per dividere ulteriormente quelle 12
unità in pezzi più piccoli.
tornando al browser e dando un'occhiata alla demo che abbiamo creato nell'ultima lezione.
Ma cominciamo parlando delle quattro dimensioni che comincerò
Quindi abbiamo due righe una che ha 12 colonne una che ha tre che attraversano e che guardano cosa
succede mentre ridimensiono la finestra, le cose cambiano bene e poi colpiamo un punto di interruzione proprio qui
dove tutto cambia in ogni colonna.
Ora occupa 12 unità complete e si impilano l'una sull'altra e mentre continuano a ridimensionarsi
non si noterà alcun cambiamento.
Continuano tutti a prendere 12 unità e si impilano l'una sull'altra.
Ma ci sono in realtà quattro diverse dimensioni che possiamo specificare in modo che possiamo avere quattro diversi layout.
In questo momento questo è un layout mobile che è un accesso extra piccolo.
Poi diventiamo troppo piccoli, che è come un tablet e quindi è un medium che è proprio qui.
Questo sarebbe su un laptop o una finestra del browser più piccola e quindi di grandi dimensioni che abbiamo proprio qui.
Quindi non sembra che ci sia molta differenza eccetto qui quando passiamo tra essere
anche grandi.
Ma ci sono quattro dimensioni e possiamo specificare i rapporti e le proporzioni per ciascuna di queste dimensioni.
Quindi, nel dock di bootstrap sotto le opzioni di griglia qui il sistema di griglia è possibile vedere c'è un tavolo
e ci mostra le quattro diverse dimensioni.
Quindi ci sono piccoli dispositivi extra come i telefoni rispetto ai piccoli dispositivi che sono dispositivi desktop tablet di
grandi dimensioni o desktop più grandi di oltre 12.000 pixel e ognuno di essi ha un prefisso che
possiamo usare in modo che l'accesso alla colonna sia davvero piccolo.
S. M. è piccolo M. D. è medio e LG è grande che è quello che stavamo usando.
Quindi diciamo che voglio che il mio layout rimanga lo stesso al grande punto di interruzione.
E poi quando passiamo al medium qui voglio queste 12 colonne che ognuna prende una singola unità.
Voglio che ognuno di loro occupi invece due unità.
Quindi finiremo con sei che attraversano.
E poi un ulteriore 6 sotto.
Concentriamoci su questo e per semplificare le cose.
Per ora mi libererò della seconda fila.
Quindi tutto ciò che abbiamo è questo qui.
Quindi, quando raggiungiamo questo breakpoint medio, non voglio che ciò accada.
Invece voglio che passino sei colonne per farlo.
Aggiungo solo in un'altra classe.
Quindi lo farò a ciascuno e sarà un mezzo colonna.
Quindi, quando questa griglia è impostata sulla dimensione media, desideriamo che ciascuna di esse occupi due unità e noi salveremo.
Ora andiamo e aggiorniamo.
Fallo a grandezza naturale.
Nulla cambia perché siamo di grandi dimensioni.
Ma ora quando passo al medium qui.
Notate che ora occupano due unità e ne otteniamo sei.
E se continuo a ridurlo, colpiamo il piccolo punto di interruzione ed è qui che passa
dove ogni colonna ora attraversa 12 unità e si impilano l'una sull'altra.
Quindi torniamo indietro e leggiamo torniamo al nostro sublime e facciamo rivivere la nostra vecchia griglia.
Quindi ci sbarazzeremo di questo perché non è così comune in realtà avere 12 componenti diversi
in corso.
Di solito stai lavorando con tre o quattro volte sei ma 12 colonne singole è piuttosto raro.
Quindi torniamo a questo e quello che faremo è provare a ricreare quella griglia che viene riprodotta dal programma del
tour di Olafur Arnold qui.
Quindi inizia alle quattro attraversando.
Quindi ci riduciamo.
C'è un punto di rottura medio e siamo ancora alle quattro e poi arriviamo al piccolo break point e
andiamo a due.
E poi mobile x o small è uno.
Questo è ciò che tenteremo di ricreare non solo il contenuto della struttura.
Quindi torneremo qui.
E vogliamo iniziare con quattro che attraversano.
Ciò significa che ognuno occupa tre unità e quindi possiamo cambiare il testo qui.
E diciamo solo di dire o data.
Quindi, se fossimo freschi dovremmo avere quattro colonne che attraversano ciò che facciamo, il che è esattamente
ciò che inizia quando quattro attraversano.
E l'unica differenza è davvero il contenuto reale.
Quindi, invece di ogni colonna dovremmo semplicemente aggiungere un pulsante H a un paragrafo e qualunque altro contenuto abbiamo bisogno
di un piccolo H. R. sembra e avremmo ancora la stessa spaziatura.
Tutto ok.
Quindi il prossimo punto di rottura è quando arriviamo alla media.
Rimane alle quattro.
Quindi quello che potresti pensare che dobbiamo fare è specificare il punto di rottura medio, così
quando lo colpiamo dovrebbero comunque occuparne ciascuno tre.
Possiamo tornare al sublime e aggiungerli e chiamarli di nuovo medium tre e salvare e ognuno di loro parte da tre unità che colpiscono mediamente e
restano a tre unità e poi ci dirigiamo in piccolo e ora sono di nuovo
12 unità.
E quello che vogliamo per seguire questo è che quando raggiungiamo le dimensioni ridotte, ora occupano ciascuna
sei unità, così possiamo entrare qui e aggiungerle nella colonna small 6.
Quindi, le grandi dimensioni ciascuna di queste occupano il 25% di tre unità su 12 con dimensioni medie.
Stessa cosa.
Prendono il 25 percento e poi, alla piccola dimensione che è per i tablet, prendono ciascuno il 50 percento.
Quindi rinnoviamo ogni ripresa tre minuti e poi tre unità, poi colpiamo piccola.
E ora prendono ciascuno sei unità e poi abbiamo avuto un piccolo extra.
Quindi prendono automaticamente le 12 unità complete che è ciò che vogliamo.
Puoi vedere quando colpiamo in piccolo, vogliamo che prendano un'unità su tutta la superficie.
Tutto ok.
Quindi abbiamo questo, c'è un piccolo cambiamento che possiamo fare se torniamo al sublime.
Vedrai che stiamo specificando queste tre unità due volte per il grande e il medio.
Possiamo effettivamente sbarazzarci della colonna di tre grandi dimensioni e mettere semplicemente la media lì dentro e il bootstrap saprà che poiché stiamo
impostando il medium come tre e non impostiamo esplicitamente il grande, sarà sufficiente prendere ciò che
impostiamo per il medio e applicare a grande.
Quindi funziona allo stesso modo.
Niente è cambiato.
Ho già un aspetto identico, il nostro breakpoint medio è ancora lì e le nostre piccole opere.
Quindi non dobbiamo specificarlo due volte.
Quindi lasciami venire N. Z. ci siamo sbarazzati di questo e funziona esattamente allo stesso modo.
E infatti se diamo un'occhiata andiamo sul sito Web.
Scommetto che se ispezioniamo ognuno di questi vedrai che ce ne andiamo.
Colonna piccola sei colonne media tre.
Esattamente quello che avevamo ora che abbiamo coperto quelle quattro diverse dimensioni.
Spero che tu possa vedere quanto può essere versatile e utile il sistema di rete.
Torniamo indietro.
E ora parlerò alle griglie di nidificazione.
Supponiamo che invece di questa prima colonna qui voglio dividerla a metà e avere qualcosa sul lato
sinistro di quello e qualcosa sul lato destro.
Posso effettivamente andare e aggiungere un'altra fila all'interno di lì.
Quindi la classe è uguale alla riga.
E poi all'interno di quella riga posso aggiungere un div con la classe uguale alla
colonna e tutto appena troppo grande per ora la colonna large six e un'altra una colonna large 6 e scriverò solo del testo qui
a metà strada e l'altra metà.
Passiamo al primo semestre e all'altra metà e salveremo e diamo loro un classico rosa.
Quindi, quello che abbiamo fatto ora è che avremo tre attraversamenti fermi o quattro.
Uno due tre quattro e nel primo l'abbiamo diviso in altre 12 unità aggiungendo un'altra riga e stiamo
usando i primi sei per dire qualcosa e stiamo usando il secondo sei per dire
qualcos'altro che salva o aggiorna .
Ecco fatto e rendilo ancora più ovvio.
Lascia che io dia loro un'altra lezione.
Chiamiamolo arancione.
Non esiste ancora
E definito questo appare arancione e avrà lo sfondo arancione e aggiungeremo in ordine un pixel rosso fisso
e quindi effettivamente fare dasht OK.
Aggiorna puoi vedere ora abbiamo ancora queste quattro cose in corso.
Ciascuno occupa tre unità, ma dividiamo il primo in sei unità e sei unità aggiungendo
quella riga e aggiungendo la riga.
Non puoi semplicemente iniziare a farlo dove hai una colonna invece di una colonna.
Ci deve essere una fila.
E facciamo un altro.
Mettiamo questo ultimo qui in sei piccoli pezzi all'interno.
Quindi abbiamo bisogno di aggiungere una riga all'interno di quella classe div uguale alla riga anziché lì.
Abbiamo bisogno di un altro div e ne avremo sei, in cui abbiamo due colonne di grandi dimensioni ciascuna occupando
due su 12 unità.
E ne vogliamo sei e poi andremo su ognuno di loro e aggiungiamo in quella classe arancione solo in modo
che possiamo vederli.
OK.
Quindi abbiamo quattro grandi colonne che attraversano la prima che dividiamo a metà.
L'ultimo che abbiamo diviso in sei pezzi e non puoi davvero vedere nulla, quindi non abbiamo inserito alcun testo.
Quindi andiamo a farlo.
O meglio, in realtà è solo dare un con o un'altezza alla classe arancione.
Facciamo ognuno 50 pixel.
E se ti aggiorno ti accorgi che ora tutto ciò che ha arancione quella classe arancione occupa un'altezza di
50 pixel.
Quindi abbiamo le nostre due colonne divise equamente e quindi le nostre sei colonne divise equamente all'interno di queste quattro
colonne di livello superiore divise in modo uniforme.
Quindi sono tutti pezzi importanti del sistema di griglia.
In poche parole abbiamo 12 unità in ogni riga.
Li dividi come preferisci.
Esistono quattro taglie di dimensioni medio piccole e molto piccole e puoi riassegnare quelle 12 unità in uno di questi quattro
punti di interruzione in quattro dimensioni diverse.
Ed è così che ti ritrovi con questi bei layout reattivi e in generale il modello che
vedi è quello sui siti mobili.
la maggior parte dei siti avrà i propri contenuti semplicemente sovrapposti l'uno all'altro come faremmo qui se riducessi il problema.
Quindi, per quanto riguarda le dimensioni ridotte,
Questo è il layout comune su dispositivi mobili in cui non ci sono più contenuti nella stessa riga.
OK.
Torniamo al sublime.
Assicurati di aver parlato dei tre obiettivi principali.
Quindi abbiamo parlato dello scopo in cui il punto del sistema di griglia ci aiuta a deporre le cose.
È meraviglioso.
Comprendere le quattro diverse dimensioni.
Quelli sono grandi piccoli di dimensioni medio-piccole e quindi griglie annidate a destra.
Ed è quello che stiamo facendo qui dove aggiungiamo una riga invece di una colonna e quindi
possiamo riempire quella riga con ulteriori sottocolonne nel prossimo video.
Stiamo costruendo una semplice griglia di immagini usando il sistema di griglia