Introdução ao Bootstrap 5

Recomendação de curso:

  • O que é o Bootstrap?
  • O Bootstrap inclui modelos de design baseados em HTML e CSS, usados para alinhamento, formulários, botões, tabelas, navegação, modais, carrosséis de imagens, entre outros
  • O Bootstrap oferece uma ampla gama de plugins JavaScript
  • O Bootstrap permite que você crie designs responsivos com facilidade

O que é design responsivo de páginas da web?

O design responsivo de páginas da web visa criar sites que se ajustam automaticamente, melhorando a experiência de uso em todos os dispositivos, seja em smartphones ou em grandes computadores de mesa.

Exemplo Bootstrap 5

<div class="container-fluid p-5 bg-primary text-white text-center">
  <h1>Minha primeira página Bootstrap</h1>
</div>
<div class="container mt-5">
  <div class="row">
    <div class="col-sm-4">
      <h3>Coluna 1: Primavera</h3>
      <p>No dia ensolarado, procuro por flores ao longo do rio Si, a paisagem infinita é nova em um momento.</p>
      <p>De repente reconheço o rosto do vento do leste, sempre verão, cores e cores são primavera.</p>
    </div>
    <div class="col-sm-4">
      <h3>Coluna 2: Verso de Início de Verão</h3>
      <p>A mistura de vermelho e violeta já se tornou poeira, a primavera nova está na voz do galinha.</p>
      <p>A estrada está repleta de amoreira e cana, não há fim, comecei a saber que sou um cidadão da paz.</p>
    </div>
    <div class="col-sm-4">
      <h3>Coluna 3: Caminhada na Montanha</h3>
      <p>De longe, a estrada íngreme da montanha é inclinada, onde nubosidade nasce, há uma casa.</p>
      <p>Sentar e esperar até a noite no bosque de freijó, as folhas geladas são mais vermelhas que as flores de fevereiro.</p>
    </div>
  </div>
</div>

Experimente pessoalmente

Versão do Bootstrap

Versão do Bootstrap 5 (lançada em 2021) é a versão mais recente do Bootstrap (lançada em 2013); usando novos componentes, folhas de estilo mais rápidas, oferece capacidade de resposta mais rápida.

O Bootstrap 5 suporta as versões estáveis mais recentes de todos os principais navegadores e plataformas. No entanto, não é compatível com o Internet Explorer 11 e versões anteriores.

A principal diferença entre o Bootstrap 5 e o Bootstrap 3 & 4 é que o Bootstrap 5 já mudou para Vanilla JavaScript em vez de jQuery.

Notas:A equipe ainda suporta correções de erros críticos e alterações de documentação para o Bootstrap 3 e Bootstrap 4, é completamente seguro continuá-los a usar. Mas não adicionará novas funcionalidades a eles.

Por que usar o Bootstrap?

Vantagens do Bootstrap:

  • Facilidade de uso:Qualquer pessoa que tenha uma compreensão básica do HTML e CSS pode começar a usar o Bootstrap imediatamente
  • Características responsivas:O CSS responsivo do Bootstrap pode ser ajustado para celular, tablet e computador de mesa
  • Método de prioridade móvel:No Bootstrap, o estilo de prioridade móvel é parte do seu framework central
  • Compatibilidade de navegador:O Bootstrap 5 é compatível com todos os navegadores modernos (Chrome, Firefox, Edge, Safari e Opera).

Atenção:Se você precisar suportar o IE11 e versões anteriores, é necessário usar o BS4 ou BS3.

De onde obter o Bootstrap 5?

Existem duas maneiras de usar o Bootstrap 5 no seu próprio site.

Você pode:

  • Inclui Bootstrap 5 proveniente do CDN
  • Baixe o Bootstrap 5 do getbootstrap.com

Bootstrap 5 CDN

Se você não quiser baixar e hospedar o Bootstrap 5 sozinho, pode referenciá-lo a partir do CDN (rede de entrega de conteúdo).

CodeW3C.com oferece suporte CDN para CSS e JavaScript do Bootstrap:

MaxCDN:

<!-- CSS compilado e comprimido mais recente -->
<link href="https://www.codew3c.com/lib/bs/bootstrap.css" rel="stylesheet">
<!-- JavaScript compilado mais recente -->
<script src="https://www.codew3c.com/lib/bs/bootstrap.js"></script>

Uma das vantagens de usar o CDN do Bootstrap 5 é:

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

JavaScript?

Bootstrap 5 usa JavaScript para diferentes componentes (como modais, dicas de ferramenta, pop-ups, etc.). No entanto, se você usar apenas a parte CSS do Bootstrap, não precisa deles.

Baixar Bootstrap 5

Se você quiser baixar e hospedar o Bootstrap 5 sozinho, acesse https://getbootstrap.com/e, em seguida, siga as instruções lá.

Crie sua primeira página com Bootstrap 5

1. Adicionar doctype HTML5

Bootstrap 5 usa elementos HTML e atributos CSS que requerem doctype HTML5.

Sempre inclua o doctype HTML5 no início da página, bem como a propriedade lang e o título correto, e o conjunto de caracteres:

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

2. Bootstrap 5 móvel优先

O objetivo do design do Bootstrap 5 é ser responsivo para dispositivos móveis. Estilos móveis优先 são parte integral do framework.

Para garantir a renderização correta e o zoom tátil, por favor, em <head> Adicione o seguinte dentro do elemento <meta> Marcador:

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

width=device-width Define a largura da página para seguir o screen-width do dispositivo (que varia de dispositivo para dispositivo).

initial-scale=1 Define o nível inicial de zoom ao carregar a página pela primeira vez no navegador.

3. Container

Bootstrap 5 ainda precisa de um elemento para envolver o conteúdo do site.

Existem duas classes de contêineres disponíveis para escolher:

  1. .container A classe oferece um contêiner de largura fixa responsiva
  2. .container-fluid A classe oferece um contêiner de largura total, que cobre toda a largura da janela de exibição

Duas páginas básicas do Bootstrap 5

Exemplo de container

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

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Exemplo Bootstrap</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://www.codew3c.com/lib/bs/bootstrap.css" rel="stylesheet">
  <script src="https://www.codew3c.com/lib/bs/bootstrap.js"></script>
</head>
<body>
<div class="container">
  <h1>Minha primeira página Bootstrap</h1>
  <p>Esta parte está dentro da classe .container.</p>
  <p>A classe .container oferece um contêiner de largura fixa responsiva.</p>
</div>
</body>
</html>

Experimente pessoalmente

Exemplo de Container Fluid

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

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Exemplo Bootstrap</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://www.codew3c.com/lib/bs/bootstrap.css" rel="stylesheet">
  <script src="https://www.codew3c.com/lib/bs/bootstrap.js"></script>
</head>
<body>
<div class="container-fluid">
  <h1>Minha primeira página Bootstrap</h1>
  <p>Esta parte está dentro da classe .container-fluid.</p>
  <p>A classe .container-fluid oferece um contêiner de largura total, que cobre toda a largura da janela de exibição.</p>
</div>
</body>
</html>

Experimente pessoalmente