Olá!

Bootstrap é um dos mais populares frameworks para construção de sites responsíveis compatíveis tanto com computadores desktop, smartphones ou dispositivos com telas de diversos tamanhos.

Em sua quinta versão, Bootstrap traz uma série de novidades, como nomes de classes mais simplificados, novos recursos em JavaScript (jQuery não é mais necessário) e finalmente Bootstrap passou a ter uma biblioteca de ícones.

Neste manuscrito, vamos explorar algumas novidades do Bootstrap 5. É claro que este guia apenas aborda a superfície das funcionalidades e componentes do Bootstrap. Aqui, vamos explorar alguns dos recursos considerados mais importantes para iniciantes. É claro que nada se iguala a documentação oficial (https://getbootstrap.com/docs). Consulte-a sempre que achar necessário.

Bons estudos!

Introdução

O framework CSS/JS mais querido da Web está mais poderoso do que nunca na sua 5ª versão. Pronto para adentrar no mundo de Bootstrap 5?

Bootstrap é um dos mais populares frameworks para construção de sites responsíveis compatíveis tanto com computadores desktop, smartphones ou dispositivos com telas de diversos tamanhos.

Nas seções a seguir, vamos explorar algumas novidades do Bootstrap 5.

Template inicial de um site com Bootstrap 5

Vamos começar com a estrutura básica de um site feito com Bootstrap. Observe como ficaria o código fonte de uma página construída usando scripts armazenados em uma CDN:

1 <!doctype html>

2 <html lang=”pt-BR”>

3 <head>

4

5 <title>Bootstrap</title>

6

7 <meta charset=”utf-8″>

8 <meta name=”viewport” content=”width=device-width, initial-scale=1, shrink-to-fit=no”>

9

10 <!– Bootstrap CSS –>

11 <link href=”https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css” rel=”stylesheet” integrity=”sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3″ crossorigin=”anonymous”>

12 <link rel=”stylesheet” href=”https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.1/font/bootstrap-icons.css”>

13

14 </head>

15 <body>

16

17 <!– Início do conteúdo –>

18

19 <!– Fim do conteúdo –>

20

21 <!– Bootstrap JavaScript –>

22 <script src=”https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js” integrity=”sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p” crossorigin=”anonymous”></script>

23

24 </body>

25 </html>

Para criarmos um site usando Bootstrap v5 são necessários três principais componentes:

Bootstrap CSS (linha 11)
Bootstrap icons (linha 12)
Bootstrap JavaScript Bundle (linha 22)

Opcionalmente, você pode baixar esses arquivos e executá-los localmente. Você pode ainda instalá-lo via npm com o comando:

npm install bootstrap

Cores

Antes de introduzirmos alguns conceitos mais complexos, precisamos apresentar um conceito que se estende para boa parte das classes do Bootstrap: as variações de classes de cores.

Observe a tabela a seguir:

Forma, Retângulo

Descrição gerada automaticamente — Tabela 1. Cores no Bootstrap.

Fonte: adaptado de https://getbootstrap.com/docs/5.1/customize/color/

Imagem em preto e branco

Descrição gerada automaticamente com confiança média — Tabela 1. Cores no Bootstrap.

Fonte: adaptado de https://getbootstrap.com/docs/5.1/customize/color/

Palavra-chave (sufixo)	Cor	Exemplo
primary	Azul
secondary	Cinza
success	Verde
danger	Vermelho
warning	Laranja
info	Azul claro
light	Branco (quase)
dark	Preto (quase)

Essas palavras-chave são usadas em muitas classes do Bootstrap. Por exemplo, se quiser colorir o fundo de laranja, podemos usar a classe bg-warning (sendo bg de background ou plano de fundo). Se quisermos alterar a cor de texto para verde, por exemplo, podemos usar text-success. A frente veremos outras classes.

Tamanhos

Outro padrão que devemos introduzir antes de falar de layout são as palavras-chave relacionadas a tamanhos. Observe a tabela a seguir:

Tamanho	Sufixo da classe
Extra-pequeno (PP)	xs
Pequeno (P)	sm
Médio (M)	md
Grande (G)	lg
Extra-grande (GG)	xl
Extra extra-grande (GGG)	xxl

Tabela 2. Sufixos de tamanho.

Fonte: adaptado de https://getbootstrap.com/docs/5.1/.

Para usar os sufixos de tamanho, em geral, basta informar o componente e adicionar o tamanho desejado separado por um hífen, como por exemplo, se quisermos um botão grande, podemos usar a classe btn-lg (nem todos os tamanhos estão disponíveis para todos os componentes).

Veremos alguns exemplos no próximo bloco.

Este post faz parte do livro “Bootstrap 5 – Guia Rápido para Iniciantes“. Para ler mais, utilize o menu logo abaixo:

Capítulo 1 – Introdução

Capítulo 2 – Layout [próximo capítulo]

Capítulo 3 – Conteúdo

Capítulo 4 – Componentes

Capítulo 5 – Bootstrap Icons

Material suplementar:

Ler no Google Books | DOI: 10.51780/978-65-992753-4-0