1 00:00:03,750 --> 00:00:11,555 Il nostro prossimo esercizio esamina le modalità di visualizzazione dei contenuti sulla nostra pagina web. 2 00:00:11,555 --> 00:00:17,190 Essi guardano a come possiamo includere tabelle nella nostra pagina web e come possiamo 3 00:00:17,190 --> 00:00:23,845 modellare quelle tabelle utilizzando le classi di Bootstrap per le tabelle di styling, 4 00:00:23,845 --> 00:00:27,720 incluso il design reattivo delle tabelle. 5 00:00:27,720 --> 00:00:30,860 Vedremo anche un altro componente versatile 6 00:00:30,860 --> 00:00:34,290 che è disponibile in Bootstrap chiamato come una scheda. 7 00:00:34,290 --> 00:00:39,125 Una scheda consente di visualizzare i contenuti in milioni di modi. 8 00:00:39,125 --> 00:00:44,495 Quindi esamineremo due modi diversi di utilizzare una scheda per visualizzare il contenuto. 9 00:00:44,495 --> 00:00:49,275 Più tardi, vedremo l'uso delle carte più e più volte 10 00:00:49,275 --> 00:00:56,635 per progetti futuri di alcune parti del nostro sito web. 11 00:00:56,635 --> 00:01:02,520 Per iniziare, apri la pagina aboutus.html. 12 00:01:02,520 --> 00:01:06,035 Stiamo per inserire una tabella e due carte 13 00:01:06,035 --> 00:01:10,215 nella pagina aboutus.html per visualizzare qualche scheda. Per 14 00:01:10,215 --> 00:01:19,130 prima cosa, scorriamo lentamente verso il basso fino a dopo quella scheda per informazioni sulla leadership, 15 00:01:19,130 --> 00:01:23,170 e proprio lì ho intenzione di introdurre un altro div all'interno del 16 00:01:23,170 --> 00:01:28,045 quale ho intenzione di allegare la tabella qui. 17 00:01:28,045 --> 00:01:31,640 Quindi, introdurrò una nuova riga qui, 18 00:01:31,640 --> 00:01:38,135 con la classe come riga contenuto. 19 00:01:38,135 --> 00:01:41,185 E all'interno di questo div, 20 00:01:41,185 --> 00:01:51,205 introdurremo una colonna che ospiterà la tabella qui. 21 00:01:51,205 --> 00:01:55,850 Quindi, introdurrò una colonna, colonna 12, 22 00:01:55,870 --> 00:02:05,045 colonna sm-9 e chiuderò il div. 23 00:02:05,045 --> 00:02:11,605 E all'interno div, lasciatemi dare un titolo qui 24 00:02:11,605 --> 00:02:21,940 Fatti e Figure e chiudere il h2. 25 00:02:23,490 --> 00:02:29,770 Subito dopo, lasciami introdurre un altro div, 26 00:02:33,140 --> 00:02:43,320 che la colonna delle classi sm e la colonna sm-3 e chiudi quel div lì. 27 00:02:43,320 --> 00:02:46,850 In questo momento lasceremo vuoto il secondo div. 28 00:02:46,850 --> 00:02:53,140 Ho intenzione di compilare la tabella nel primo div qui e 29 00:02:53,140 --> 00:03:00,435 poi daremo una rapida occhiata alla tabella dopo aver aggiunto il codice per la tabella. 30 00:03:00,435 --> 00:03:04,525 Quindi qui ho elencato nel codice per la tabella. 31 00:03:04,525 --> 00:03:12,190 Diamo un'occhiata veloce al tavolo e poi torneremo a discutere di questo codice qui. 32 00:03:12,190 --> 00:03:20,075 Passando alla nostra pagina Informazioni su cui abbiamo già lavorato da prima, 33 00:03:20,075 --> 00:03:23,080 dopo la sezione Corporate Leadership, 34 00:03:23,080 --> 00:03:27,645 si vede una nuova riga qui che introduce la tabella. 35 00:03:27,645 --> 00:03:30,270 Quindi, nota come è in stile la tabella, 36 00:03:30,270 --> 00:03:36,695 quindi abbiamo l'intestazione con un h2 incluso lì, 37 00:03:36,695 --> 00:03:40,465 ma concentriamoci specificamente su questa tabella. 38 00:03:40,465 --> 00:03:43,735 Quindi vedete che questa tabella è stata disegnata 39 00:03:43,735 --> 00:03:48,125 utilizzando alcune classi Bootstrap che vengono utilizzate per migliorare la tabella. 40 00:03:48,125 --> 00:03:54,735 L' intestazione è stata renderizzata con uno sfondo scuro, 41 00:03:54,735 --> 00:04:00,770 quindi le regole sono tutte progettate in modo tale che le righe alternative siano di 42 00:04:00,770 --> 00:04:07,295 colore diverso in modo da poter distinguere chiaramente le righe di questa tabella. 43 00:04:07,295 --> 00:04:13,185 Questo è ciò che nei termini Bootstrap viene indicato come tabella a strisce. 44 00:04:13,185 --> 00:04:17,360 Questo è un esempio di come è possibile definire lo stile di una tabella. 45 00:04:17,360 --> 00:04:23,250 Ora interessante, se guardi la stessa tabella in un piccolo dispositivo, 46 00:04:23,250 --> 00:04:25,420 noterai che la tabella è ancora 47 00:04:25,420 --> 00:04:29,450 visibile tranne che questa tabella ora diventa scorrevole. 48 00:04:29,450 --> 00:04:34,280 Quindi, tutto ciò che può essere visualizzato all'interno del contenuto verrà mostrato e 49 00:04:34,280 --> 00:04:39,120 il resto della tabella può essere fatto scorrere orizzontalmente sul posto. 50 00:04:39,120 --> 00:04:47,840 Quindi questo è il componente reattivo del supporto di Bootstrap per le tabelle in azione. 51 00:04:47,840 --> 00:04:52,120 Ora andiamo a dare un'occhiata al codice stesso. 52 00:04:52,120 --> 00:04:54,970 Ora ovviamente questa tabella è abbastanza semplice, 53 00:04:54,970 --> 00:04:57,924 ha un sacco di righe e alcune colonne. 54 00:04:57,924 --> 00:05:02,070 Quindi ti aspetterai che io usi i tipici 55 00:05:02,070 --> 00:05:06,365 tag th, td e tr lì. 56 00:05:06,365 --> 00:05:08,225 Tornando al codice, 57 00:05:08,225 --> 00:05:12,490 noterai che sto allegando questa tabella all'interno di 58 00:05:12,490 --> 00:05:16,840 div a cui ho applicato la tabella di classe reattiva. 59 00:05:16,840 --> 00:05:19,700 Quindi questo è ciò che rende questa tabella reattiva in modo che su 60 00:05:19,700 --> 00:05:24,490 schermi più piccoli sia possibile scorrere orizzontalmente la tabella. 61 00:05:24,490 --> 00:05:26,720 Ora per la tabella stessa, 62 00:05:26,720 --> 00:05:29,800 nota come ho applicato due classi. 63 00:05:29,800 --> 00:05:31,230 Uno è la classe tabella, 64 00:05:31,230 --> 00:05:34,825 quindi questo sta sovrascrivendo il 65 00:05:34,825 --> 00:05:39,375 rendering predefinito della tabella sui browser fornendo classi proprie di Bootstrap. 66 00:05:39,375 --> 00:05:41,760 E il secondo dice a strisce da tavolo. 67 00:05:41,760 --> 00:05:48,280 Quindi questo è ciò che progetta una tabella con righe alternative in diversi colori qui. 68 00:05:48,280 --> 00:05:50,610 Quindi la testa stessa, 69 00:05:50,610 --> 00:05:55,050 in modo da poter vedere che le intestazioni descritte qui con la classe tead-scura, 70 00:05:55,050 --> 00:05:57,925 quindi questo rende la testa scura. 71 00:05:57,925 --> 00:06:06,630 E poi vedrai il tavolo disegnare stesso descritto qui con i tag th qui. 72 00:06:06,630 --> 00:06:09,480 Quindi questa è la definizione della tabella standard. 73 00:06:09,480 --> 00:06:16,410 Il corpo della tabella stessa è l'uso standard html di tr, 74 00:06:16,410 --> 00:06:22,760 td, e th elementi che hai già familiarità con in html5. 75 00:06:22,760 --> 00:06:27,180 Quindi, questo è ciò con cui è costruita la tabella 76 00:06:27,180 --> 00:06:31,075 e quindi chiudi il corpo della tabella. Quindi questo è tutto. 77 00:06:31,075 --> 00:06:36,670 Quindi tutto ciò che è unico di Bootstrap stesso è l'applicazione di 78 00:06:36,670 --> 00:06:40,060 queste classi specifiche Bootstrap 79 00:06:40,060 --> 00:06:47,130 all'elemento tabella stesso per lo stile ulteriormente, 80 00:06:47,130 --> 00:06:51,360 per adattarsi a una pagina web di progettazione Bootstrap. 81 00:06:51,360 --> 00:06:55,360 Il prossimo componente che aggiungerò nella 82 00:06:55,360 --> 00:06:59,595 pagina aboutus.html è un componente della scheda in Bootstrap. 83 00:06:59,595 --> 00:07:02,650 Il componente della scheda ci permette di visualizzare il contenuto 84 00:07:02,650 --> 00:07:06,850 impostandolo separatamente dal resto di quel contenuto. 85 00:07:06,850 --> 00:07:12,925 Ora qui, scorrendo fino alla prima riga qui, 86 00:07:12,925 --> 00:07:16,925 lì abbiamo la nostra storia nel secondo uso div, si 87 00:07:16,925 --> 00:07:20,915 noti che il primo div sta già occupando col-sm-6, 88 00:07:20,915 --> 00:07:23,915 il secondo div è attualmente vuoto. 89 00:07:23,915 --> 00:07:25,355 Quindi a questo div, 90 00:07:25,355 --> 00:07:31,320 aggiungerò nella classe come col-sm. 91 00:07:31,320 --> 00:07:40,670 Successivamente, andando in questo div introdurrò un altro div alla scheda di classe qui. 92 00:07:40,670 --> 00:07:42,325 Quindi all'interno di quei div, 93 00:07:42,325 --> 00:07:46,755 ho intenzione di costruire la mia scheda per visualizzare alcuni contenuti qui. 94 00:07:46,755 --> 00:07:53,870 Quindi, in questo div, introdurremo un h3 che 95 00:07:53,870 --> 00:08:05,235 la classe come card-header bg-primario. 96 00:08:05,235 --> 00:08:08,110 Quindi vedrai che questo h3 verrà visualizzato come 97 00:08:08,110 --> 00:08:12,755 intestazione di una carta con quello sfondo come primario 98 00:08:12,755 --> 00:08:21,165 e poi testo bianco quale classe Bootstrap definirà il testo di colore bianco. 99 00:08:21,165 --> 00:08:24,715 E poi all'interno di questo h3, 100 00:08:24,715 --> 00:08:31,090 ho intenzione di introdurre il titolo di questa scheda qui che 101 00:08:31,090 --> 00:08:37,580 è 'Fatti a colpo d'occhio. ' 102 00:08:37,580 --> 00:08:41,950 In modo da poter mostrare alcuni contenuti all'interno di questo div qui. 103 00:08:41,950 --> 00:08:44,915 Ora, a questa scheda, 104 00:08:44,915 --> 00:08:48,520 dopo ho intenzione di aggiungere un altro div interno 105 00:08:48,520 --> 00:08:55,950 qui con la classe come card-body, 106 00:08:55,950 --> 00:08:59,080 e all'interno di questo card-body sarà 107 00:08:59,080 --> 00:09:03,370 il contenuto effettivo che sono stati visualizzati in questa scheda. 108 00:09:03,370 --> 00:09:10,310 Salviamo le modifiche e poi andiamo a dare un'occhiata rapidamente alla nostra pagina web. 109 00:09:10,310 --> 00:09:12,100 Andando alla nostra pagina web, 110 00:09:12,100 --> 00:09:15,860 possiamo già vedere la carta prendere forma nella nostra pagina web, in 111 00:09:15,860 --> 00:09:19,620 modo da poter vedere che la metà sinistra è occupata dalla Storia 112 00:09:19,620 --> 00:09:24,085 e la metà destra vedrete la carta messa in atto. 113 00:09:24,085 --> 00:09:27,135 Aggiungiamo un po' di contenuto in questa scheda. 114 00:09:27,135 --> 00:09:29,140 Entrando in questo blocco di schede, 115 00:09:29,140 --> 00:09:32,220 ora userò un elenco di descrizioni 116 00:09:32,220 --> 00:09:36,080 e questo elenco di descrizioni in Bootstrap mi permette di 117 00:09:36,080 --> 00:09:45,705 applicare le classi di riga e colonna ad esso e quindi formattare il contenuto all'interno. 118 00:09:45,705 --> 00:09:48,360 Quindi all'interno di questa lista di descrizioni, 119 00:09:48,360 --> 00:09:52,190 aggiungerò 120 00:09:54,890 --> 00:10:00,110 nel dt che la classe e col-6 qui, 121 00:10:00,110 --> 00:10:03,420 quindi significa che questo occuperà sei colonne 122 00:10:03,420 --> 00:10:07,085 all'interno di questa lista di descrizioni che a sua volta è una riga qui. 123 00:10:07,085 --> 00:10:13,785 Così nidificazione come vedete venire in foto qui. 124 00:10:13,785 --> 00:10:16,250 Quindi a questo dt, 125 00:10:16,250 --> 00:10:20,190 aggiungerò così questo titolo di descrizione qui, 126 00:10:20,190 --> 00:10:25,470 e poi sotto che aggiungerò il dd con 127 00:10:25,470 --> 00:10:33,330 la classe col-6 qui e poi posso aggiungere in qualche contesto qui. 128 00:10:36,960 --> 00:10:40,310 E qui Dd. 129 00:10:41,880 --> 00:10:46,755 Salviamo le modifiche e diamo un'occhiata veloce alla nostra scheda. 130 00:10:46,755 --> 00:10:50,445 Andando alla nostra scheda, è ora possibile vedere come 131 00:10:50,445 --> 00:10:55,265 l'elenco descrizione mi permette di visualizzare le informazioni. 132 00:10:55,265 --> 00:11:02,700 All' interno del mio biglietto, è possibile vedere chiaramente il lato sinistro e il lato destro. 133 00:11:02,700 --> 00:11:07,035 Qui stiamo approfittando della lista descrizione e, 134 00:11:07,035 --> 00:11:09,215 aggiungendo le informazioni lì. 135 00:11:09,215 --> 00:11:14,590 Lasciami finire le parti rimanenti qui aggiungendo il codice, 136 00:11:14,590 --> 00:11:19,745 e poi tornare indietro e dare un'occhiata alla versione finale di questa carta. 137 00:11:19,745 --> 00:11:22,850 Qui, puoi vedere che ho completato l'aggiunta nelle 138 00:11:22,850 --> 00:11:25,895 restanti parti della mia lista di descrizione. 139 00:11:25,895 --> 00:11:31,155 Andiamo a dare un'occhiata alla nostra versione finale di quella carta. 140 00:11:31,155 --> 00:11:33,290 Dando un'occhiata alla carta, 141 00:11:33,290 --> 00:11:34,620 e come sta prendendo forma. 142 00:11:34,620 --> 00:11:39,340 Qui, è ora possibile vedere come possiamo fare uso di una scheda per visualizzare 143 00:11:39,340 --> 00:11:41,760 alcuni contenuti nella nostra pagina web e 144 00:11:41,760 --> 00:11:44,725 distinguerlo dal resto del contenuto della pagina Web. 145 00:11:44,725 --> 00:11:50,325 Quindi, una scheda è un componente molto versatile che ci permette di visualizzare contenuti come questo. 146 00:11:50,325 --> 00:11:52,500 Continuiamo con questo esercizio, 147 00:11:52,500 --> 00:11:56,785 aggiungendo un'altra scheda a questa pagina web. 148 00:11:56,785 --> 00:12:01,410 Torniamo ora di nuovo alla nostra pagina aboutus.html. 149 00:12:01,410 --> 00:12:06,170 E proprio sotto la scheda che abbiamo già aggiunto in precedenza, 150 00:12:06,170 --> 00:12:14,790 ho intenzione di aggiungere un altro div con la classe «col-12" qui. 151 00:12:14,790 --> 00:12:16,910 E poi, all'interno di questo div, 152 00:12:16,910 --> 00:12:24,670 ho intenzione di costruire un'altra scheda qui per visualizzare alcune informazioni aggiuntive. 153 00:12:24,670 --> 00:12:26,495 Quindi all'interno di questo div, 154 00:12:26,495 --> 00:12:30,210 costruirò una carta con 155 00:12:30,210 --> 00:12:38,915 la classe «card-body bg-light». 156 00:12:38,915 --> 00:12:45,580 Quindi, vedrai che sto applicando sia la carta che il card-body allo stesso div qui. 157 00:12:45,580 --> 00:12:49,300 Quindi il che significa che questa particolare carta non avrà 158 00:12:49,300 --> 00:12:54,835 alcuna intestazione della carta, ma invece contiene solo il card-body qui. 159 00:12:54,835 --> 00:12:59,545 E poi, anche, il bg-light significa che lo sfondo sarà in colore sbiadito. 160 00:12:59,545 --> 00:13:05,120 Un po 'di un colore grigiastro aggiunto allo sfondo. 161 00:13:05,120 --> 00:13:10,495 Quindi questo cerca anche questa carta a parte il resto del contenuto qui. 162 00:13:10,495 --> 00:13:12,815 Ora, all'interno di questo biglietto, 163 00:13:12,815 --> 00:13:16,250 farò uso di un codice di blocco per mostrare 164 00:13:16,250 --> 00:13:20,700 qualche interessante e divertente pezzo di informazioni lì. 165 00:13:20,700 --> 00:13:23,980 Quindi userò un blockquote. 166 00:13:23,980 --> 00:13:30,965 Questo è anche un tag HTML qui. 167 00:13:30,965 --> 00:13:37,005 E poi a questo, applicherò la classe blockquote di Bootstrap. 168 00:13:37,005 --> 00:13:42,590 Quindi Bootstrap crea questo blockquote a modo suo. 169 00:13:42,980 --> 00:13:46,429 Quindi chiudiamo quella citazione di blocco. 170 00:13:46,429 --> 00:13:47,870 E all'interno di questo blockquote, 171 00:13:47,870 --> 00:13:51,910 includerò una citazione qui. 172 00:13:51,910 --> 00:13:54,320 Quindi inizierò con una p 173 00:13:54,320 --> 00:13:56,760 e applicherò una classe chiamata mb-0. 174 00:13:56,760 --> 00:14:02,920 Il mb-0 è una classe di utilità fornita da Bootstrap. 175 00:14:02,920 --> 00:14:05,775 Ciò che significa è margino-basso zero. 176 00:14:05,775 --> 00:14:09,640 Per questo particolare, qualunque cosa sia inclusa in questo tag p, 177 00:14:09,640 --> 00:14:12,135 avremo un margine inferiore di zero. 178 00:14:12,135 --> 00:14:15,865 E questo mi aiuta a visualizzare correttamente il contenuto qui. 179 00:14:15,865 --> 00:14:24,900 Quindi qui ho intenzione di aggiungere il contenuto effettivo lì, 180 00:14:49,850 --> 00:14:54,970 e poi chiudere questa p. Quindi questa p contiene la citazione effettiva. 181 00:14:54,970 --> 00:14:56,560 Ora, a questa citazione, in 182 00:14:56,560 --> 00:14:59,180 modo da vedere che nel tuo contenuto, 183 00:14:59,180 --> 00:15:05,320 puoi anche includere citazioni nel tuo codice lì. 184 00:15:05,320 --> 00:15:10,730 Quindi a questo, posso anche aggiungere un piè di pagina con la classe. 185 00:15:10,730 --> 00:15:14,900 Quindi fammi spingere il rientro del piè di pagina. 186 00:15:14,900 --> 00:15:20,080 Quindi questo piè di pagina è anche una classe supportata da blockquote. 187 00:15:20,080 --> 00:15:26,620 Quindi, qualunque cosa tu includa nel blockquote, 188 00:15:28,570 --> 00:15:31,105 insieme al footer, 189 00:15:31,105 --> 00:15:39,540 ti permetterà di visualizzare l'autore di questa citazione. 190 00:15:40,420 --> 00:15:45,620 Quindi eccomi qui l'autore, 191 00:15:45,620 --> 00:15:49,165 e poi un altro. 192 00:15:49,165 --> 00:15:58,860 Usando la citazione, posso anche citare la fonte di questa citazione. 193 00:16:01,740 --> 00:16:04,790 Così si può vedere. 194 00:16:24,870 --> 00:16:32,955 Ancora una volta, questa è solo una citazione che sto usando solo per divertimento per mostrarti, 195 00:16:32,955 --> 00:16:35,355 anche allo stesso tempo illustrando, 196 00:16:35,355 --> 00:16:42,405 come funziona il blockquote, 197 00:16:42,405 --> 00:16:47,800 e anche come possiamo creare un altro tipo di scheda in Bootstrap. 198 00:16:47,800 --> 00:16:55,845 Quindi con questo, abbiamo aggiunto nel codice per visualizzare il blockquote qui. 199 00:16:55,845 --> 00:16:57,890 Quindi fammi vedere se questo cambia, 200 00:16:57,890 --> 00:17:04,995 e poi andremo a dare un'occhiata a come questa citazione viene visualizzata nella nostra pagina web. 201 00:17:04,995 --> 00:17:09,270 Andando al browser, nella nostra pagina, 202 00:17:09,270 --> 00:17:14,310 puoi vedere che la nostra storia e i fatti a colpo d'occhio vengono visualizzati fianco a fianco. 203 00:17:14,310 --> 00:17:22,360 Sotto quello, ho questo lungo pezzo di contenuto qui. 204 00:17:22,360 --> 00:17:27,850 Diamo un'occhiata alla stessa pagina in uno schermo extra piccolo. 205 00:17:27,850 --> 00:17:29,250 Quindi, in uno schermo extra piccolo, 206 00:17:29,250 --> 00:17:33,840 si può vedere che la storia e i fatti sono impilati in cima, 207 00:17:33,840 --> 00:17:38,120 e la citazione è proprio qui sotto nella sua carta. 208 00:17:38,120 --> 00:17:40,130 Quindi puoi vedere due carte, 209 00:17:40,130 --> 00:17:42,225 una sotto l'altra qui, 210 00:17:42,225 --> 00:17:45,860 e poi la tabella stessa visualizzata in basso. 211 00:17:45,860 --> 00:17:50,685 Quindi la tabella stessa è una tabella scorrevole qui. 212 00:17:50,685 --> 00:17:54,885 Quindi con questo, completiamo questo esercizio. 213 00:17:54,885 --> 00:17:56,330 Quindi, in questo esercizio, 214 00:17:56,330 --> 00:18:05,950 abbiamo imparato come possiamo usare tabelle e schede per visualizzare i contenuti nella nostra pagina web. 215 00:18:05,950 --> 00:18:08,690 Ora che abbiamo completato questo esercizio, 216 00:18:08,690 --> 00:18:12,610 è un buon momento per fare un commit git.