Nosso próximo exercício analisa formas de exibir conteúdo em nossa página web.
Eles olham para como podemos incluir tabelas em nossa página web e como podemos
estilizar essas tabelas usando as classes do Bootstrap para estilizar tabelas,
incluindo design responsivo de tabelas.
Vamos também olhar para outro componente versátil
que está disponível no Bootstrap chamado como um cartão.
Um cartão permite que você exiba conteúdo de milhões de maneiras.
Então, analisaremos duas maneiras diferentes de usar um cartão para exibir conteúdo.
Mais tarde, veremos o uso de cartões uma e outra vez
para projetos futuros de certas partes do nosso site.
Para começar, abra a página aboutus.html.
Vamos inserir uma tabela e dois cartões
na página aboutus.html para exibir algum cartão.
Primeiro, vamos lentamente rolar para baixo até depois daquele cartão para obter informações sobre liderança,
e bem ali vou introduzir outra div dentro da
qual vou colocar a tabela aqui.
Então, vou introduzir uma nova linha aqui,
com a classe como linha de conteúdo.
E dentro desta div,
vamos introduzir uma coluna que hospedará a tabela aqui.
Então, vou introduzir uma coluna, coluna 12,
coluna sm-9 e fechar a div.
E dentro div, deixe-me dar um título aqui
fatos e figuras e fechar o h2.
Logo depois disso, deixe-me introduzir outra div,
que as classes coluna sm e coluna sm-3 e fechar que div lá.
Agora vamos deixar a segunda div vazia.
Eu vou preencher a tabela na primeira div aqui e
então vamos dar uma olhada rápida na tabela depois que eu adicionar no código para a tabela.
Então aqui eu listei no código para a tabela.
Vamos dar uma olhada rápida na mesa e depois voltamos para discutir este código aqui.
Indo para nossa página Sobre que já trabalhamos anteriormente,
após a seção Liderança Corporativa,
você verá uma nova linha aqui apresentando a tabela.
Então, observe como a tabela é estilizada,
então temos o cabeçalho com um h2 incluído lá,
mas vamos nos concentrar especificamente nesta tabela.
Então você vê que esta tabela foi estilizada
usando algumas classes Bootstrap que são usadas para melhorar a tabela.
O cabeçalho foi renderizado com um plano de fundo escuro
e, em seguida, as regras são todas projetadas de tal forma que linhas alternativas são de
cor diferente para que você possa distinguir claramente as linhas desta tabela.
Isto é o que em termos Bootstrap é referido como tabela listrada.
Este é um exemplo de como você pode estilizar uma tabela.
Agora, curiosamente, se você olhar para a mesma tabela em um pequeno dispositivo,
você notaria que a tabela ainda está
visível, exceto que esta tabela agora se torna rolável.
Assim, tudo o que pode ser exibido dentro do conteúdo será mostrado e
o resto da tabela pode ser deslocado horizontalmente no lugar.
Então este é o componente responsivo do suporte do Bootstrap para tabelas em ação.
Agora vamos dar uma olhada no código em si.
Agora, obviamente, esta tabela é bastante simples,
tem um monte de linhas e algumas colunas.
Então você estará esperando que eu use as típicas
tags th, td e tr lá.
Voltando para o código,
você vai notar que eu estou anexando esta tabela dentro de
div para o qual eu apliquei a tabela de classe responsivo.
Então é isso que torna esta tabela responsiva para que em
telas menores você possa rolar horizontalmente a tabela.
Agora, para a mesa em si,
observe como eu apliquei duas classes.
Uma é a classe tabela,
então isso está substituindo a
renderização padrão da tabela em navegadores, fornecendo as próprias classes do Bootstrap.
E o segundo diz “mesa listrada”.
Então é isso que projeta uma tabela com linhas alternativas em cores diferentes aqui.
Em seguida, a cabeça em si,
para que você possa ver que os cabeçalhos descritos aqui com a classe thead-dark,
então isso torna a cabeça escura.
E então você verá a tabela desenhar em si descrito aqui com as tags th aqui.
Então esta é a definição de tabela padrão.
O corpo da tabela em si é o uso html padrão de tr,
e td, e os elementos que você já está familiarizado com em html5.
Então, é com isso que a tabela é construída,
e então você fecha o corpo da mesa. Então, é só isso.
Então, tudo o que é único sobre Bootstrap em si é a aplicação
destas classes Bootstrap específicas para
o próprio elemento de tabela para estilizá-lo ainda mais,
para caber em uma página web de design Bootstrap.
O próximo componente que vou adicionar na
página aboutus.html é um componente de cartão no Bootstrap.
O componente cartão nos permite exibir o conteúdo,
definindo-o para além do resto desse conteúdo.
Agora aqui, rolando para a primeira linha aqui,
lá temos nosso histórico no segundo uso div,
observe que o primeiro div já está ocupando col-sm-6,
o segundo div está atualmente vazio.
Então, a esta div,
vou adicionar na classe como col-sm.
Depois disso, entrando neste div vou introduzir outro div para o cartão de classe aqui.
Então, dentro desses div,
eu vou construir meu cartão para exibir algum conteúdo aqui.
Então, nesta div, vamos introduzir um h3 que
a classe como card-header bg-primary.
Então você vai ver que este h3 será exibido como
um cabeçalho de cartão com esse fundo como primário
e, em seguida, texto branco qual classe Bootstrap irá definir o texto para ser branco na cor.
E então dentro deste h3,
eu vou apresentar o título para este cartão aqui que
é 'Fatos em um relance. '
Para que eu possa mostrar algum conteúdo dentro desta div aqui.
Agora, a este cartão, em
seguida eu vou adicionar em outro div interno
aqui com a classe como card-body,
e dentro deste cardão-corpo será
o conteúdo real que foi exibido neste cartão.
Vamos salvar as alterações e, em seguida, ir e dar uma olhada rapidamente em nossa página web.
Indo para a nossa página web,
já podemos ver o cartão tomando forma em nossa página web,
para que você possa ver que a metade esquerda está ocupada pela História
e a metade direita você verá o cartão colocado no lugar.
Vamos adicionar algum conteúdo a este cartão.
Indo para este bloco de cartão,
agora eu vou usar uma lista de descrição
e esta lista de descrição no Bootstrap me permite
aplicar as classes de linha e coluna para ele e, assim, formatar o conteúdo dentro.
Então, dentro desta lista de descrição,
eu vou adicionar
no dt que a classe e col-6 aqui, o
que significa que isso vai ocupar seis colunas
dentro desta lista descrição que em si é uma linha aqui.
Então aninhando como você vê entrando em imagem aqui.
Então, para este dt,
eu vou adicionar em assim este título descrição aqui,
e então abaixo que eu vou adicionar no dd com
a classe col-6 aqui e, em seguida, eu posso adicionar em algum contexto aqui.
E aqui o dd.
Vamos salvar as alterações e dar uma olhada rápida no nosso cartão.
Indo para o nosso cartão, agora você pode ver como
a lista de descrição me permite exibir informações.
Dentro do meu cartão, você pode ver o lado esquerdo e o lado direito claramente exibidos.
Aqui estamos aproveitando a lista de descrição e,
adicionando as informações lá.
Deixe-me terminar as partes restantes aqui adicionando o código,
e depois voltar e dar uma olhada na versão final deste cartão.
Aqui, você pode ver que eu terminei de adicionar
nas partes restantes da minha lista de descrição.
Vamos dar uma olhada rápida em nossa versão final desse cartão.
Dando uma olhada no cartão,
e como ele está tomando forma.
Aqui, você pode agora ver como podemos fazer uso de um cartão para exibir
algum conteúdo em nossa página web e
separá-lo do resto do conteúdo para a página da Web.
Então, um cartão é um componente muito versátil que nos permite exibir conteúdo como este.
Vamos continuar com este exercício,
adicionando outro cartão a esta página web.
Vamos agora voltar novamente para a nossa página aboutus.html.
E logo abaixo do cartão que já adicionamos anteriormente,
vou adicionar em outra div com a classe “col-12" aqui.
E então, dentro desta div,
eu vou construir outro cartão aqui para exibir algumas informações adicionais.
Então, dentro desta div,
eu vou construir um cartão com
a classe “cartão card-body bg-light”.
Então, você verá que estou aplicando tanto o cartão quanto o corpo do cartão para a mesma div aqui.
Então, o que significa que este cartão em particular não vai ter
qualquer cabeçalho do cartão, mas em vez disso apenas contém o card-body aqui.
E então, também, o bg-light significa que o fundo estará em cores desbotadas.
Um pouco de uma cor acinzentada adicionada ao fundo.
Então este também procura este cartão além do resto do conteúdo aqui.
Agora, dentro deste cartão,
eu vou fazer uso de um código de bloco para mostrar
alguma informação engraçada interessante lá.
Então eu vou usar um blockquote.
Esta é também uma tag HTML aqui.
E então, para isso, aplicarei a classe blockquote de Bootstrap.
Então Bootstrap estilos este blockquote em sua própria maneira.
Então vamos fechar essa citação.
E dentro deste blockquote,
vou incluir uma citação aqui.
Então eu vou começar com um p,
e aplicar uma classe chamada mb-0.
O mb-0 é uma classe de utilitário que o Bootstrap fornece.
O que isso significa é margin-bottom zero.
Para este particular, seja o que for incluído nesta tag p,
teremos uma margem inferior de zero.
E isso me ajuda a exibir o conteúdo corretamente aqui.
Então aqui eu vou adicionar no conteúdo real lá,
e, em seguida, fechar este p. Então este p contém a citação real.
Agora, para esta citação, para
que você veja que em seu conteúdo,
você também pode incluir citações em seu código lá.
Então, para isso, eu também posso adicionar um rodapé com a classe.
Então deixe-me empurrar o recuo do rodapé.
Então este rodapé é também uma classe que suporta blockquote.
Portanto, o que você incluir no blockquote,
juntamente com o rodapé,
permitirá que você exiba o autor desta citação.
Então aqui estou eu incluindo o autor,
e depois mais um.
Usando a cite, posso até citar a fonte desta citação.
Então você pode ver isso.
Novamente, esta é apenas uma citação que eu estou usando apenas para diversão para mostrar a você,
também ao mesmo tempo ilustrando,
como o blockquote funciona,
e também como podemos criar outro tipo de cartão no Bootstrap.
Então, com isso, adicionamos no código para exibir o blockquote aqui.
Então deixe-me ver se isso muda,
e então vamos dar uma olhada em como essa citação é exibida em nossa página da web.
Indo para o navegador, em nossa página,
você pode ver que nossa história e os fatos em um relance são exibidos lado a lado.
Abaixo disso, eu tenho este longo pedaço de conteúdo aqui.
Vamos dar uma olhada na mesma página em uma tela extra pequena.
Então, em uma tela extra pequena,
você pode ver que a história e os fatos estão empilhados no topo,
e a cotação está bem abaixo aqui em seu próprio cartão.
Então você pode ver duas cartas,
uma abaixo da outra aqui,
e, em seguida, a própria tabela exibida na parte inferior.
Então a tabela em si é uma tabela rolável aqui.
Então, com isso, completamos este exercício.
Então, neste exercício,
aprendemos sobre como podemos usar tabelas e cartões para exibir conteúdo em nossa página web.
Agora que concluímos este exercício,
é um bom momento para fazer um commit do git.