Nella lezione precedente,
abbiamo imparato a conoscere il design reattivo.
Abbiamo anche brevemente menzionato che il sistema di griglia Bootstrap è
progettato per supportare siti web responsive.
In che modo la griglia Bootstraps supporta questo?
E cosa comporta esattamente la griglia Bootstrap,
che ci consente di progettare siti web reattivi?
Parliamo un po 'più di dettaglio sul sistema di griglia Bootstrap
e su come supporta la reattività successiva.
Abbiamo visto l'uso del meta tag viewport nella lezione precedente,
quando abbiamo fatto l'esercizio iniziale sulla configurazione di Bootstrap nella nostra pagina index.html.
Ho brevemente fatto riferimento a questa particolare riga nel codice allora.
Proviamo a capire perché lo usiamo nella nostra pagina index.html.
Quello che stiamo specificando qui è che,
quando la nostra pagina web viene renderizzata dal browser in un particolare dispositivo, quindi,
il loro rendering nel browser terrà conto delle dimensioni dello schermo e
adatterà automaticamente il rendering della pagina alla larghezza dello schermo dei dispositivi.
In questo modo, allora abbiamo classi reattive,
classi CSS integrate nel nostro framework UI,
quindi che garantirà che la nostra pagina web sia
correttamente renderizzata per quella particolare dimensione dello schermo.
Qui è dove il sistema di griglia Bootstrap viene in nostro soccorso e
ci permette di progettare siti web responsive.
Quindi, ancora una volta, sottolineando questo punto, la
griglia Bootstrap è progettata per essere reattiva.
Hai già visto cosa significa nella lezione precedente,
e mobile prima, che abbiamo già discusso nella lezione precedente e poi fluido,
adattandosi automaticamente alla larghezza dello schermo.
La griglia Bootstrap sfrutta il layout flexbox CSS.
Il layout flexbox CSS, supportato
dalle versioni più recenti dei vari browser,
consente opzioni di layout molto più semplici e flessibili in CSS.
Ora, la discussione effettiva di
come il layout flexbox CSS funziona va oltre lo scopo di questo corso,
ci limiteremo a come CSS flexbox viene
sfruttato da Bootstrap per il suo sistema di griglia.
In precedenza Bootstrap aveva un proprio sistema di griglia che era precedente al layout flexbox CSS,
ma l'ultima versione di Bootstrap
ha reso il layout flexbox CSS come standard per la griglia Bootstrap.
Questo layout flexbox può facilmente gestire il
contenuto dinamico e può adattare i contenitori al contenuto dinamico,
e può anche adattarsi facilmente alle dimensioni sconosciute
del contenuto reale racchiuso all'interno dei contenitori.
Il layout flexbox supporta anche il layout indipendente dalla direzione.
Ciò che il layout flexbox porta alle griglie Bootstrap è la possibilità di
eseguire un facile allineamento verticale del contenuto all'interno di un elemento genitore.
Vedremo l'uso di questo nell'esercizio che segue.
Inoltre, consente un facile riordino del contenuto
su diversi dispositivi e risoluzioni dello schermo con l'aiuto di query multimediali.
Ancora una volta vedremo un po 'di questo nell'esercizio su come Bootstrap
lo sfrutta per supportare modi interessanti di stendere i contenuti.
Inoltre, tale contenuto stesso,
i contenitori di contenuto possono anche essere progettati per essere colonne di uguale altezza in modo che
il contenitore di contenuto con
l'altezza maggiore determini l'altezza di tutti i contenitori rimanenti disposti nella stessa riga.
Parliamo ora un po 'più di dettagli sulla griglia Bootstrap e su come funziona effettivamente.
Il modo in cui funziona la griglia Bootstrap,
è applicando un contenitore più al livello più esterno.
Potremmo usare un div per
definire l'elemento per il quale applichiamo la classe contenitore in generale.
Il contenitore è l'unità esterna all'interno della quale è disposto il contenuto effettivo.
Bootstrap supporta sia la classe contenitore che è un layout a larghezza fissa,
il che significa che il contenuto stesso è limitato a una larghezza fissa sullo schermo.
Questa classe contenitore consente a questa larghezza fissa di adattarsi automaticamente alle
dimensioni dello schermo utilizzando query multimediali in modo che
sia lì che il design reattivo entra in nostro soccorso.
Più tardi, vedremo come questo contenitore si adeguerà alle diverse dimensioni dello schermo.
Ora, abbiamo anche la flessibilità di utilizzare in
altri liquidi contenitori classici che consentono
al contenitore di adattarsi automaticamente alle dimensioni dello schermo.
Ma il contenitore a larghezza fissa,
corregge la dimensione della larghezza effettiva del layout.
All' interno del contenitore, il contenuto sarà disposto sotto forma di righe,
quindi in genere quello che faremmo è dentro
e fuori div a cui applichiamo la classe contenitore,
includeremo un div interno a cui applicheremo la classe riga.
Quindi, il contenuto stesso sarà diviso verticalmente in più righe.
E una volta che questo è diviso in righe, all'interno di ogni riga,
è quindi possibile layout del contenuto utilizzando colonne.
Quindi, ogni riga in Bootstrap,
sarà divisa in 12 colonne di dimensioni uguali.
Ora, è possibile progettare il contenuto in modo da occupare qualsiasi numero di queste 12 colonne.
Quindi, e il fatto che il contenuto stesso si adatti alla
larghezza dello schermo e alla riga stessa
racchiusa all'interno del contenitore si adatterà automaticamente alla larghezza dello schermo,
e anche alle colonne,
verranno determinate le 12 colonne.
Le loro larghezze saranno determinate dalla riga da sola.
Quindi, il che significa che per uno schermo di dimensioni diverse,
qualunque contenuto si disponga tutte quelle 12 colonne
si adeguerà automaticamente alla larghezza consentita per il contenuto.
Quindi, questo è il modo in cui la reattività è
incorporata nel modo della griglia Bootstrap di disporre il contenuto.
Quindi, come esattamente impagliamo il contenuto?
Ne parleremo nelle prossime diapositive.
La griglia Bootstrap stessa,
ci mette a disposizione cinque classi per specificare diverse dimensioni dello schermo per impostazione predefinita.
Esiste una classe predefinita che si rivolge a tutte le dimensioni dello schermo,
a partire da extra small a extra large.
Quindi l'intera gamma di larghezze dello schermo in termini Bootstrap,
è divisa in
dimensioni dello schermo extra small, small, medium, large ed extra large.
In una
delle diapositive successive, vedere come vengono determinate in dettaglio queste diverse classi di dimensioni dello schermo.
Quindi, all'interno del tuo codice,
identificherai la specifica del layout
specificando sm per le dimensioni dello schermo piccolo
, md per medium, lg per large
e xl per schermi extra large.
Quindi, quando si esegue il layout,
come abbiamo visto nella diapositiva precedente,
ogni riga in un sistema di griglia Bootstrap è divisa in 12 colonne.
Ora, ci layout contenuti utilizzando ciò che viene chiamato come le classi di colonna.
Per le classi di colonna,
possiamo specificare come il layout è fatto per diverse larghezze dello schermo.
Osservare i dettagli di questo nelle diapositive successive più avanti.
Ma permettetemi di attirare rapidamente la vostra attenzione su come specifichiamo le dimensioni delle colonne.
Potrebbero specificare le dimensioni delle colonne come col,
che è una delle classi che diranno col-sm per
small e col-md per medium e large e extra large e così via.
Ora, queste classi di colonna vengono utilizzate per specificare
esattamente quante colonne in una riga occuperanno ogni pezzo di contenuto.
Come funziona?
Lo vedremo nella prossima diapositiva.
Quindi, tornando alla nostra griglia Bootstrap,
supponiamo di avere un pezzo di contenuto e vogliamo disporre la pace dei contenuti.
Possiamo specificare che quel contenuto è racchiuso all'interno di un altro div,
a cui applichiamo classe colonna,
come ad esempio, col-sm-5.
Quindi, in questo caso, ciò che stiamo specificando è che per schermi di dimensioni piccole o extra grandi,
questo pezzo di contenuto occuperà cinque colonne su quelle 12 colonne.
Ora, mi chiederai subito,
che mi dici del fumo extra?
Se non è specificato esplicitamente per la lockette extra intelligente
dall'intera larghezza delle 12 colonne,
possono specificare esplicitamente da quale intervallo a
quale intervallo il layout delle colonne occuperà quante colonne.
Quindi, in questo caso particolare,
quando specifico che li chiamo solo sm-5,
quello che voglio dire è che questo particolare contenuto che è racchiuso all'interno di quei div,
occuperà cinque colonne per tutte le dimensioni dello schermo,
dal piccolo fino al più grande.
Ora, vediamo che tra le 12 colonne,
abbiamo già occupato cinque colonne.
Ci sono ancora sette colonne rimaste.
Potrei prendere un altro pezzo di contenuto e poi posizionarlo a destra di questo,
difendendo un altro div e quindi applicando la colonna sm-7.
Ora, in questo caso,
vedi che 5 più 7 è uguale a 12.
Quindi, questi due pezzi di contenuto che sono racchiusi nei due div,
ora saranno posizionati fianco a fianco,
e la somma totale di essi sta occupando l'intera larghezza di 12 colonne.
Quindi, questo è il modo in cui possiamo specificare e il lavoro con le 12 colonne
nella definizione del layout del livello corrente.
Con l'uso del layout della scatola flessibile CSS,
Bootstrap supporta anche quelle che vengono chiamate le colonne di layout automatico.
Quindi, in questo caso,
posso semplicemente specificare la
colonna sm senza specificare quante colonne dovrebbe occupare.
Ma nel caso in cui specifichi tre colonne di larghezza Doobs sm nel mio heml 5,
la griglia di bootstrap posizionerà automaticamente questi contenuti all'interno di quei div
, fianco a fianco, in modo
che ognuno di essi ottenga un terzo della larghezza totale.
Quindi, dato che abbiamo 12 colonne qui,
ognuna di queste tre otterrà quattro colonne ciascuna.
E questo viene automaticamente curato dal meccanismo di layout bootstraps.
Ora, possiamo specificare esplicitamente
il numero di colonne occupate da un particolare pezzo di contenuto.
Quindi, per esempio, supponiamo di specificare tre classi di colonna,
ma quella centrale specifica la colonna sm 6.
Quindi quello che succede è, quando il bootstrap fa
il layout, quello centrale occuperà sei colonne,
e poi i pezzi di contenuto sinistro e destro occuperanno tutto ciò che viene lasciato fuori.
Quindi, delle 12 colonne che abbiamo,
se 6 colonne occupate dal pezzo centrale del contenuto,
allora abbiamo lasciato con noi 6 colonne e che sarà equamente
diviso tra il contenuto e i due lati di questa colonna centrale.
Quindi, ognuno di loro otterrà colonne libere di spazio ciascuno.
Quindi, questo è il modo in cui il layout viene eseguito automaticamente con Bootstrap.
Nell' esercizio, vedremo varie combinazioni di utilizzo di questo tipo di
specifiche di quante colonne ogni pezzo di contenuto occuperà nel layout dei colori.
Questa tabella riassume il modo in cui Bootstrap tratta
le diverse griglie dello schermo e in modo corrispondente le modalità di identificazione delle griglie dello schermo.
Quindi, come ho specificato in precedenza,
Bootstrap divide l'intero intervallo di larghezza dello schermo in 5 classi.
Gli schermi più piccoli sono quelli le cui griglie sono inferiori a 776 pixel.
Schermi piccoli sono quelli che sono compresi tra 576 e meno di 768 pixel.
Schermi medi da 768 a 992,
grandi da 992 a 1200 e qualsiasi larghezza di 1200 pixel
è considerato uno schermo extra large.
Quindi, questo è il modo in cui è configurata la griglia di Bootstrap predefinita.
Ora, una volta che ti senti a tuo agio con Bootstrap,
puoi anche configurare queste divisioni tu stesso.
Ma per questo corso,
continueremo con la configurazione predefinita supportata da bootstrap.
Ora, il comportamento della griglia in questo caso,
è che qualunque cosa sia disposta per extra piccola,
sarà orizzontale in ogni momento,
per i bit più alti saranno compressi alla larghezza 2start,
ma orizzontale sui punti di interruzione.
Vedremo come funziona in breve tempo con alcuni esempi.
Ora, abbiamo visto l'uso del contenitore nella diapositiva precedente.
Per gli schermi più piccoli,
la larghezza del contenitore viene determinata automaticamente dalla larghezza dello schermo.
Ma per le piccole, medie,
grandi ed extra grandi,
la larghezza del contenitore è come specificato.
Quindi, se usi il div con un contenitore di classe,
per gli schermi piccoli è di 540 pixel.
Quindi, noterai che se hai una larghezza dello schermo compresa tra 576 e 768,
il tuo contenuto sarà disposto in 540 pixel,
sarà centrato nella larghezza dello schermo.
Quindi, lo spazio rimanente verrà lasciato come margini su entrambi i lati di questo contenuto.
Allo stesso modo, per il medio è 720 pixel e così via.
A questo punto si specifica il numero di colonne occupate da ciascun contenuto.
Quindi i prefissi della classe di colonna che userai
è.col per extra small, .col-sm per small,
fino a extra large.
Se si specifica qualcosa con.col-md
, questo vale per schermi medio-extra grandi.
Quindi, ogni volta che specifichi qualsiasi col- e alcuni numeri,
allora questo vale per quella particolare dimensione dello schermo e tutto ciò che riguarda quella dimensione dello schermo.
Ora, in tutti i casi di dimensioni dello schermo,
il numero di colonne è definito come 12 colonne.
La griglia in caso di bootstrap è progettata per essere 12 colonne e che è configurabile,
ma il valore predefinito è 12 colonne.
La ragione per scegliere 12 è che 12 è un buon multiplo di due, tre,
quattro e così via.
Quindi ti dà molta flessibilità in termini di
quante colonne scegli di disporre i tuoi contenuti.
Tra ogni colonna, quindi se
disponi due pezzi di contenuto fianco a fianco con i loro div,
tra questi due pezzi di contenuto saranno una piccola grondaia che verrà lasciata.
Spazio vuoto che verrà lasciato fuori larghezza la larghezza della grondaia,
che è di soli 30 pixel per impostazione predefinita.
Quindi, 15 pixel provengono da un pezzo di contenuto e 15 pixel da un altro pezzo di contenuto.
SumTotal insieme 30 pixel di
spazio bianco verranno lasciati tra le due parti di contenuto.
Pensa a come
viene fatto un layout di colonna giornale e si inizia a vedere la corrispondenza tra
il layout colonna giornale è fatto e come
la griglia del bootstrap fa il layout del contenuto su quel campo.
La griglia di Bootastrap consente di eseguire contenuti di livello successivo, in
modo da poter racchiudere contenuti all'interno del contenuto e quindi eseguire il layout del contenuto annidato.
Inoltre, supporta gli offset.
Vedremo l'uso degli offset anche in alcuni esempi più avanti.
Quindi diamo un'occhiata al nostro primo esempio di come applicare le classi di colonna bootstraps
e come sarebbero effettivamente renderizzate su diverse dimensioni dello schermo.
Ecco un esempio di una situazione in cui ho applicato ai due div, il
trattino della colonna 12 e poi il trattino della colonna sm il trattino cinque per
il pezzo rosso di contenuto e per
l'altro ho applicato il trattino della colonna 12 e la colonna sm sette.
Quindi il modo in cui questo contenuto sarà disposto è per schermi extra piccoli,
i due pezzi di contenuto saranno impilati uno sopra l'altro.
Quindi quello rosso sarà impilato in cima a quello di colore verde mare.
Ma per schermi da piccoli a extra large,
i due pezzi di contenuto saranno disposti fianco a fianco.
La ragione di questo è perché abbiamo detto colonna sm cinque e colonna sm sette per i due.
Quindi, per i piccoli o extra large sono disposti fianco a fianco in modo
che il contenuto rosso occupi
le cinque colonne più a sinistra e il contenuto verde del mare occuperà le sette colonne giuste della tua riga,
tutto il modo dalle dimensioni dello schermo più piccole alle dimensioni extra grandi.
Quindi questo è il modo in cui vorremmo specificare il layout del contenuto per diverse dimensioni dello schermo.
Bootstrap fornisce anche classi aggiuntive chiamate come
le classi Ordine trattino che consentono di riordinare il contenuto sullo schermo.
Quindi, per esempio, se applichi prima un ordine sm,
un ordine qualche ultima classe ai div,
come mostrato nell'esempio qui, in questo caso,
il div per il quale applichi
l'ordine sm last verrà spinto sul lato destro dello schermo e order
sm first div sarà spinto verso il lato sinistro del schermo.
Quindi, l'applicazione di queste classi di ordine consente di riordinare il contenuto sullo script.
Non solo questo, l'ordine sm permette anche di specificare lo stesso ordine sm one per
ordinare sm 12 per specificare l'ordine in cui il contenuto deve essere reso sullo schermo.
Quindi, utilizzando un numero maggiore,
è possibile spostare il contenuto sul lato destro
della riga e un numero più piccolo sposterà il contenuto sul lato sinistro della riga.
Vedremo un esempio di questo anche nell'esercizio.
L' interessante supporto misto che Bootstrap Grid porta con l'uso
del layout Flexbox è l'allineamento verticale dei contenuti.
Le versioni precedenti di
Bootstrap, come Bootstrap 3 e precedenti,
non avevano la possibilità di eseguire l'allineamento verticale del contenuto.
Con l'uso del Flexbox per la progettazione della griglia Bootstrap in Bootstrap quattro,
otteniamo la flessibilità che CSS Flexbox offre in termini di allineamento verticale.
Quindi, se si desidera che il contenuto sia centrato verticalmente,
quindi alla riga,
si applicherà la classe chiamata «align items center».
Quindi in questo caso, qualunque sia il contenuto sia disposto,
verrà disposto verticalmente allineato all'interno di quella particolare riga.
Quindi il contenuto che occupa
l'altezza più grande sarà quello a cui i restanti saranno
allineati quando è disposto in quella riga o se si prespecifica l'altezza della riga,
allora tutto il contenuto sarà centrato verticalmente all'interno di quella particolare riga lì.
Non solo, la griglia di Bootstrap supporta anche l'allineamento orizzontale dei contenuti.
Diamo un'occhiata ad un esempio.
Quindi, se specifichi il tuo contenuto in questo modo.
Supponiamo che tu abbia tre colonne e la prima che specifichi
la colonna di classe div tre, poi quella centrale div class column auto.
Tornero' a quella colonna auto tra poco.
E quello giusto dice la colonna della classe div 3.
Quindi, in questo caso, ciò che stiamo specificando è che i
pezzi di contenuto sinistro e quello più a destra occuperanno tre colonne ciascuna.
Quello centrale, quando dico, «colonna auto»,
significa che il numero di colonne che
occupa questo particolare div sarà determinato automaticamente dal contenuto che è racchiuso lì dentro.
Quindi, in base al contenuto,
il numero di colonne occupate dal div si regolerà automaticamente.
In questo caso particolare, in questo layout,
quel particolare contenuto viene ospitato all'interno di quattro colonne.
Quindi ora hai quattro colonne utilizzate dal div centrale,
tre colonne a sinistra e tre colonne a destra.
Quindi somma totale, hai 10 colonne.
Quindi hai due colonne che sono rimaste vuote.
Ora, se si specifica per la riga,
si specifica il centro contenuti giustificare, quindi,
l'intero contenuto in questa particolare riga verrà centrato
rispetto alla riga orizzontale.
Puoi anche avere il contenuto giustificato a sinistra, a
destra e un paio di altre opzioni.
I dettagli sono nella documentazione di bootstraps.
Bootstrap consente anche di eseguire offset di colonna.
Come funziona? Diamo un'occhiata ad un esempio.
In questa colonna offset,
siamo in grado di specificare un pezzo di contenuto,
aggiungere a che se applichiamo la classe come trattino offset sm trattino uno.
Quello che stiamo specificando è per schermi piccoli o extra large,
questo pezzo di contenuto dovrebbe essere spostato a destra di una colonna.
Quindi, quando questo contenuto è disposto, come puoi vedere,
la colonna più a sinistra viene lasciata vuota e il contenuto viene spostato a destra di una colonna.
E puoi impaginare il contenuto rimanente sul lato destro.
Quindi somma totale, puoi vedere che i due div
occuperanno 11 colonne ma una colonna offsettata a destra.
Quindi è così che possiamo controllare il layout del contenuto utilizzando un offset di colonna.
Quindi, come puoi vedere,
usando le specifiche della dimensione della colonna,
l'allineamento verticale e orizzontale,
l'offset, la spinta e la trazione,
e il flex prima e l'ultimo,
siamo in grado di ottenere un sacco di controllo su come disponiamo i
contenuti per diverse larghezze dello schermo e diverse dimensioni dello schermo .
Bootstrap va ancora oltre permettendoti di nidificare il contenuto all'interno di div.
Ad esempio, se si specificano due div,
come si vede con la colonna sm five e la colonna sm seven,
i due contenuti saranno disposti come si vede qui.
Ora, all'interno del div destro,
posso nuovamente entrare e dividere la
larghezza di quel div in una riga e poi quella riga mi darà automaticamente
altre 12 colonne per quella parte dello schermo e quindi posso fare il layout usando la
nidificazione dei div e fare il layout per diverse parti di quella colonna .
Quindi, annidare in questo modo,
ti offre ancora più flessibilità nel modo in cui disponi i i contenuti nel tuo campo.
Con tutta la discussione sul Bootstrap Grid System e su come
la griglia Bootstrap supporta vari modi di layout dei contenuti
, passiamo ora alla nostra prossima serie di esercizi.
Stiamo andando ad applicare la griglia Bootstrap alla nostra pagina index.html
al fine di fare il layout del contenuto all'interno o la pagina index.html.
Useremo anche alcune classi CSS personalizzate.