Home / Cupons / Publicacoes

Como usar o Bootstrap 5

Como usar o Bootstrap 5.

Bem-vindo ao tutorial de introdução à versão mais recente do Bootstrap, v5.3 e o seu primeiro #projeto com ele.

Pré-requisitos: Antes de começarmos, é necessário que você tenha instalado em sua máquina um editor de código, como o Visual Studio Code ou Sublime Text. Além disso, é essencial ter uma compreensão básica da linguagem HTML e CSS.

Instalação do Bootstrap: Você pode instalar o Bootstrap via npm (Node Package Manager) em seus projetos Node.js ou baixá-lo diretamente do site oficial (https://getbootstrap.com/docs/5.3/getting-started/download/) e incluir a versão comprimida na sua página HTML.

Criando seu primeiro layout: Crie um novo arquivo em seu editor de código, salve-o com o nome index.html e escreva as seguintes linhas de código:

<!DOCTYPE html>
<html lang="pt-br">
  <head>
    <meta charset="UTF-<?begin?of?sentence?> 8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Tutorial Bootstrap 5.3</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
  </head>
  <body>
    <h1 class="text-center display-1">Olá, mundo!!!</h1>
    
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
  </body>
</html>

Personalizando: Agora que você tem um layout básico, é hora de experimentar os recursos do Bootstrap. Recursos como componentes visuais, grid system e utilitários ajudam a criar interfaces mais complexas rapidamente.

Por exemplo, você pode adicionar uma barra de navegação simples:

<nav class="navbar navbar-expand-lg bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Meu site</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Alterna navegação">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNav">
      <ul class="navbar-nav">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Início</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Sobre nós</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

E um painel com cards:

<div class="container my-5">
  <div class="row row-cols-1 row-cols-md-3 g-4">
    <div class="col">
      <div class="card h-100">
        <img src="..." class="card-img-top" alt="...">
        <div class="card-body">
          <h5 class="card-title">Card title</h5>
          <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
        </div>
      </div>
    </div>
  <!-- ... outros cards -->
  </div>
</div>

Documentação oficial: Para entender melhor como o Bootstrap funciona e quais componentes você pode usar, é sempre uma boa ideia consultar a documentação oficial. Ela tem exemplos de cada componente que você poderá modificar para criar seu próprio site.

Esses são os fundamentos do #Bootstrap e juntos, eles podem ajudar você a construir uma #interface moderna e responsiva em alguns passos. Muito obrigado por ler este tutorial e esperamos que você se divirta explorando o poder do Bootstrap 5.3!!!