Alguns componentes do Bootstrap

Nesta aula, construiremos um layout de um site com componentes do Bootstrap. Como vimos, o Bootstrap nos fornece um conjunto de classes CSS que permitem facilitar a criação de documentos HTML padronizados.

Nesta aula, utilizaremos os seguintes componentes:

Barra de navegação

A barra de navegação permite criar menus responsivos. Veja o trecho de código utilizado para criar o menu deste exercício:

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown"
    aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Alterna navegação">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNavDropdown">
    <ul class="navbar-nav">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(Página atual)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Destaques</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Preços</a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button"
          data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Link dropdown
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
          <a class="dropdown-item" href="#">Ação</a>
          <a class="dropdown-item" href="#">Outra ação</a>
          <a class="dropdown-item" href="#">Algo mais aqui</a>
        </div>
      </li>
    </ul>
  </div>
</nav>

Carousel

O Carousel é um componente de slideshow para fazer troca de elementos (imagens ou slides de texto), como se fosse um carrossel. Para esse exemplo utilizamos três imagens, mas você pode alterar para quantas forem necessárias. Segue o código utilizado:

<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img class="d-block w-100" src=".../800x400?auto=yes&bg=777&fg=555&text=Primeiro Slide" alt="Primeiro Slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src=".../800x400?auto=yes&bg=666&fg=444&text=Segundo Slide" alt="Segundo Slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src=".../800x400?auto=yes&bg=555&fg=333&text=Terceiro Slide" alt="Terceiro Slide">
    </div>
  </div>
  <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Anterior</span>
  </a>
  <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Próximo</span>
  </a>
</div>

Para testar, é importante alterar o caminho das imagens para imagens válidas armazenadas em seu computador.

Cards

Os Cards Bootstrap proporcionam um contêiner de conteúdo flexível e extensível com múltiplas variantes e opções. Segue o código utilizado:

<div class="card">
  <img class="card-img-top" src="img/download.svg" alt="Imagem de capa do card">
  <div class="card-body">
    <h5 class="card-title">Título do card</h5>
    <p class="card-text">Um exemplo de texto rápido para construir o título do card e
      fazer
      preencher o conteúdo do card.</p>
    <a href="#" class="btn btn-primary">Visitar</a>
  </div>
</div>

Para testar, é importante alterar o caminho das imagens para imagens válidas armazenadas em seu computador.

Sombras

Adicione ou remova sombras de elementos, usando os utilitários box-shadows.

Para adicionar sombra a um elemento, basta adicionar a classe "shadow". No nosso exemplo, a sombra foi adicionada na <div> mais externa do site. Exemplo:

<div class="content shadow-lg mb-5">
...
</div>

Para maior destaque da sombra, foi adicionada uma margem inferior (mb-5). Para ver todas as classes utilitárias do Bootstrap, consulte: este link.

Acompanhe o vídeo para entender como utilizar e pratique em seguida, criando seu próprio layout com os componentes do Bootstrap.

A seguir, temos o código construído nesta videoaula para servir de referência: Layout com bootstrap