1
00:00:00,000 --> 00:00:04,642
[MÚSICA]

2
00:00:04,642 --> 00:00:09,310
Vamos discutir brevemente sobre tabelas bootstrap.

3
00:00:09,310 --> 00:00:15,537
O que o bootstrap traz para tabelas de estilo que incluímos em nossas páginas da web?

4
00:00:15,537 --> 00:00:20,636
Vamos também olhar para outro componente bootstrap chamado como cartão bootstrap,

5
00:00:20,636 --> 00:00:24,790
que é um componente muito versátil para exibir conteúdo.

6
00:00:26,520 --> 00:00:31,438
Pode haver muitas ocasiões em que você deseja apresentar conteúdo tabular

7
00:00:31,438 --> 00:00:32,717
em sua página web.

8
00:00:32,717 --> 00:00:37,021
As tabelas foram essencialmente projetadas para

9
00:00:37,021 --> 00:00:41,998
esse propósito, mas logo depois que

10
00:00:41,998 --> 00:00:46,706
os designers de páginas web seqüestraram tabelas para usar para

11
00:00:46,706 --> 00:00:52,170
projetar e colocar para fora o conteúdo nas páginas.

12
00:00:52,170 --> 00:00:56,992
Porque, inerentemente, o HTML original não tinha

13
00:00:56,992 --> 00:01:01,931
a capacidade de colocar corretamente o conteúdo em uma página da Web.

14
00:01:01,931 --> 00:01:07,175
É claro que, com a chegada de layouts baseados em grade, como a grade de bootstrap,

15
00:01:07,175 --> 00:01:09,804
as tabelas foram ativadas em tabelas.

16
00:01:09,804 --> 00:01:14,379
E cada vez mais, as pessoas estão preferindo não usar tabelas

17
00:01:14,379 --> 00:01:19,465
como um tipo principal de layout de conteúdo de construção em páginas da web. Os

18
00:01:19,465 --> 00:01:24,440
layouts baseados em grade são melhor projetados para esse propósito.

19
00:01:24,440 --> 00:01:29,896
Aqui está um exemplo do que podemos fazer para uma tabela HTML padrão

20
00:01:29,896 --> 00:01:36,736
usando várias classes que bootstrap fornece para tabelas de estilo.

21
00:01:36,736 --> 00:01:41,951
Então, aqui, você pode ver que o conjunto separado,

22
00:01:41,951 --> 00:01:47,371
exibindo-o em cores mais escuras e, em seguida, as próprias linhas são realçadas

23
00:01:47,371 --> 00:01:53,020
exibindo linhas alternativas com diferentes backups.

24
00:01:53,020 --> 00:01:58,168
A tabela usada no bootstrap com base nessa página

25
00:01:58,168 --> 00:02:04,898
é semelhante à forma como você usa tabelas em páginas HTML padrão.

26
00:02:04,898 --> 00:02:09,220
Mas, claro, você aplica a tabela de classe que é

27
00:02:09,220 --> 00:02:14,610
suportada no bootstrap para uma tecnologia de tabela padrão.

28
00:02:14,610 --> 00:02:21,490
Além disso, bootstrap fornece muitas classes diferentes para tabelas de estilo como,

29
00:02:21,490 --> 00:02:27,410
tabela listrada para tabelas listradas zebra como vimos no exemplo anteriormente.

30
00:02:27,410 --> 00:02:30,433
Da mesma forma, temos tabela delimitada para fronteiras.

31
00:02:30,433 --> 00:02:38,136
Tabelas, pairar mesa, table-sm para mesas com preenchimento de célula cortado ao meio.

32
00:02:38,136 --> 00:02:43,289
E da mesma forma, tabela responsiva pode ser aplicada a uma div em torno de tabelas, de modo

33
00:02:43,289 --> 00:02:48,696
que as tabelas podem ser tornadas responsivas onde ele é mostrado em tamanhos de tela menores.

34
00:02:48,696 --> 00:02:54,723
As tabelas poderão então rolar horizontalmente e verticalmente.

35
00:02:54,723 --> 00:03:00,039
Além disso, você pode aplicar planos de fundo a uma linha individual de tabelas ou

36
00:03:00,039 --> 00:03:02,480
tabelas inteiras.

37
00:03:02,480 --> 00:03:08,454
Aqui estão alguns exemplos de como você pode aplicar uma

38
00:03:08,454 --> 00:03:13,766
cor de plano de fundo a uma linha específica ou uma célula específica na tabela.

39
00:03:13,766 --> 00:03:18,478
Outro componente versátil que está disponível no bootstrap

40
00:03:18,478 --> 00:03:20,695
é uma placa de bootstrap.

41
00:03:20,695 --> 00:03:24,708
Às vezes, você pode querer destacar algum conteúdo em sua página da Web.

42
00:03:24,708 --> 00:03:28,695
Então é aqui que o bootstrap vem em seu auxílio.

43
00:03:28,695 --> 00:03:33,172
No cartão Bootstrap é um componente versátil que permite

44
00:03:33,172 --> 00:03:35,904
exibir o conteúdo em miríades de maneiras.

45
00:03:35,904 --> 00:03:40,360
Você notaria que ele permite que você tenha cabeçalhos para cartões.

46
00:03:40,360 --> 00:03:42,625
Você também pode incluir imagens em cartões.

47
00:03:42,625 --> 00:03:45,615
Você pode incluir imagens no fundo dos cartões.

48
00:03:45,615 --> 00:03:49,470
Você pode até mesmo alterar as cores de fundo dos cartões.

49
00:03:49,470 --> 00:03:52,450
Muitos recursos são suportados por cartões.

50
00:03:53,530 --> 00:03:59,218
Aqui estão alguns exemplos de cartões que veremos nos exercícios mais tarde.

51
00:03:59,218 --> 00:04:04,974
Nós também veremos mais versátil nós de cartões em exercícios posteriores e

52
00:04:04,974 --> 00:04:09,090
outros cursos nesta especialização.

53
00:04:09,090 --> 00:04:14,090
Cartão é uma empresa muito importante que pode ser efetivamente usado para

54
00:04:14,090 --> 00:04:15,900
exibir conteúdo.

55
00:04:15,900 --> 00:04:21,203
É hora de passar para o próximo exercício, onde usaremos tabelas e

56
00:04:21,203 --> 00:04:24,844
cartões para exibir algum conteúdo em nossa página web.

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