1 00:00:03,800 --> 00:00:07,660 Continueremo con l'esercizio della griglia di bootstrap 2 00:00:07,660 --> 00:00:11,074 che abbiamo iniziato nell'esercizio precedente. 3 00:00:11,074 --> 00:00:14,535 Stiamo andando a fare un paio di cose alla nostra 4 00:00:14,535 --> 00:00:18,965 pagina index.html al fine di migliorare il suo layout. 5 00:00:18,965 --> 00:00:24,085 Abbiamo intenzione di utilizzare alcune classi CSS personalizzate e aggiungere un po 'di colore 6 00:00:24,085 --> 00:00:30,535 alla nostra pagina index.html utilizzando classi CSS personalizzate. 7 00:00:30,535 --> 00:00:39,265 La prossima cosa che ho intenzione di fare è andare giù al piè di pagina e per questo UL qui, 8 00:00:39,265 --> 00:00:42,790 si noterà che questo elenco quando si guarda la 9 00:00:42,790 --> 00:00:49,705 nostra pagina web viene visualizzato nella pagina web utilizzando questo elenco puntato qui. 10 00:00:49,705 --> 00:00:52,820 Non sono troppo soddisfatto di questo elenco puntato, 11 00:00:52,820 --> 00:00:59,350 voglio rimuovere questi punti elenco e poi semplicemente mostrarli come solo i link lì. 12 00:00:59,350 --> 00:01:03,440 Quindi, per farlo, userò un altro stile di lista chiamato come 13 00:01:03,440 --> 00:01:08,120 elenco - senza stile e applicarlo a quel tag UL lì. 14 00:01:08,120 --> 00:01:09,950 Tornando alla nostra pagina web, 15 00:01:09,950 --> 00:01:12,425 a questo tag UL nel piè di pagina, 16 00:01:12,425 --> 00:01:21,520 ho intenzione di applicare la classe come elenco senza stile, 17 00:01:23,230 --> 00:01:32,275 e questo rimuoverebbe quei proiettili davanti a questi link lì. 18 00:01:32,275 --> 00:01:40,375 Ora, permettetemi di aggiungere alcune classi CSS personalizzate alla pagina index.html. 19 00:01:40,375 --> 00:01:49,635 Per fare ciò, ora creeremo una cartella qui e chiamarla come cartella CSS qui. 20 00:01:49,635 --> 00:01:51,650 All' interno della cartella CSS, 21 00:01:51,650 --> 00:01:59,670 creerò un nuovo file e chiamerò il file come styles.css. 22 00:01:59,670 --> 00:02:02,835 Ora, all'interno del file styles.css, 23 00:02:02,835 --> 00:02:11,685 ora posso aggiungere alcune classi CSS per modellare la nostra pagina. 24 00:02:11,685 --> 00:02:14,600 Permettetemi di aggiungere alcune classi CSS qui. 25 00:02:14,600 --> 00:02:18,765 Quindi, aggiungerei la mia prima classe come intestazione di riga. 26 00:02:18,765 --> 00:02:21,035 Quindi, come suggerisce il nome, 27 00:02:21,035 --> 00:02:23,770 questa classe che sto applicando all'intestazione. 28 00:02:23,770 --> 00:02:28,865 E poi, applicherei il margine come 29 00:02:28,865 --> 00:02:34,330 zero pixel auto e 30 00:02:34,330 --> 00:02:40,150 poi il padding come zero pixel auto. 31 00:02:40,150 --> 00:02:41,820 Quindi, questo è per l'intestazione di riga. 32 00:02:41,820 --> 00:02:46,100 Quindi, ho intenzione di avere zero margine e zero padding per l'intestazione di riga. 33 00:02:46,100 --> 00:02:48,840 E poi per il contenuto della riga, 34 00:02:48,840 --> 00:02:54,005 quindi aggiungerò un'altra classe CSS chiamata row-content. 35 00:02:54,005 --> 00:03:01,470 E poi per questo, aggiungerò il margine zero pixel auto, 36 00:03:01,470 --> 00:03:07,815 e poi il padding lo avrà a 50 pixel, 37 00:03:07,815 --> 00:03:16,170 zero pixel, 50 e zero pixel. 38 00:03:16,170 --> 00:03:21,060 Quindi aggiungerò un bordo 39 00:03:21,060 --> 00:03:28,880 nella parte inferiore della mia riga qui. 40 00:03:28,880 --> 00:03:35,195 E poi, il bordo gli darò un pixel e poi lo chiamerò una cresta. 41 00:03:35,195 --> 00:03:45,915 E imposterò l'altezza minima su 400 pixel per il contenuto qui. 42 00:03:45,915 --> 00:03:51,910 In questo modo, la mia pagina web sembrerà più bella sullo schermo. 43 00:03:51,910 --> 00:03:55,475 Ora questo di nuovo, devi provare a 44 00:03:55,475 --> 00:03:59,900 vedere fino a quando non sei soddisfatto del modo in cui la pagina è disposta. 45 00:03:59,900 --> 00:04:03,560 Ora anche, includerò 46 00:04:03,560 --> 00:04:08,320 un'altra classe chiamata come piè di pagina che, come potresti aver già indovinato, 47 00:04:08,320 --> 00:04:13,560 applicherò al piè di pagina e 48 00:04:13,560 --> 00:04:21,100 applicherò un colore di sfondo al piè di pagina come D1C4E9. 49 00:04:29,140 --> 00:04:32,465 Se mi chiedete come ho selezionato il colore, 50 00:04:32,465 --> 00:04:37,630 ho appena cercato il colore e poi ero felice con quel colore. 51 00:04:37,630 --> 00:04:41,460 Puoi scegliere qualsiasi colore che vuoi applicare, 52 00:04:41,460 --> 00:04:44,460 ma questo colore sembra essere buono per me. 53 00:04:44,460 --> 00:04:46,950 Quindi, ho aggiunto quel colore. 54 00:04:46,950 --> 00:04:50,110 E per il padding, per il piè di pagina, 55 00:04:50,110 --> 00:04:58,890 aggiungerei 20 pixel e zero pixel. 56 00:04:59,100 --> 00:05:06,160 Ora, una volta aggiunto questi stili al mio file CSS, 57 00:05:06,160 --> 00:05:10,610 fammi applicare il file CSS alla pagina index.html. 58 00:05:10,610 --> 00:05:12,820 Vado alla pagina index.html. 59 00:05:12,820 --> 00:05:18,950 Ovviamente, ho bisogno di usare quel file CSS all'interno della mia pagina index.html. 60 00:05:18,950 --> 00:05:22,160 Quindi subito dopo il file CSS di bootstrap, 61 00:05:22,160 --> 00:05:32,200 farò un link e un foglio di stile, 62 00:05:32,970 --> 00:05:39,900 e questo è il file style.css lì. 63 00:05:39,900 --> 00:05:43,525 Quindi è lì che è memorizzato il mio file CSS. 64 00:05:43,525 --> 00:05:49,760 Quindi, ho intenzione di includerlo nella mia pagina index.html. 65 00:05:49,760 --> 00:05:56,350 Ora, ho intenzione di entrare nel corpo e applicare le classi che ho appena creato. 66 00:05:56,350 --> 00:05:57,955 Quindi andando all'intestazione, 67 00:05:57,955 --> 00:06:03,055 applicherò la classe di intestazione della riga al div nell'intestazione. 68 00:06:03,055 --> 00:06:07,475 Quindi, per il contenuto, 69 00:06:07,475 --> 00:06:14,085 applicherei le classi di contenuto della riga alle righe lì. 70 00:06:14,085 --> 00:06:21,180 Quindi, alle tre righe nel contenuto, 71 00:06:21,190 --> 00:06:26,690 applico la classe di contenuto della riga e poi scendendo al piè di pagina, 72 00:06:26,690 --> 00:06:28,325 al tag piè di pagina, 73 00:06:28,325 --> 00:06:32,315 applicherò il piè di pagina della classe qui 74 00:06:32,315 --> 00:06:35,240 e quindi salverò le modifiche. 75 00:06:35,240 --> 00:06:38,290 Andiamo a dare un'occhiata a quella pagina. 76 00:06:38,290 --> 00:06:40,430 Andando alla tua pagina web, 77 00:06:40,430 --> 00:06:45,970 stiamo già iniziando a vedere alcune modifiche interessanti alla pagina web. 78 00:06:45,970 --> 00:06:48,960 Quindi, ora puoi vedere che il contenuto 79 00:06:48,960 --> 00:06:52,445 nella pagina web è stato disposto un po 'più pulito. 80 00:06:52,445 --> 00:06:58,290 Questo è il bordo inferiore che abbiamo aggiunto al contenuto della riga, 81 00:06:58,290 --> 00:07:03,200 quindi puoi vedere che c'è abbastanza separazione tra le righe anche se 82 00:07:03,200 --> 00:07:08,530 il contenuto delle righe è ancora posizionato verso l'alto nelle righe, 83 00:07:08,530 --> 00:07:11,900 quindi hai queste tre righe e poi guarda il piè di pagina, 84 00:07:11,900 --> 00:07:17,740 il piè di pagina ora ha acquisito il colore di sfondo che ho applicato 85 00:07:17,740 --> 00:07:26,717 e notare come i collegamenti sono in stile con l'elenco senza stile sul lato sinistro qui. 86 00:07:26,717 --> 00:07:33,495 Non abbiamo ancora finito, dobbiamo fare qualche altra modifica alla pagina index.html, 87 00:07:33,495 --> 00:07:39,320 quindi tornare e dare un'occhiata al risultato finale di questo esercizio. 88 00:07:39,320 --> 00:07:41,485 Tornando al tuo Editor, 89 00:07:41,485 --> 00:07:46,955 aggiungerò alcune altre classi CSS nella mia struttura di stile, 90 00:07:46,955 --> 00:07:53,290 è un file, quindi andrò lì e poi aggiungo una classe chiamata Jumbotron. 91 00:07:53,290 --> 00:07:59,265 Quindi, vedrai che abbiamo già applicato il Jumbotron alla nostra intestazione lì. 92 00:07:59,265 --> 00:08:03,145 Ora, se aggiungo più proprietà a questa classe Jumbotron qui, 93 00:08:03,145 --> 00:08:05,875 questo verrà applicato al Jumbotron, 94 00:08:05,875 --> 00:08:11,535 oltre al Jumbotron predefinito standard che già include bootstrap. 95 00:08:11,535 --> 00:08:13,835 Ho intenzione di aggiungere un paio di cose, 96 00:08:13,835 --> 00:08:17,355 ho intenzione di aggiungere un padding di 97 00:08:17,735 --> 00:08:28,765 70 e 30 pixel sul suo ambiente, 98 00:08:29,095 --> 00:08:38,515 e poi un margine di zero pixel tutto intorno, 99 00:08:38,515 --> 00:08:51,685 e impostare lo sfondo di questo a 9575CD. 100 00:08:51,685 --> 00:09:01,065 Questo è un po 'di un colore viola più scuro che sembra andare molto bene sul Jumbotron. 101 00:09:01,065 --> 00:09:03,430 Ancora una volta, per tentativi ed errori, 102 00:09:03,430 --> 00:09:04,975 ho selezionato quel colore, 103 00:09:04,975 --> 00:09:11,735 e anche il colore del testo come bianco floreale. 104 00:09:13,205 --> 00:09:15,305 Quindi, per il Jumbotron, 105 00:09:15,305 --> 00:09:18,615 applicheremo quelle classi, e anche, 106 00:09:18,615 --> 00:09:24,765 applicherò un'altra classe alla classe di indirizzi. 107 00:09:24,765 --> 00:09:26,520 Abbiamo un indirizzo nel piè di pagina, 108 00:09:26,520 --> 00:09:34,685 quindi ho intenzione di cambiare la dimensione del carattere di quello all'80%, 109 00:09:34,685 --> 00:09:38,935 un carattere leggermente più piccolo del font normale, 110 00:09:38,955 --> 00:09:43,455 e il margine, gli darò uno zero pixel, 111 00:09:43,455 --> 00:09:50,285 e il colore, ho intenzione di utilizzare zero F, zero F, 112 00:09:50,285 --> 00:09:52,350 zero F, zero F, 113 00:09:52,350 --> 00:09:54,730 e quindi salvare le modifiche. 114 00:09:54,730 --> 00:09:58,730 Quindi sono state aggiunte altre classi CSS, 115 00:09:58,730 --> 00:10:01,530 tornando a index.html. 116 00:10:01,530 --> 00:10:03,475 Quello che ho intenzione di fare ora, 117 00:10:03,475 --> 00:10:07,775 è andare alle righe del contenuto e poi 118 00:10:07,775 --> 00:10:11,990 cercherò di posizionare questo contenuto nel mezzo, 119 00:10:11,990 --> 00:10:14,605 verticalmente in quella riga. 120 00:10:14,605 --> 00:10:17,930 Questo è dove prenderò l'aiuto dell' 121 00:10:17,930 --> 00:10:23,050 allineamento verticale supportato dalla griglia di bootstrap attraverso il supporto Flexbox. 122 00:10:23,050 --> 00:10:31,395 Per fare ciò, direi align-elementi-center, 123 00:10:31,495 --> 00:10:38,620 quindi questa è l'altra classe che ho bisogno di aggiungere, align-elementi-center. 124 00:10:38,620 --> 00:10:45,475 E aggiungerò anche alle restanti due righe, 125 00:10:45,475 --> 00:10:51,735 allineare gli elementi al centro della seconda e della terza riga, 126 00:10:53,185 --> 00:11:01,965 e questo dovrebbe fare una giustificazione verticale del contenuto delle righe. 127 00:11:01,965 --> 00:11:03,880 Vedremo il risultato tra un minuto. 128 00:11:03,880 --> 00:11:06,230 Scendendo al piè di pagina. 129 00:11:06,230 --> 00:11:09,835 Nel piè di pagina, si vede che abbiamo utilizzato 130 00:11:09,835 --> 00:11:13,825 la colonna automatica per questo contenuto di copyright lì. 131 00:11:13,825 --> 00:11:18,265 Ora, ho intenzione di posizionare questo proprio al centro orizzontalmente 132 00:11:18,265 --> 00:11:24,160 usando quella classe justify-content-center, 133 00:11:24,160 --> 00:11:32,755 quindi c'è un contenuto giustificare e alcune altre classi lì. 134 00:11:32,755 --> 00:11:35,890 Ho intenzione di usare per giustificare la classe content-center per questo. 135 00:11:35,890 --> 00:11:44,605 Ciò posizionerà essenzialmente quella colonna al centro della riga lì. Questo 136 00:11:44,725 --> 00:11:48,560 si applica a questo, e poi, 137 00:11:48,560 --> 00:11:51,415 un piccolo cambiamento che ho intenzione di fare, 138 00:11:51,415 --> 00:11:53,370 è a questo div interno lì, 139 00:11:53,370 --> 00:12:01,665 ho intenzione di applicare una classe come centro di testo a questo, in 140 00:12:01,665 --> 00:12:06,435 modo che questi collegamenti siano centrati sullo schermo. 141 00:12:06,435 --> 00:12:11,340 Con queste modifiche, andiamo a dare un'occhiata alla pagina web, 142 00:12:11,340 --> 00:12:14,135 alla fine di questo esercizio. 143 00:12:14,135 --> 00:12:16,120 Andando alla nostra pagina web, la 144 00:12:16,120 --> 00:12:20,020 nostra pagina web sta già iniziando a guardare ancora meglio ora, 145 00:12:20,020 --> 00:12:25,885 quindi ora puoi vedere che il Jumbotron è ora in stile con un nuovo colore di sfondo, 146 00:12:25,885 --> 00:12:28,955 che è un po 'viola scuro lì, 147 00:12:28,955 --> 00:12:34,980 e la scritta è ora in colore bianco floreale, 148 00:12:34,980 --> 00:12:37,190 un po 'rientrato lì, 149 00:12:37,190 --> 00:12:44,345 poi è ora possibile vedere che il contenuto nelle righe di contenuto è ora centrato verticalmente, 150 00:12:44,345 --> 00:12:47,500 per le tre righe di contenuto. 151 00:12:47,500 --> 00:12:54,645 Questo è l'uso del centro di allineamento elementi che abbiamo applicato alle righe lì. 152 00:12:54,645 --> 00:12:56,525 Quindi andando al piè di pagina, 153 00:12:56,525 --> 00:13:03,380 ora puoi vedere che questo copyright è ora giustificato al centro dello schermo. 154 00:13:03,380 --> 00:13:08,155 Guarda come sono stati centrati i link qui. 155 00:13:08,155 --> 00:13:15,985 Mi sono reso conto che voglio anche posizionare questo centraggio verticalmente su questa particolare riga, 156 00:13:15,985 --> 00:13:19,855 quindi andiamo e applichiamo un'altra classe per spostarlo 157 00:13:19,855 --> 00:13:24,540 al centro di questa particolare riga verticalmente. 158 00:13:24,540 --> 00:13:27,100 Quindi, per farlo, tornando all'indice. 159 00:13:27,100 --> 00:13:34,115 html, nel piè di pagina per quella particolare colonna che contiene quelli, 160 00:13:34,115 --> 00:13:41,795 applicherò la classe come allineo-self-center. 161 00:13:41,795 --> 00:13:48,485 Questo dovrebbe essere applicato al div che utilizza la classe colonna. 162 00:13:48,485 --> 00:13:54,185 Con questo, quel particolare contenuto sarà allineato al centro della riga. 163 00:13:54,185 --> 00:13:56,570 Il contenuto rimanente rimarrà comunque nella parte superiore. 164 00:13:56,570 --> 00:13:59,575 Diamo un'ultima occhiata al piè di pagina. 165 00:13:59,575 --> 00:14:01,705 Andando al piè di pagina nella nostra pagina web, è 166 00:14:01,705 --> 00:14:06,345 ora possibile vedere come questo è stato posizionato verticalmente al centro. 167 00:14:06,345 --> 00:14:10,715 Questi due pezzi di contenuto sono ancora allineati alla parte superiore della riga, 168 00:14:10,715 --> 00:14:15,215 va bene perché sembra bene lì dentro, 169 00:14:15,215 --> 00:14:21,340 ma questo l'ho trascinato verticalmente al centro di questa particolare riga. 170 00:14:21,340 --> 00:14:25,545 Con questo, completiamo questo esercizio. 171 00:14:25,545 --> 00:14:30,005 In questo esercizio, abbiamo visto l'uso di classi CSS personalizzate 172 00:14:30,005 --> 00:14:35,125 e anche utilizzato alcune delle classi per 173 00:14:35,125 --> 00:14:41,660 giustificare il contenuto orizzontalmente e verticalmente nelle nostre righe. 174 00:14:41,660 --> 00:14:45,695 Questo è un buon momento per fare un buon commento con il messaggio, 175 00:14:45,695 --> 00:14:48,735 griglia Bootstrap, parte due.