Bootstrap 5: primeiros passos

Índice

    Mostrar índice

O que é Bootstrap?

  • Bootstrap é uma estrutura front-end gratuita para desenvolvimento web mais rápido e fácil

  • Bootstrap inclui modelos de design baseados em HTML e CSS para tipografia, formulários, botões, tabelas, navegação, modais, carrosséis de imagens e muitos outros, bem como plug-ins JavaScript opcionais

  • Bootstrap também oferece a capacidade de criar facilmente designs responsivos

O que é Web Design Responsivo?

Web design responsivo consiste na criação de sites que se ajustam automaticamente tenham uma boa aparência em todos os dispositivos, desde telefones pequenos até desktops grandes.

Exemplo de inicialização 5

<div class="container-fluid p-5 bg-primary text-white text-center">
  <h1>My First Bootstrap Page</h1>
  <p>Resize this responsive page to see the effect!</p>
</div>
<div class="container mt-5">
  <div class="row">
    <div class="col-sm-4">
      <h3>Column 1</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
      <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
    </div>
    <div class="col-sm-4">
      <h3>Column 2</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
      <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
    </div>
    <div class="col-sm-4">
      <h3>Column 3</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
      <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
    </div>
  </div>
</div>

Experimente você mesmo →

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap 5 Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<div class="container-fluid p-5 bg-primary text-white text-center">
  <h1>My First Bootstrap Page</h1>
  <p>Resize this responsive page to see the effect!</p> 
</div>
  
<div class="container mt-5">
  <div class="row">
    <div class="col-sm-4">
      <h3>Column 1</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
      <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
    </div>
    <div class="col-sm-4">
      <h3>Column 2</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
      <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
    </div>
    <div class="col-sm-4">
      <h3>Column 3</h3>        
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
      <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
    </div>
  </div>
</div>

</body>
</html>

Versões de inicialização

Bootstrap 5 (lançado em 2021) é a versão mais recente do Bootstrap (lançado em 2013); com novos componentes, folha de estilo mais rápida e maior capacidade de resposta.

Bootstrap 5 suporta as versões mais recentes e estáveis de todos os principais navegadores e plataformas. No entanto, o Internet Explorer 11 e versões anteriores não são suportados.

A principal diferença entre Bootstrap 5 e Bootstrap 3 e 4 é que Bootstrap 5 mudou para JavaScript vanilla em vez de jQuery.

Nota: Bootstrap 3 e Bootstrap 4 ainda são suportados pela equipe para correções de bugs críticos e alterações na documentação, e é perfeitamente seguro continuar a usá-los. No entanto, novos recursos NÃO serão adicionados ao eles.

Por que usar Bootstrap?

Vantagens do Bootstrap:

  • Fácil de usar: qualquer pessoa com conhecimento básico de HTML e CSS pode começar a usar Bootstrap

  • Recursos responsivos: o CSS responsivo do Bootstrap se ajusta a telefones, tablets e desktops

  • Abordagem mobile-first: no Bootstrap, os estilos mobile-first fazem parte da estrutura principal

  • Compatibilidade do navegador: Bootstrap 5 é compatível com todos os navegadores modernos (Chrome, Firefox, Edge, Safari e Opera). Observe que se você precisar de suporte para IE11 e versões anteriores, você deve usar BS4 ou BS3.

Onde obter o Bootstrap 5?

Existem duas maneiras de começar a usar o Bootstrap 5 em seu próprio site.

Você pode:

  • Incluir Bootstrap 5 de um CDN

  • Baixe o Bootstrap 5 em getbootstrap.com

Inicialização 5 CDN

Se você não quiser baixar e hospedar o Bootstrap 5, poderá incluí-lo a partir de uma CDN (Content Delivery Network).

jsDelivr fornece suporte CDN para CSS e JavaScript do Bootstrap:

MaxCDN:

<!-- Latest compiled and minified CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
 
<!-- Latest compiled JavaScript -->
<script  src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>

Uma vantagem de usar o Bootstrap 5 CDN:
Muitos usuários já baixaram Bootstrap 5 do jsDelivr ao visitar outro site. Como resultado, ele será carregado do cache quando eles visitarem seu site, o que leva a um carregamento mais rápido. Além disso, a maioria dos CDNs garantirá que, assim que um usuário solicitar um arquivo, ele será servido do servidor mais próximo a eles, o que também leva a um tempo de carregamento mais rápido.

JavaScript?
O Bootstrap 5 usa JavaScript para diferentes componentes (como modais, dicas de ferramentas, popovers etc.). No entanto, se você apenas usar o Parte CSS do Bootstrap, você não precisa deles.

Baixando Bootstrap 5

Se você deseja baixar e hospedar o Bootstrap 5, vá para https://getbootstrap.com/, e siga as instruções lá.

Crie sua primeira página da web com Bootstrap 5

1. Adicione o tipo de documento HTML5

Bootstrap 5 usa elementos HTML e propriedades CSS que requerem o tipo de documento HTML5.

Sempre inclua o tipo de documento HTML5 no início de a página, junto com o atributo lang e o título e conjunto de caracteres corretos:

<!DOCTYPE html>
<html lang="en">
  <head>
   <title>Bootstrap 5 Example</title>
    <meta charset="utf-8"> 
  </head>
</html>

2. Bootstrap 5 prioriza dispositivos móveis

Bootstrap 5 foi projetado para responder a dispositivos móveis. Os estilos que priorizam dispositivos móveis são parte da estrutura principal.

Para garantir a renderização adequada e o zoom por toque, adicione a seguinte tag dentro do Elemento <head>:

<meta name="viewport" content="width=device-width, initial-scale=1">

A parte width=device-width define a largura da página para seguir a largura da tela do dispositivo (que irá variar dependendo do dispositivo).

A parte initial-scale=1 define o nível de zoom inicial quando a página é carregada pela primeira vez pelo navegador.

3. Contêineres

O Bootstrap 5 também requer um elemento contendo para agrupar o conteúdo do site.

Existem duas classes de contêiner para escolher:

  1. A classe .container fornece um contêiner de largura fixa responsivo

  2. A classe .container-fluid fornece um contêiner de largura total, abrangendo toda a largura da janela de visualização

.container
.container-fluid

Duas páginas básicas do Bootstrap 5

O exemplo a seguir mostra o código para uma página básica do Bootstrap 5 (com um contêiner responsivo de largura fixa):

Exemplo de contêiner

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container">
  <h1>My First Bootstrap Page</h1>
  <p>This part is inside a .container class.</p>
  <p>The .container class provides a responsive fixed width container.</p>
</div>
</body>
</html>

Experimente você mesmo →

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
  
<div class="container">
  <h1>My First Bootstrap Page</h1>
  <p>This part is inside a .container class.</p>
  <p>The .container class provides a responsive fixed width container.</p>
  <p>Resize the browser window to see that the container width will change at different breakpoints.</p>
</div>

</body>
</html>

O exemplo a seguir mostra o código para uma página básica do Bootstrap 5 (com um contêiner de largura total):

Exemplo de fluido de recipiente

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container-fluid">
  <h1>My First Bootstrap Page</h1>
  <p>This part is inside a .container-fluid class.</p>
  <p>The .container-fluid class provides a full width container, spanning the entire width of the viewport.</p>
</div>
</body>
</html>

Experimente você mesmo →

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
  
<div class="container-fluid">
  <h1>My First Bootstrap Page</h1>
  <p>This part is inside a .container-fluid class.</p>
  <p>The .container-fluid class provides a full width container, spanning the entire width of the viewport.</p>     
</div>

</body>
</html>