Incrementando o conteúdo

Nesta videoaula, iremos incrementar o conteúdo da postagem do blog adicionando vídeos e tabelas. Além disso, ao final da postagem, adicionaremos uma seção de comentários.

Acompanhe a videoaula para compreender todo o processo de construção. Nas próximas seções alguns trechos de códigos produzidos serão destacados.

Ajustes no Breadcrumb

Como estamos em uma página interna, é importante que o Breadcrumb informe corretamente a localização da página e indique um link para facilitar a navegação. Veja a seguir o ajuste produzido no código:

<nav aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item active" aria-current="page">
      <a href="index.html">Home</a> / Como programar CSS
    </li>
  </ol>
</nav>

Seção de comentários

Para que os usuários possam comentar a postagem, é necessário adicionar um pequeno formulário com um campo de texto e um botão. Para isso, criaremos um Card que conterá o formulário com os campos necessários.

<div class="card mb-4">
  <div class="card-header">
    Comentários
  </div>
  <div class="card-body">
    <div class="input-group">
      <textarea class="form-control" name="" id="" cols="30" rows="3">
            </textarea>
        </div>
        <button class="btn btn-primary my-2">Comentar</button>
    </div>
</div>

Abaixo do formulário de comentários, vamos adicionar uma listagem com os últimos comentários realizados na postagem. Para isso, utilizaremos um novo componente do Bootstrap chamado de Media List. Veja no código abaixo:

<div class="media mb-4">
    <img class="mr-3 rounded-circle" src="imgs/avatar-einstein.jpg" alt="Imagem de exemplo genérica">
        <div class="media-body">
            <h5 class="mt-0">Albert Einstein</h5>
                Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. 
                Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
                Fusce condimentum nunc ac nisi
                vulputate fringilla. Donec lacinia congue felis in faucibus.
    </div>
</div>

Download do exemplo

Clique aqui para download