18. Componentes do Bootstrap: botões, formulários, carrossel

Componentes do Bootstrap: botões, formulários, carrossel

Bootstrap é uma das bibliotecas mais populares quando se trata de desenvolvimento front-end. Ele oferece uma variedade de componentes prontos para uso que podem acelerar significativamente o processo de desenvolvimento. Neste capítulo, vamos nos concentrar em três componentes principais: botões, formulários e carrossel.

Botões

Os botões são uma parte essencial de qualquer interface do usuário e o Bootstrap oferece uma ampla gama de estilos de botões. Para criar um botão no Bootstrap, você precisa usar a tag <button> com a classe .btn e uma das classes de estilo de botão, por exemplo, .btn-primary para um botão azul.

<button type="button" class="btn btn-primary">Botão primário</button>

Além dos estilos de botão, o Bootstrap também oferece classes para diferentes tamanhos de botão, botões de contorno, botões de grupo e muito mais.

Formulários

Formulários são outra parte crucial de qualquer aplicativo da web. O Bootstrap oferece classes para criar formulários com aparência profissional com validação de formulário, estilos de entrada, áreas de texto, caixas de seleção, botões de opção, etc.

Para criar um formulário no Bootstrap, você precisa usar a tag <form> com a classe .form. Cada campo do formulário é então criado usando a tag <div> com a classe .form-group para agrupar o rótulo e o campo de entrada.

<form>
  <div class="form-group">
    <label for="exampleInputEmail1">Endereço de email</label>
    <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
  </div>
  <div class="form-group">
    <label for="exampleInputPassword1">Senha</label>
    <input type="password" class="form-control" id="exampleInputPassword1">
  </div>
  <button type="submit" class="btn btn-primary">Enviar</button>
</form>

Este é um exemplo de um formulário simples com dois campos: um para o email e outro para a senha. O Bootstrap também oferece classes para adicionar dicas de ferramentas, mensagens de erro e muito mais.

Carrossel

O carrossel é um componente que permite exibir uma série de imagens (ou outros conteúdos) em uma sequência rotativa. É comumente usado para exibir uma série de imagens em destaque na página inicial de um site.

Para criar um carrossel no Bootstrap, você precisa usar a tag <div> com a classe .carousel. Cada item do carrossel é então criado usando a tag <div> com a classe .carousel-item.

<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
  <ol class="carousel-indicators">
    <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
    <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
    <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
  </ol>
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
    </div>
  </div>
  <a class="carousel-control-prev" href="#carouselExampleIndicators" 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="#carouselExampleIndicators" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Próximo</span>
  </a>
</div>

Este é um exemplo de um carrossel simples com três imagens. O Bootstrap também oferece opções para adicionar legendas às imagens, controles de navegação e indicadores.

Em resumo, o Bootstrap oferece uma variedade de componentes que podem tornar o processo de desenvolvimento muito mais rápido e fácil. No entanto, é importante lembrar que o Bootstrap é apenas uma ferramenta e não substitui um bom conhecimento de HTML, CSS e JavaScript.

Próxima página do Ebook Gratuito:

65Introdução ao Javascript: variáveis, tipos de dados, operadores

3 minutos