Incrementando um pouco mais

Nesta videoaula, incrementaremos um pouco mais o conteúdo da postagem adicionando um vídeo e uma tabela.

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.

Adicionando um vídeo

Para adicionar um video, podemos utilizar a tag <video> do HTML5. No entanto, é importante que esse vídeo se adapte à resolução do dispositivo do usuário. Para isso, é possível utilizar algumas classes utilitárias do Bootstrap. Veja no exemplo abaixo como ficou o código do trecho que adiciona o vídeo ao conteúdo:

<div class="my-4 embed-responsive embed-responsive-16by9">
    <video controls src="media/0. Instrutores.mp4"></video>
</div>

Por fim, vamos adicionar uma tabela no conteúdo de nossa postagem. Para adicionar uma tabela, basta utilizar a tag do HTML <table>, conforme já vimos em aulas anteriores. Além disso, vamos adicionar Badges à tabela. Acompanhe o exemplo:

<table class="table">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">Primeiro</th>
      <th scope="col">Último</th>
      <th scope="col">Nickname</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td><span class="badge badge-success">Sim</span></td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td><span class="badge badge-danger">Não</span></td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

Download do exemplo completo

Não deixe de fazer download do código completo construído nesta aula.

Clique aqui para download