Nelle lezioni precedenti,
abbiamo imparato a conoscere il design reattivo e il sistema di griglia bootstrap.
Abbiamo visto come la griglia di bootstrap ci permette di progettare siti web responsive.
E' tempo per noi di passare al prossimo esercizio.
Inizieremo a lavorare con la pagina html indice che abbiamo creato nel
nostro esercizio precedente e applicheremo le classi griglia bootstrap per renderlo reattivo.
Dando una rapida occhiata alla nostra pagina web nel browser vediamo che
è ancora terribile anche se i font sono migliorati un po ',
e ora stiamo usando i font predefiniti bootstraps.
Proviamo ora ad applicare le classi griglia bootstrap a index.html per migliorare il suo layout.
Andando alla pagina index.html,
permettetemi di attirare rapidamente la vostra attenzione su questa particolare riga nella
pagina index.html che abbiamo incluso già nell'esercizio precedente.
Avevo fatto riferimento a questa linea,
poi stavamo parlando del sistema di griglia bootstrap.
Quindi qui, vediamo che abbiamo specificato i meta tag con una porta di visualizzazione e il contenuto,
larghezza come larghezza del dispositivo,
e scala iniziale uno e ridursi per adattarsi no.
Quindi questo meta tag ci permette di rendere
la nostra pagina web reattiva guardando il carattere della porta di visualizzazione.
Passando al passo successivo.
Stiamo andando a rotolare giù al corpo di questa pagina index.html,
e quindi cercare il primo div che arriva proprio sotto il tag di intestazione lì,
a questo div si sta andando ad applicare il contenitore di classe.
Abbiamo già imparato a conoscere la classe contenitore nella lezione precedente.
Quindi, una volta applicata la classe contenitore,
quindi dando un'occhiata alla nostra pagina web vediamo
che parte del contenuto proprio lì si è già adattata.
Guarda la differenza tra il contenuto qui sopra e quello qui sotto.
Ora questo contenuto qui sotto,
è nel piè di pagina della nostra pagina index.html e questo contenuto è nell'intestazione.
Ma quel contenuto al centro è il contenuto effettivo della nostra pagina web,
cioè all'interno del div a cui applichiamo il contenitore.
Quindi applicando la classe contenitore puoi vedere immediatamente che la larghezza della pagina all'interno della
quale è disposto il nostro contenuto si è ora
ridotta e quindi hai un po 'di spazio in più su entrambi i lati,
quindi con questa larghezza del contenitore essendo un contenitore di dimensioni fisse,
il nostro contenuto sarà fissato a questo particolare larghezza
sullo schermo lasciando abbastanza margine su entrambi i lati come spazio bianco.
Applichiamo la stessa classe contenitore sia per l'intestazione e il piè di pagina anche,
e quindi vedere come cambia il contenuto.
Tornando alla nostra pagina web,
quello che ho intenzione di fare ora è per il contenuto interno qui,
il div interno all'interno del contenitore,
ho intenzione di applicare la classe come classe di riga qui,
a questo primo,
e ho intenzione di copiare semplicemente questo.
Ho intenzione di applicare lo stesso al secondo div qui che è allineato per il div,
e anche scorrere verso il basso e poi al terzo div qui,
sto anche applicando la classe di riga qui.
Quindi ora, il contenuto all'interno di questa classe contenitore più esterna,
è ora diviso in tre righe,
quindi qualunque cosa sia dentro qui sarà una riga,
qualunque cosa sia dentro qui,
sarà la seconda riga e quella qui sarà la terza riga.
In seguito applicheremo le classi di colonna a questo.
Passiamo ora all'intestazione nel corpo del nostro index.html.
E all'intestazione, ho intenzione di applicare una classe chiamata come jumbotron.
Il componente jumbotron consente di
separare il contenuto all'interno del jumbotron dal resto della pagina.
Vedremo il risultato in breve tempo quando abbiamo alla pagina web risultante.
Ora, al div all'interno di questa intestazione,
applicherò la classe come contenitore, in
modo che qualunque cosa sia all'interno del contenuto
sia ora vincolata dalla larghezza del contenitore lì.
Allo stesso modo, spostandosi verso il basso al piè di pagina qui,
anche nel piè di pagina,
il primo div all'interno del piè di pagina,
ho intenzione di applicare la classe come contenitore.
E il div dentro lì,
ho intenzione di applicare la classe come riga lì,
al div dentro lì.
Quindi questo div ci porterà fino a questo particolare div qui.
E poi il prossimo div anche che è proprio sotto quello,
applicherò la classe come riga.
Quindi ora il mio piè di pagina contiene due righe qui,
useremo lo stile del contenuto usando la colonna,
le classi in breve tempo.
Andando anche all'intestazione,
applicherò la classe di riga al secondo div all'interno del contenitore div qui.
Quindi questo div che corrisponde a quello che ho ottenuto,
sarà una singola riga nell'intestazione.
Diamo un'occhiata alla nostra pagina web risultante.
Andando alla nostra pagina web,
ora puoi vedere che il contenuto dell'intestazione è ora distinto dal
resto all'interno di questa scatola grigia in alto qui.
Ma il contenuto stesso è ora allineato con il contenuto qui sotto.
Ora, questo è il risultato dell'utilizzo del contenitore.
Passando al piè di pagina, è
ora possibile vedere che anche il contenuto del piè di pagina è allineato all'interno del contenitore.
Ma la pagina non sembra ancora così grande,
ora applicheremo le classi di colonna alle div interne ora.
Tornando alla pagina index.html,
inizieremo ora ad applicare le classi di colonna.
Quindi andando all'intestazione, al secondo div interno all'interno del jumbotron qui,
fammi applicare una classe come colonna 12, colonna sm-6.
Quindi, qui il contenuto in
questo primo div occuperà l'intera riga per dimensioni dello schermo extra piccole,
e quindi occuperà metà della riga, quindi è per questo che la colonna
sm-6 per dimensioni dello schermo da piccole a extra large.
Ora, allo stesso modo per il secondo div qui,
anche se non contiene alcun contenuto lì,
definirò le classi di colonna qui come colonna 12 e poi colonna sm.
Quindi, si noti che qui specificando la colonna 12,
sto esplicitamente affermando che per schermi di dimensioni extra ridotte qualunque contenuto sia
all'interno di questo div sarà impilato sotto il contenuto qui.
E poi per schermi di dimensioni da piccole a extra large,
questo contenuto occuperà la quantità residua di
colonne nella riga per dimensioni di schermo da piccole a extra large.
Quindi qui in questo caso poiché sei colonne sono occupate da questo contenuto,
questo otterrà le restanti sei colonne lì.
Passando alle righe del contenuto qui,
per il contenuto qui,
quindi per questo primo contenuto,
che è un'etichetta qui,
applicherò le classi come colonna 12,
colonna sm-4, colonna md-3.
Quindi, affermando che per le dimensioni dello schermo extra piccole,
questo occuperà l'intera riga, per le piccole,
occuperà colonne complete,
e quindi per le dimensioni medio-extra grandi,
occuperà tre colonne nella riga.
Ora, quindi la parte rimanente sarà occupata dal contenuto qui sotto,
quindi a quello, applicherò le classi come col,
indicando che questo sarà impilato sotto
il contenuto qui nelle dimensioni dello schermo extra piccole,
e poi dirò colonna sm,
quindi questo significa che questo occuperà il rimanenti otto colonne qui,
perché quattro colonne sono occupate da questo,
e poi diremo colonna md,
quindi questo significa che questo occuperà
le restanti nove colonne perché tre colonne sono
occupate per dimensioni medio-extra grandi schermo dal contenuto qui sopra.
Ora che ho definito per la prima riga di contenuto,
ho intenzione di prendere la stessa applicazione di classe di colonna qui,
e quindi applicarla alla seconda riga qui,
e anche la terza riga di contenuto qui.
Allo stesso modo, ho intenzione di copiare questo e quindi applicare lo stesso
ai contenuti div qui sotto.
Così ora abbiamo configurato sia l'intestazione che le colonne di contenuto lì.
Passiamo ora al piè di pagina.
Nel piè di pagina, noterai che questo div contiene tre div interni qui,
quindi per ognuno di questi tre div interni qui,
applicherò le classi di colonna corrispondenti.
Quindi, per il primo,
che contiene collegamenti alle varie pagine che faranno parte di questo sito web,
ho intenzione di applicare una classe di colonna,
come colonna quattro, colonna sm-2 qui.
Quindi significa che per le dimensioni dello schermo extra piccole,
questo occuperà quattro colonne e per le piccole e extra grandi,
occuperà solo due colonne qui.
Quindi per il secondo,
il secondo div lì applicherò le classi come colonna sette.
Quindi notare che ho quattro qui e poi sette qui,
in modo che il totale occupa 11 colonne.
Ho lasciato una colonna vuota.
Tornerò più tardi per applicare un offset per occuparmi della colonna extra.
Quindi questa è la colonna sette,
e poi col-sm-5 alla seconda.
Quindi questo è due più cinque, sette.
Quindi ho ancora cinque colonne rimaste,
che posso usare per il terzo div qui.
Ora, per le dimensioni dello schermo più piccole,
questi due contenuti saranno posizionati fianco a fianco,
e quindi questo div che contiene collegamenti a
un sito di social media sarà in una riga separata impilata di seguito.
Ma per schermi di dimensioni da piccole a extra large,
la prima occuperà due colonne,
la seconda occuperà cinque e la restante sarà
occupata dai link dei social media qui.
Quindi per il terzo,
applicherò la classe
come col-12 col-sm-4 qui.
Quindi col-12 col-sm-4, il che significa che questo occuperà
un set separato di 12 colonne
impilate sotto il contenuto precedente per le dimensioni dello schermo extra
piccole, ma per le piccole e extra grandi occuperà quattro colonne.
Quindi eccoci qui quattro più cinque,
nove più due 11.
Quindi una colonna è ancora rimasta per piccole a extra large.
Quindi è così che applicherò quella colonna più vicina a questo.
Ora, abbiamo ancora quello qui sotto in cui contiamo i diritti d'autore per questo.
Ho intenzione di applicare la classe come colonna automatica,
il che significa che questo contenuto occuperà
solo abbastanza colonne come richiesto dal contenuto lì.
Più tardi vedrai che posizionerò questo contenuto al centro
dello schermo usando così un'altra classe CSS bootstrap.
Ci arriveremo nel prossimo esercizio.
Quindi con questo abbiamo applicato varie classi di colonna per l'intestazione,
il contenuto, e il piè di pagina.
Questo è un buon momento per noi per salvare le modifiche e poi andare
a dare un'occhiata alla pagina aggiornata indicizzata o HTML.
Dando un'occhiata alla nostra pagina index.html,
noterai come nell'intestazione che è il Jumbotron,
il contenuto sta ora occupando solo metà dello schermo lì.
L' altra metà dello schermo di questa particolare riga è ora lasciato vuoto.
Scendendo alle righe di contenuto,
si vede che l'etichetta sul lato sinistro occupa
tre o quattro colonne a seconda di quale dimensione dello schermo erano in uso,
e il restante essere occupato dal resto del contenuto.
Quindi qui abbiamo una riga,
la seconda fila e la terza riga.
E poi il piè di pagina qui puoi vedere che i link sono sul lato sinistro,
gli altri nel mezzo,
e poi i link dei social media sul lato destro.
Quindi questo è per uno schermo di medie dimensioni.
Ora, se vuoi guardare la stessa vista per uno schermo di dimensioni extra piccole o piccole,
se stai usando Chrome,
Chrome ha gli strumenti di sviluppo che puoi
attivare facendo clic sugli strumenti di sviluppo di visualizzazione,
e quando gli strumenti di sviluppo vengono fuori,
noterai, permettimi di ridurre le dimensioni Qui.
Noterai questo piccolo alle finestre lì.
Quindi facendo clic su che si attiva la visualizzazione reattiva per questi siti lì.
Quindi puoi vedere che qui la vista di questa stessa pagina web su un pixel a sito,
che è 411 per 731 in modalità verticale,
quindi che corrisponde a una dimensione dello schermo extra piccola, in
modo da poter vedere come è disposto il contenuto.
Così si può vedere il contenuto Jumbotron lì
e poi la parte rimanente del contenuto qui sotto.
E poi fino al piè di pagina.
Quindi nel piè di pagina puoi vedere come i link e gli annunci hanno disposto fianco a fianco.
Ora riducendo le dimensioni dello schermo in modo che possiamo vedere come quel piè di pagina è disposto qui.
Quindi la parte rimanente, hai i link sul lato sinistro,
hai l'indirizzo sul lato destro,
e poi i link dei social media in basso in una riga separata qui,
e poi il copyright in basso lì.
Quindi questa è la vista interessante che vediamo per le dimensioni dello schermo extra piccole.
Tornando al nostro codice qui,
ora applicherò l'ordine e le classi di offset a
questo contenuto per visualizzare il contenuto in un modo leggermente diverso.
Quindi andando alla riga del contenuto qui,
per i due div qui che contengono il contenuto,
ho intenzione di applicare le classi come
ordine-sm-last per la prima riga qui.
E poi per quello qui sotto applicherò l'ordine sm prima alla riga quaggiù.
Quindi il che significa che quando questo contenuto viene visualizzato,
questo contenuto verrà tirato sul lato sinistro dello schermo e quindi
questa colonna verrà spinta sul lato destro dello schermo.
Quindi questo sarà ordinato sul lato destro e questo sarà ordinato sul lato sinistro.
Come ho spiegato circa le clausole di ordine nella lezione precedente.
Allo stesso modo dalla seconda riga,
lo lascerò come tale, ma dalla terza riga applicherò
lo stesso insieme di classi di ordine.
Quindi andrò alla terza riga qui,
e poi applicherò l'ordine-sm-last a questo,
e poi applicherò l'ordine-sm-first a questo.
E così questo nuovo sarà riordinato in modo
tale che questo contenuto apparirà
sul lato sinistro e questo contenuto apparirà sul lato destro.
Questo è solo un modo di posizionare il contenuto in un modo un po 'più interessante.
Ora spostandosi verso il basso nel piè di pagina qui,
ora ho intenzione di applicare una classe offset qui.
Quindi notare che ho detto che queste due colonne occuperanno quattro più sette, 11.
Quindi una colonna è rimasta.
Quindi ho intenzione di applicare una classe offset-1 a questo.
Quindi il che significa che questo contenuto su questo div verrà spinto a destra da una colonna qui.
Allo stesso modo dal momento che ho detto offset uno,
questo verrà applicato a extra small fino alle dimensioni dello schermo extra large.
E così questo è l'uso della classe offset.
Quindi, ora che abbiamo apportato le modifiche,
salviamo le modifiche e poi andiamo a dare un'occhiata alla nostra pagina web nel browser.
Tornando a quel browser,
ora vedi come l'intestazione è come prima,
ma nella prima riga del contenuto,
vedi che questo contenuto è stato spinto
sul lato sinistro e l'etichetta sul lato destro.
La seconda fila è diversa è stata mantenuta proprio come prima.
Ma per il terzo vedrai che questo è stato
spinto a destra e questo è stato spinto a sinistra.
Quindi questo è l'uso della classe ordine-sm-last e ordine-sm-first è lì.
Ora andando al piè di pagina,
ora vedi che il contenuto nel primo div qui è stato spinto a destra da una colonna,.
Quindi puoi vedere che c'è una colonna di spazi bianchi qui,
e questo non è spinto a destra e quelli rimanenti sono stati formattati di conseguenza.
Quindi con questo completiamo le modifiche
alla nostra pagina index.html o pagina aggiuntiva per questo particolare esercizio.
Con questo completiamo questo particolare esercizio.
In questo esercizio abbiamo esaminato l'uso delle
classi contenitore, riga e colonna al fine di progettare la nostra pagina web un po 'più bella.
Nella seconda parte dell'esercizio che seguirà questo,
aggiungeremo altri per cercare di migliorare il modo in cui queste pagine web sono renderizzate.
Non è ancora per mia soddisfazione.
Ovviamente, c'è ancora spazio per migliorare.
Questo potrebbe essere un buon momento per fare un commento git con
il messaggio Bootstrap Grid Part One.