Continueremo con l'esercizio della griglia di bootstrap
che abbiamo iniziato nell'esercizio precedente.
Stiamo andando a fare un paio di cose alla nostra
pagina index.html al fine di migliorare il suo layout.
Abbiamo intenzione di utilizzare alcune classi CSS personalizzate e aggiungere un po 'di colore
alla nostra pagina index.html utilizzando classi CSS personalizzate.
La prossima cosa che ho intenzione di fare è andare giù al piè di pagina e per questo UL qui,
si noterà che questo elenco quando si guarda la
nostra pagina web viene visualizzato nella pagina web utilizzando questo elenco puntato qui.
Non sono troppo soddisfatto di questo elenco puntato,
voglio rimuovere questi punti elenco e poi semplicemente mostrarli come solo i link lì.
Quindi, per farlo, userò un altro stile di lista chiamato come
elenco - senza stile e applicarlo a quel tag UL lì.
Tornando alla nostra pagina web,
a questo tag UL nel piè di pagina,
ho intenzione di applicare la classe come elenco senza stile,
e questo rimuoverebbe quei proiettili davanti a questi link lì.
Ora, permettetemi di aggiungere alcune classi CSS personalizzate alla pagina index.html.
Per fare ciò, ora creeremo una cartella qui e chiamarla come cartella CSS qui.
All' interno della cartella CSS,
creerò un nuovo file e chiamerò il file come styles.css.
Ora, all'interno del file styles.css,
ora posso aggiungere alcune classi CSS per modellare la nostra pagina.
Permettetemi di aggiungere alcune classi CSS qui.
Quindi, aggiungerei la mia prima classe come intestazione di riga.
Quindi, come suggerisce il nome,
questa classe che sto applicando all'intestazione.
E poi, applicherei il margine come
zero pixel auto e
poi il padding come zero pixel auto.
Quindi, questo è per l'intestazione di riga.
Quindi, ho intenzione di avere zero margine e zero padding per l'intestazione di riga.
E poi per il contenuto della riga,
quindi aggiungerò un'altra classe CSS chiamata row-content.
E poi per questo, aggiungerò il margine zero pixel auto,
e poi il padding lo avrà a 50 pixel,
zero pixel, 50 e zero pixel.
Quindi aggiungerò un bordo
nella parte inferiore della mia riga qui.
E poi, il bordo gli darò un pixel e poi lo chiamerò una cresta.
E imposterò l'altezza minima su 400 pixel per il contenuto qui.
In questo modo, la mia pagina web sembrerà più bella sullo schermo.
Ora questo di nuovo, devi provare a
vedere fino a quando non sei soddisfatto del modo in cui la pagina è disposta.
Ora anche, includerò
un'altra classe chiamata come piè di pagina che, come potresti aver già indovinato,
applicherò al piè di pagina e
applicherò un colore di sfondo al piè di pagina come D1C4E9.
Se mi chiedete come ho selezionato il colore,
ho appena cercato il colore e poi ero felice con quel colore.
Puoi scegliere qualsiasi colore che vuoi applicare,
ma questo colore sembra essere buono per me.
Quindi, ho aggiunto quel colore.
E per il padding, per il piè di pagina,
aggiungerei 20 pixel e zero pixel.
Ora, una volta aggiunto questi stili al mio file CSS,
fammi applicare il file CSS alla pagina index.html.
Vado alla pagina index.html.
Ovviamente, ho bisogno di usare quel file CSS all'interno della mia pagina index.html.
Quindi subito dopo il file CSS di bootstrap,
farò un link e un foglio di stile,
e questo è il file style.css lì.
Quindi è lì che è memorizzato il mio file CSS.
Quindi, ho intenzione di includerlo nella mia pagina index.html.
Ora, ho intenzione di entrare nel corpo e applicare le classi che ho appena creato.
Quindi andando all'intestazione,
applicherò la classe di intestazione della riga al div nell'intestazione.
Quindi, per il contenuto,
applicherei le classi di contenuto della riga alle righe lì.
Quindi, alle tre righe nel contenuto,
applico la classe di contenuto della riga e poi scendendo al piè di pagina,
al tag piè di pagina,
applicherò il piè di pagina della classe qui
e quindi salverò le modifiche.
Andiamo a dare un'occhiata a quella pagina.
Andando alla tua pagina web,
stiamo già iniziando a vedere alcune modifiche interessanti alla pagina web.
Quindi, ora puoi vedere che il contenuto
nella pagina web è stato disposto un po 'più pulito.
Questo è il bordo inferiore che abbiamo aggiunto al contenuto della riga,
quindi puoi vedere che c'è abbastanza separazione tra le righe anche se
il contenuto delle righe è ancora posizionato verso l'alto nelle righe,
quindi hai queste tre righe e poi guarda il piè di pagina,
il piè di pagina ora ha acquisito il colore di sfondo che ho applicato
e notare come i collegamenti sono in stile con l'elenco senza stile sul lato sinistro qui.
Non abbiamo ancora finito, dobbiamo fare qualche altra modifica alla pagina index.html,
quindi tornare e dare un'occhiata al risultato finale di questo esercizio.
Tornando al tuo Editor,
aggiungerò alcune altre classi CSS nella mia struttura di stile,
è un file, quindi andrò lì e poi aggiungo una classe chiamata Jumbotron.
Quindi, vedrai che abbiamo già applicato il Jumbotron alla nostra intestazione lì.
Ora, se aggiungo più proprietà a questa classe Jumbotron qui,
questo verrà applicato al Jumbotron,
oltre al Jumbotron predefinito standard che già include bootstrap.
Ho intenzione di aggiungere un paio di cose,
ho intenzione di aggiungere un padding di
70 e 30 pixel sul suo ambiente,
e poi un margine di zero pixel tutto intorno,
e impostare lo sfondo di questo a 9575CD.
Questo è un po 'di un colore viola più scuro che sembra andare molto bene sul Jumbotron.
Ancora una volta, per tentativi ed errori,
ho selezionato quel colore,
e anche il colore del testo come bianco floreale.
Quindi, per il Jumbotron,
applicheremo quelle classi, e anche,
applicherò un'altra classe alla classe di indirizzi.
Abbiamo un indirizzo nel piè di pagina,
quindi ho intenzione di cambiare la dimensione del carattere di quello all'80%,
un carattere leggermente più piccolo del font normale,
e il margine, gli darò uno zero pixel,
e il colore, ho intenzione di utilizzare zero F, zero F,
zero F, zero F,
e quindi salvare le modifiche.
Quindi sono state aggiunte altre classi CSS,
tornando a index.html.
Quello che ho intenzione di fare ora,
è andare alle righe del contenuto e poi
cercherò di posizionare questo contenuto nel mezzo,
verticalmente in quella riga.
Questo è dove prenderò l'aiuto dell'
allineamento verticale supportato dalla griglia di bootstrap attraverso il supporto Flexbox.
Per fare ciò, direi align-elementi-center,
quindi questa è l'altra classe che ho bisogno di aggiungere, align-elementi-center.
E aggiungerò anche alle restanti due righe,
allineare gli elementi al centro della seconda e della terza riga,
e questo dovrebbe fare una giustificazione verticale del contenuto delle righe.
Vedremo il risultato tra un minuto.
Scendendo al piè di pagina.
Nel piè di pagina, si vede che abbiamo utilizzato
la colonna automatica per questo contenuto di copyright lì.
Ora, ho intenzione di posizionare questo proprio al centro orizzontalmente
usando quella classe justify-content-center,
quindi c'è un contenuto giustificare e alcune altre classi lì.
Ho intenzione di usare per giustificare la classe content-center per questo.
Ciò posizionerà essenzialmente quella colonna al centro della riga lì. Questo
si applica a questo, e poi,
un piccolo cambiamento che ho intenzione di fare,
è a questo div interno lì,
ho intenzione di applicare una classe come centro di testo a questo, in
modo che questi collegamenti siano centrati sullo schermo.
Con queste modifiche, andiamo a dare un'occhiata alla pagina web,
alla fine di questo esercizio.
Andando alla nostra pagina web, la
nostra pagina web sta già iniziando a guardare ancora meglio ora,
quindi ora puoi vedere che il Jumbotron è ora in stile con un nuovo colore di sfondo,
che è un po 'viola scuro lì,
e la scritta è ora in colore bianco floreale,
un po 'rientrato lì,
poi è ora possibile vedere che il contenuto nelle righe di contenuto è ora centrato verticalmente,
per le tre righe di contenuto.
Questo è l'uso del centro di allineamento elementi che abbiamo applicato alle righe lì.
Quindi andando al piè di pagina,
ora puoi vedere che questo copyright è ora giustificato al centro dello schermo.
Guarda come sono stati centrati i link qui.
Mi sono reso conto che voglio anche posizionare questo centraggio verticalmente su questa particolare riga,
quindi andiamo e applichiamo un'altra classe per spostarlo
al centro di questa particolare riga verticalmente.
Quindi, per farlo, tornando all'indice.
html, nel piè di pagina per quella particolare colonna che contiene quelli,
applicherò la classe come allineo-self-center.
Questo dovrebbe essere applicato al div che utilizza la classe colonna.
Con questo, quel particolare contenuto sarà allineato al centro della riga.
Il contenuto rimanente rimarrà comunque nella parte superiore.
Diamo un'ultima occhiata al piè di pagina.
Andando al piè di pagina nella nostra pagina web, è
ora possibile vedere come questo è stato posizionato verticalmente al centro.
Questi due pezzi di contenuto sono ancora allineati alla parte superiore della riga,
va bene perché sembra bene lì dentro,
ma questo l'ho trascinato verticalmente al centro di questa particolare riga.
Con questo, completiamo questo esercizio.
In questo esercizio, abbiamo visto l'uso di classi CSS personalizzate
e anche utilizzato alcune delle classi per
giustificare il contenuto orizzontalmente e verticalmente nelle nostre righe.
Questo è un buon momento per fare un buon commento con il messaggio,
griglia Bootstrap, parte due.