1
00:00:00,000 --> 00:00:04,642
[MUSIC]

2
00:00:04,642 --> 00:00:09,310
Parliamo brevemente delle tabelle di bootstrap.

3
00:00:09,310 --> 00:00:15,537
Cosa porta bootstrap alle tabelle di styling che includiamo nelle nostre pagine web?

4
00:00:15,537 --> 00:00:20,636
Vedremo anche un altro componente bootstrap chiamato come scheda bootstrap,

5
00:00:20,636 --> 00:00:24,790
che è un componente molto versatile per la visualizzazione del contenuto.

6
00:00:26,520 --> 00:00:31,438
Ci possono essere molte occasioni in cui si desidera presentare contenuti tabulari

7
00:00:31,438 --> 00:00:32,717
sulla vostra pagina web.

8
00:00:32,717 --> 00:00:37,021
Le tabelle sono state essenzialmente progettate per

9
00:00:37,021 --> 00:00:41,998
questo scopo, ma presto dopo che

10
00:00:41,998 --> 00:00:46,706
i progettisti di pagine web hanno dirottato le tabelle in uso per la

11
00:00:46,706 --> 00:00:52,170
progettazione e la disposizione del contenuto nelle pagine.

12
00:00:52,170 --> 00:00:56,992
Perché intrinsecamente, l'HTML originale non aveva

13
00:00:56,992 --> 00:01:01,931
la possibilità di disporre correttamente il contenuto in una pagina Web.

14
00:01:01,931 --> 00:01:07,175
Naturalmente, con l'arrivo di layout basati su griglia come la griglia di bootstrap,

15
00:01:07,175 --> 00:01:09,804
le tabelle sono state attivate su tabelle.

16
00:01:09,804 --> 00:01:14,379
E sempre più, le persone preferiscono non utilizzare le tabelle

17
00:01:14,379 --> 00:01:19,465
come un tipo principale di layout di contenuti di costruzione nelle pagine web.

18
00:01:19,465 --> 00:01:24,440
I layout basati su griglia sono progettati meglio per questo scopo.

19
00:01:24,440 --> 00:01:29,896
Ecco un esempio di cosa possiamo fare a una tabella HTML standard

20
00:01:29,896 --> 00:01:36,736
utilizzando diverse classi che bootstrap fornisce per le tabelle di styling.

21
00:01:36,736 --> 00:01:41,951
Quindi qui, puoi vedere che l'insieme

22
00:01:41,951 --> 00:01:47,371
visualizzandolo in colore più scuro e quindi le righe stesse sono evidenziate

23
00:01:47,371 --> 00:01:53,020
visualizzando righe alternative con backup diversi.

24
00:01:53,020 --> 00:01:58,168
La tabella utilizzata in bootstrap basata su quella pagina

25
00:01:58,168 --> 00:02:04,898
è simile a come si utilizzano le tabelle nelle pagine HTML standard.

26
00:02:04,898 --> 00:02:09,220
Ma ovviamente, applichi la tabella di classe

27
00:02:09,220 --> 00:02:14,610
supportata in bootstrap a una tecnologia di tabella standard.

28
00:02:14,610 --> 00:02:21,490
Inoltre, bootstrap fornisce molte classi diverse per le tabelle di styling come,

29
00:02:21,490 --> 00:02:27,410
tabella striping per tabelle zebrate come abbiamo visto nell'esempio precedente.

30
00:02:27,410 --> 00:02:30,433
Allo stesso modo, abbiamo tavolo delimitato per i bordi.

31
00:02:30,433 --> 00:02:38,136
Tavoli, table-hover, table-sm per tavoli con imbottitura a celle tagliate a metà.

32
00:02:38,136 --> 00:02:43,289
E allo stesso modo, la tabella reattiva può essere applicata a un div attorno alle tabelle, in modo

33
00:02:43,289 --> 00:02:48,696
che le tabelle possano essere rese reattive dove viene mostrata su schermi di dimensioni più piccole.

34
00:02:48,696 --> 00:02:54,723
Le tabelle saranno quindi in grado di scorrere orizzontalmente e verticalmente.

35
00:02:54,723 --> 00:03:00,039
Inoltre, è possibile applicare sfondi a singole righe di tabelle o

36
00:03:00,039 --> 00:03:02,480
intere tabelle stesse.

37
00:03:02,480 --> 00:03:08,454
Di seguito sono riportati alcuni esempi di come è possibile applicare un

38
00:03:08,454 --> 00:03:13,766
colore di sfondo a una riga particolare o a una particolare cella nella tabella.

39
00:03:13,766 --> 00:03:18,478
Un altro componente versatile disponibile in bootstrap

40
00:03:18,478 --> 00:03:20,695
è una scheda bootstrap.

41
00:03:20,695 --> 00:03:24,708
A volte, potresti voler evidenziare alcuni contenuti sulla tua pagina web.

42
00:03:24,708 --> 00:03:28,695
Quindi è qui che il bootstrap viene in tuo aiuto.

43
00:03:28,695 --> 00:03:33,172
Nella scheda Bootstrap è un componente versatile che consente di

44
00:03:33,172 --> 00:03:35,904
visualizzare il contenuto in miriadi di modi.

45
00:03:35,904 --> 00:03:40,360
Si noterà che ti permette di avere intestazioni per le carte.

46
00:03:40,360 --> 00:03:42,625
È inoltre possibile includere immagini nelle schede.

47
00:03:42,625 --> 00:03:45,615
È possibile includere immagini sullo sfondo delle schede.

48
00:03:45,615 --> 00:03:49,470
È anche possibile modificare i colori di sfondo delle carte.

49
00:03:49,470 --> 00:03:52,450
Molte funzionalità sono supportate da schede.

50
00:03:53,530 --> 00:03:59,218
Ecco un paio di esempi di carte che vedremo negli esercizi più avanti.

51
00:03:59,218 --> 00:04:04,974
Vedremo anche più versatile noi di carte in esercizi successivi e

52
00:04:04,974 --> 00:04:09,090
altri corsi in questa specializzazione.

53
00:04:09,090 --> 00:04:14,090
Card è una società molto importante che può essere efficacemente utilizzato per la

54
00:04:14,090 --> 00:04:15,900
visualizzazione di contenuti.

55
00:04:15,900 --> 00:04:21,203
È ora di passare al prossimo esercizio in cui useremo tabelle e

56
00:04:21,203 --> 00:04:24,844
schede per visualizzare alcuni contenuti nella nostra pagina web.

57
00:04:24,844 --> 00:04:30,629
[ MUSIC]