1 00:00:03,750 --> 00:00:11,555 Nosso próximo exercício analisa formas de exibir conteúdo em nossa página web. 2 00:00:11,555 --> 00:00:17,190 Eles olham para como podemos incluir tabelas em nossa página web e como podemos 3 00:00:17,190 --> 00:00:23,845 estilizar essas tabelas usando as classes do Bootstrap para estilizar tabelas, 4 00:00:23,845 --> 00:00:27,720 incluindo design responsivo de tabelas. 5 00:00:27,720 --> 00:00:30,860 Vamos também olhar para outro componente versátil 6 00:00:30,860 --> 00:00:34,290 que está disponível no Bootstrap chamado como um cartão. 7 00:00:34,290 --> 00:00:39,125 Um cartão permite que você exiba conteúdo de milhões de maneiras. 8 00:00:39,125 --> 00:00:44,495 Então, analisaremos duas maneiras diferentes de usar um cartão para exibir conteúdo. 9 00:00:44,495 --> 00:00:49,275 Mais tarde, veremos o uso de cartões uma e outra vez 10 00:00:49,275 --> 00:00:56,635 para projetos futuros de certas partes do nosso site. 11 00:00:56,635 --> 00:01:02,520 Para começar, abra a página aboutus.html. 12 00:01:02,520 --> 00:01:06,035 Vamos inserir uma tabela e dois cartões 13 00:01:06,035 --> 00:01:10,215 na página aboutus.html para exibir algum cartão. 14 00:01:10,215 --> 00:01:19,130 Primeiro, vamos lentamente rolar para baixo até depois daquele cartão para obter informações sobre liderança, 15 00:01:19,130 --> 00:01:23,170 e bem ali vou introduzir outra div dentro da 16 00:01:23,170 --> 00:01:28,045 qual vou colocar a tabela aqui. 17 00:01:28,045 --> 00:01:31,640 Então, vou introduzir uma nova linha aqui, 18 00:01:31,640 --> 00:01:38,135 com a classe como linha de conteúdo. 19 00:01:38,135 --> 00:01:41,185 E dentro desta div, 20 00:01:41,185 --> 00:01:51,205 vamos introduzir uma coluna que hospedará a tabela aqui. 21 00:01:51,205 --> 00:01:55,850 Então, vou introduzir uma coluna, coluna 12, 22 00:01:55,870 --> 00:02:05,045 coluna sm-9 e fechar a div. 23 00:02:05,045 --> 00:02:11,605 E dentro div, deixe-me dar um título aqui 24 00:02:11,605 --> 00:02:21,940 fatos e figuras e fechar o h2. 25 00:02:23,490 --> 00:02:29,770 Logo depois disso, deixe-me introduzir outra div, 26 00:02:33,140 --> 00:02:43,320 que as classes coluna sm e coluna sm-3 e fechar que div lá. 27 00:02:43,320 --> 00:02:46,850 Agora vamos deixar a segunda div vazia. 28 00:02:46,850 --> 00:02:53,140 Eu vou preencher a tabela na primeira div aqui e 29 00:02:53,140 --> 00:03:00,435 então vamos dar uma olhada rápida na tabela depois que eu adicionar no código para a tabela. 30 00:03:00,435 --> 00:03:04,525 Então aqui eu listei no código para a tabela. 31 00:03:04,525 --> 00:03:12,190 Vamos dar uma olhada rápida na mesa e depois voltamos para discutir este código aqui. 32 00:03:12,190 --> 00:03:20,075 Indo para nossa página Sobre que já trabalhamos anteriormente, 33 00:03:20,075 --> 00:03:23,080 após a seção Liderança Corporativa, 34 00:03:23,080 --> 00:03:27,645 você verá uma nova linha aqui apresentando a tabela. 35 00:03:27,645 --> 00:03:30,270 Então, observe como a tabela é estilizada, 36 00:03:30,270 --> 00:03:36,695 então temos o cabeçalho com um h2 incluído lá, 37 00:03:36,695 --> 00:03:40,465 mas vamos nos concentrar especificamente nesta tabela. 38 00:03:40,465 --> 00:03:43,735 Então você vê que esta tabela foi estilizada 39 00:03:43,735 --> 00:03:48,125 usando algumas classes Bootstrap que são usadas para melhorar a tabela. 40 00:03:48,125 --> 00:03:54,735 O cabeçalho foi renderizado com um plano de fundo escuro 41 00:03:54,735 --> 00:04:00,770 e, em seguida, as regras são todas projetadas de tal forma que linhas alternativas são de 42 00:04:00,770 --> 00:04:07,295 cor diferente para que você possa distinguir claramente as linhas desta tabela. 43 00:04:07,295 --> 00:04:13,185 Isto é o que em termos Bootstrap é referido como tabela listrada. 44 00:04:13,185 --> 00:04:17,360 Este é um exemplo de como você pode estilizar uma tabela. 45 00:04:17,360 --> 00:04:23,250 Agora, curiosamente, se você olhar para a mesma tabela em um pequeno dispositivo, 46 00:04:23,250 --> 00:04:25,420 você notaria que a tabela ainda está 47 00:04:25,420 --> 00:04:29,450 visível, exceto que esta tabela agora se torna rolável. 48 00:04:29,450 --> 00:04:34,280 Assim, tudo o que pode ser exibido dentro do conteúdo será mostrado e 49 00:04:34,280 --> 00:04:39,120 o resto da tabela pode ser deslocado horizontalmente no lugar. 50 00:04:39,120 --> 00:04:47,840 Então este é o componente responsivo do suporte do Bootstrap para tabelas em ação. 51 00:04:47,840 --> 00:04:52,120 Agora vamos dar uma olhada no código em si. 52 00:04:52,120 --> 00:04:54,970 Agora, obviamente, esta tabela é bastante simples, 53 00:04:54,970 --> 00:04:57,924 tem um monte de linhas e algumas colunas. 54 00:04:57,924 --> 00:05:02,070 Então você estará esperando que eu use as típicas 55 00:05:02,070 --> 00:05:06,365 tags th, td e tr lá. 56 00:05:06,365 --> 00:05:08,225 Voltando para o código, 57 00:05:08,225 --> 00:05:12,490 você vai notar que eu estou anexando esta tabela dentro de 58 00:05:12,490 --> 00:05:16,840 div para o qual eu apliquei a tabela de classe responsivo. 59 00:05:16,840 --> 00:05:19,700 Então é isso que torna esta tabela responsiva para que em 60 00:05:19,700 --> 00:05:24,490 telas menores você possa rolar horizontalmente a tabela. 61 00:05:24,490 --> 00:05:26,720 Agora, para a mesa em si, 62 00:05:26,720 --> 00:05:29,800 observe como eu apliquei duas classes. 63 00:05:29,800 --> 00:05:31,230 Uma é a classe tabela, 64 00:05:31,230 --> 00:05:34,825 então isso está substituindo a 65 00:05:34,825 --> 00:05:39,375 renderização padrão da tabela em navegadores, fornecendo as próprias classes do Bootstrap. 66 00:05:39,375 --> 00:05:41,760 E o segundo diz “mesa listrada”. 67 00:05:41,760 --> 00:05:48,280 Então é isso que projeta uma tabela com linhas alternativas em cores diferentes aqui. 68 00:05:48,280 --> 00:05:50,610 Em seguida, a cabeça em si, 69 00:05:50,610 --> 00:05:55,050 para que você possa ver que os cabeçalhos descritos aqui com a classe thead-dark, 70 00:05:55,050 --> 00:05:57,925 então isso torna a cabeça escura. 71 00:05:57,925 --> 00:06:06,630 E então você verá a tabela desenhar em si descrito aqui com as tags th aqui. 72 00:06:06,630 --> 00:06:09,480 Então esta é a definição de tabela padrão. 73 00:06:09,480 --> 00:06:16,410 O corpo da tabela em si é o uso html padrão de tr, 74 00:06:16,410 --> 00:06:22,760 e td, e os elementos que você já está familiarizado com em html5. 75 00:06:22,760 --> 00:06:27,180 Então, é com isso que a tabela é construída, 76 00:06:27,180 --> 00:06:31,075 e então você fecha o corpo da mesa. Então, é só isso. 77 00:06:31,075 --> 00:06:36,670 Então, tudo o que é único sobre Bootstrap em si é a aplicação 78 00:06:36,670 --> 00:06:40,060 destas classes Bootstrap específicas para 79 00:06:40,060 --> 00:06:47,130 o próprio elemento de tabela para estilizá-lo ainda mais, 80 00:06:47,130 --> 00:06:51,360 para caber em uma página web de design Bootstrap. 81 00:06:51,360 --> 00:06:55,360 O próximo componente que vou adicionar na 82 00:06:55,360 --> 00:06:59,595 página aboutus.html é um componente de cartão no Bootstrap. 83 00:06:59,595 --> 00:07:02,650 O componente cartão nos permite exibir o conteúdo, 84 00:07:02,650 --> 00:07:06,850 definindo-o para além do resto desse conteúdo. 85 00:07:06,850 --> 00:07:12,925 Agora aqui, rolando para a primeira linha aqui, 86 00:07:12,925 --> 00:07:16,925 lá temos nosso histórico no segundo uso div, 87 00:07:16,925 --> 00:07:20,915 observe que o primeiro div já está ocupando col-sm-6, 88 00:07:20,915 --> 00:07:23,915 o segundo div está atualmente vazio. 89 00:07:23,915 --> 00:07:25,355 Então, a esta div, 90 00:07:25,355 --> 00:07:31,320 vou adicionar na classe como col-sm. 91 00:07:31,320 --> 00:07:40,670 Depois disso, entrando neste div vou introduzir outro div para o cartão de classe aqui. 92 00:07:40,670 --> 00:07:42,325 Então, dentro desses div, 93 00:07:42,325 --> 00:07:46,755 eu vou construir meu cartão para exibir algum conteúdo aqui. 94 00:07:46,755 --> 00:07:53,870 Então, nesta div, vamos introduzir um h3 que 95 00:07:53,870 --> 00:08:05,235 a classe como card-header bg-primary. 96 00:08:05,235 --> 00:08:08,110 Então você vai ver que este h3 será exibido como 97 00:08:08,110 --> 00:08:12,755 um cabeçalho de cartão com esse fundo como primário 98 00:08:12,755 --> 00:08:21,165 e, em seguida, texto branco qual classe Bootstrap irá definir o texto para ser branco na cor. 99 00:08:21,165 --> 00:08:24,715 E então dentro deste h3, 100 00:08:24,715 --> 00:08:31,090 eu vou apresentar o título para este cartão aqui que 101 00:08:31,090 --> 00:08:37,580 é 'Fatos em um relance. ' 102 00:08:37,580 --> 00:08:41,950 Para que eu possa mostrar algum conteúdo dentro desta div aqui. 103 00:08:41,950 --> 00:08:44,915 Agora, a este cartão, em 104 00:08:44,915 --> 00:08:48,520 seguida eu vou adicionar em outro div interno 105 00:08:48,520 --> 00:08:55,950 aqui com a classe como card-body, 106 00:08:55,950 --> 00:08:59,080 e dentro deste cardão-corpo será 107 00:08:59,080 --> 00:09:03,370 o conteúdo real que foi exibido neste cartão. 108 00:09:03,370 --> 00:09:10,310 Vamos salvar as alterações e, em seguida, ir e dar uma olhada rapidamente em nossa página web. 109 00:09:10,310 --> 00:09:12,100 Indo para a nossa página web, 110 00:09:12,100 --> 00:09:15,860 já podemos ver o cartão tomando forma em nossa página web, 111 00:09:15,860 --> 00:09:19,620 para que você possa ver que a metade esquerda está ocupada pela História 112 00:09:19,620 --> 00:09:24,085 e a metade direita você verá o cartão colocado no lugar. 113 00:09:24,085 --> 00:09:27,135 Vamos adicionar algum conteúdo a este cartão. 114 00:09:27,135 --> 00:09:29,140 Indo para este bloco de cartão, 115 00:09:29,140 --> 00:09:32,220 agora eu vou usar uma lista de descrição 116 00:09:32,220 --> 00:09:36,080 e esta lista de descrição no Bootstrap me permite 117 00:09:36,080 --> 00:09:45,705 aplicar as classes de linha e coluna para ele e, assim, formatar o conteúdo dentro. 118 00:09:45,705 --> 00:09:48,360 Então, dentro desta lista de descrição, 119 00:09:48,360 --> 00:09:52,190 eu vou adicionar 120 00:09:54,890 --> 00:10:00,110 no dt que a classe e col-6 aqui, o 121 00:10:00,110 --> 00:10:03,420 que significa que isso vai ocupar seis colunas 122 00:10:03,420 --> 00:10:07,085 dentro desta lista descrição que em si é uma linha aqui. 123 00:10:07,085 --> 00:10:13,785 Então aninhando como você vê entrando em imagem aqui. 124 00:10:13,785 --> 00:10:16,250 Então, para este dt, 125 00:10:16,250 --> 00:10:20,190 eu vou adicionar em assim este título descrição aqui, 126 00:10:20,190 --> 00:10:25,470 e então abaixo que eu vou adicionar no dd com 127 00:10:25,470 --> 00:10:33,330 a classe col-6 aqui e, em seguida, eu posso adicionar em algum contexto aqui. 128 00:10:36,960 --> 00:10:40,310 E aqui o dd. 129 00:10:41,880 --> 00:10:46,755 Vamos salvar as alterações e dar uma olhada rápida no nosso cartão. 130 00:10:46,755 --> 00:10:50,445 Indo para o nosso cartão, agora você pode ver como 131 00:10:50,445 --> 00:10:55,265 a lista de descrição me permite exibir informações. 132 00:10:55,265 --> 00:11:02,700 Dentro do meu cartão, você pode ver o lado esquerdo e o lado direito claramente exibidos. 133 00:11:02,700 --> 00:11:07,035 Aqui estamos aproveitando a lista de descrição e, 134 00:11:07,035 --> 00:11:09,215 adicionando as informações lá. 135 00:11:09,215 --> 00:11:14,590 Deixe-me terminar as partes restantes aqui adicionando o código, 136 00:11:14,590 --> 00:11:19,745 e depois voltar e dar uma olhada na versão final deste cartão. 137 00:11:19,745 --> 00:11:22,850 Aqui, você pode ver que eu terminei de adicionar 138 00:11:22,850 --> 00:11:25,895 nas partes restantes da minha lista de descrição. 139 00:11:25,895 --> 00:11:31,155 Vamos dar uma olhada rápida em nossa versão final desse cartão. 140 00:11:31,155 --> 00:11:33,290 Dando uma olhada no cartão, 141 00:11:33,290 --> 00:11:34,620 e como ele está tomando forma. 142 00:11:34,620 --> 00:11:39,340 Aqui, você pode agora ver como podemos fazer uso de um cartão para exibir 143 00:11:39,340 --> 00:11:41,760 algum conteúdo em nossa página web e 144 00:11:41,760 --> 00:11:44,725 separá-lo do resto do conteúdo para a página da Web. 145 00:11:44,725 --> 00:11:50,325 Então, um cartão é um componente muito versátil que nos permite exibir conteúdo como este. 146 00:11:50,325 --> 00:11:52,500 Vamos continuar com este exercício, 147 00:11:52,500 --> 00:11:56,785 adicionando outro cartão a esta página web. 148 00:11:56,785 --> 00:12:01,410 Vamos agora voltar novamente para a nossa página aboutus.html. 149 00:12:01,410 --> 00:12:06,170 E logo abaixo do cartão que já adicionamos anteriormente, 150 00:12:06,170 --> 00:12:14,790 vou adicionar em outra div com a classe “col-12" aqui. 151 00:12:14,790 --> 00:12:16,910 E então, dentro desta div, 152 00:12:16,910 --> 00:12:24,670 eu vou construir outro cartão aqui para exibir algumas informações adicionais. 153 00:12:24,670 --> 00:12:26,495 Então, dentro desta div, 154 00:12:26,495 --> 00:12:30,210 eu vou construir um cartão com 155 00:12:30,210 --> 00:12:38,915 a classe “cartão card-body bg-light”. 156 00:12:38,915 --> 00:12:45,580 Então, você verá que estou aplicando tanto o cartão quanto o corpo do cartão para a mesma div aqui. 157 00:12:45,580 --> 00:12:49,300 Então, o que significa que este cartão em particular não vai ter 158 00:12:49,300 --> 00:12:54,835 qualquer cabeçalho do cartão, mas em vez disso apenas contém o card-body aqui. 159 00:12:54,835 --> 00:12:59,545 E então, também, o bg-light significa que o fundo estará em cores desbotadas. 160 00:12:59,545 --> 00:13:05,120 Um pouco de uma cor acinzentada adicionada ao fundo. 161 00:13:05,120 --> 00:13:10,495 Então este também procura este cartão além do resto do conteúdo aqui. 162 00:13:10,495 --> 00:13:12,815 Agora, dentro deste cartão, 163 00:13:12,815 --> 00:13:16,250 eu vou fazer uso de um código de bloco para mostrar 164 00:13:16,250 --> 00:13:20,700 alguma informação engraçada interessante lá. 165 00:13:20,700 --> 00:13:23,980 Então eu vou usar um blockquote. 166 00:13:23,980 --> 00:13:30,965 Esta é também uma tag HTML aqui. 167 00:13:30,965 --> 00:13:37,005 E então, para isso, aplicarei a classe blockquote de Bootstrap. 168 00:13:37,005 --> 00:13:42,590 Então Bootstrap estilos este blockquote em sua própria maneira. 169 00:13:42,980 --> 00:13:46,429 Então vamos fechar essa citação. 170 00:13:46,429 --> 00:13:47,870 E dentro deste blockquote, 171 00:13:47,870 --> 00:13:51,910 vou incluir uma citação aqui. 172 00:13:51,910 --> 00:13:54,320 Então eu vou começar com um p, 173 00:13:54,320 --> 00:13:56,760 e aplicar uma classe chamada mb-0. 174 00:13:56,760 --> 00:14:02,920 O mb-0 é uma classe de utilitário que o Bootstrap fornece. 175 00:14:02,920 --> 00:14:05,775 O que isso significa é margin-bottom zero. 176 00:14:05,775 --> 00:14:09,640 Para este particular, seja o que for incluído nesta tag p, 177 00:14:09,640 --> 00:14:12,135 teremos uma margem inferior de zero. 178 00:14:12,135 --> 00:14:15,865 E isso me ajuda a exibir o conteúdo corretamente aqui. 179 00:14:15,865 --> 00:14:24,900 Então aqui eu vou adicionar no conteúdo real lá, 180 00:14:49,850 --> 00:14:54,970 e, em seguida, fechar este p. Então este p contém a citação real. 181 00:14:54,970 --> 00:14:56,560 Agora, para esta citação, para 182 00:14:56,560 --> 00:14:59,180 que você veja que em seu conteúdo, 183 00:14:59,180 --> 00:15:05,320 você também pode incluir citações em seu código lá. 184 00:15:05,320 --> 00:15:10,730 Então, para isso, eu também posso adicionar um rodapé com a classe. 185 00:15:10,730 --> 00:15:14,900 Então deixe-me empurrar o recuo do rodapé. 186 00:15:14,900 --> 00:15:20,080 Então este rodapé é também uma classe que suporta blockquote. 187 00:15:20,080 --> 00:15:26,620 Portanto, o que você incluir no blockquote, 188 00:15:28,570 --> 00:15:31,105 juntamente com o rodapé, 189 00:15:31,105 --> 00:15:39,540 permitirá que você exiba o autor desta citação. 190 00:15:40,420 --> 00:15:45,620 Então aqui estou eu incluindo o autor, 191 00:15:45,620 --> 00:15:49,165 e depois mais um. 192 00:15:49,165 --> 00:15:58,860 Usando a cite, posso até citar a fonte desta citação. 193 00:16:01,740 --> 00:16:04,790 Então você pode ver isso. 194 00:16:24,870 --> 00:16:32,955 Novamente, esta é apenas uma citação que eu estou usando apenas para diversão para mostrar a você, 195 00:16:32,955 --> 00:16:35,355 também ao mesmo tempo ilustrando, 196 00:16:35,355 --> 00:16:42,405 como o blockquote funciona, 197 00:16:42,405 --> 00:16:47,800 e também como podemos criar outro tipo de cartão no Bootstrap. 198 00:16:47,800 --> 00:16:55,845 Então, com isso, adicionamos no código para exibir o blockquote aqui. 199 00:16:55,845 --> 00:16:57,890 Então deixe-me ver se isso muda, 200 00:16:57,890 --> 00:17:04,995 e então vamos dar uma olhada em como essa citação é exibida em nossa página da web. 201 00:17:04,995 --> 00:17:09,270 Indo para o navegador, em nossa página, 202 00:17:09,270 --> 00:17:14,310 você pode ver que nossa história e os fatos em um relance são exibidos lado a lado. 203 00:17:14,310 --> 00:17:22,360 Abaixo disso, eu tenho este longo pedaço de conteúdo aqui. 204 00:17:22,360 --> 00:17:27,850 Vamos dar uma olhada na mesma página em uma tela extra pequena. 205 00:17:27,850 --> 00:17:29,250 Então, em uma tela extra pequena, 206 00:17:29,250 --> 00:17:33,840 você pode ver que a história e os fatos estão empilhados no topo, 207 00:17:33,840 --> 00:17:38,120 e a cotação está bem abaixo aqui em seu próprio cartão. 208 00:17:38,120 --> 00:17:40,130 Então você pode ver duas cartas, 209 00:17:40,130 --> 00:17:42,225 uma abaixo da outra aqui, 210 00:17:42,225 --> 00:17:45,860 e, em seguida, a própria tabela exibida na parte inferior. 211 00:17:45,860 --> 00:17:50,685 Então a tabela em si é uma tabela rolável aqui. 212 00:17:50,685 --> 00:17:54,885 Então, com isso, completamos este exercício. 213 00:17:54,885 --> 00:17:56,330 Então, neste exercício, 214 00:17:56,330 --> 00:18:05,950 aprendemos sobre como podemos usar tabelas e cartões para exibir conteúdo em nossa página web. 215 00:18:05,950 --> 00:18:08,690 Agora que concluímos este exercício, 216 00:18:08,690 --> 00:18:12,610 é um bom momento para fazer um commit do git.