Conteúdo no Bootstrap 5

No desenvolvimento front-end com Bootstrap, o conteúdo se refere a elementos HTML usualmente usados. Bootstrap possui classes para estilizá-los.

Tipografia

A tipografia consiste nos aspectos que permeiam as fontes em um site. Bootstrap possui uma tipografia requintada que é aplicada automaticamente ao seu website.

Para aplicar alterações nas propriedades padrão, podemos usar as classes “text-*”, sendo * referente ao alinhamento ou à cor. Veja:

1 <div class=”container”>

2

3 <!-- posição -->

4 <p class=”text-start”>Início</p>

5 <p class=”text-center”>Centro</p>

6 <p class=”text-end”>Direita</p>

7

8 <!-- cor -->

9 <p class=”text-muted”>Texto desbotado</p>

10 <p class=”text-success”>Texto verde</p>

11 <p class=”text-danger”>Texto vermelho</p>

12 <p class=”text-warning”>Texto laranja</p>

13 <p class=”text-primary”>Texto azul</p>

14 <p class=”text-info”>Texto azul ciano</p>

15 <p class=”text-secondary”>Texto cinza</p>

16 <p class=”text-dark”>Texto preto</p>

17 <p class=”text-light bg-dark”>Texto branco</p>

18

19 </div>

Observe o resultado:

Caso queira aplicar essas propriedades de cores a links, troque “text-*” por “link-*”:

1 <a href="#">Link padrão</a>

2 <a href="#" class="link-success">Link verde</a>

3 <a href="#" class="link-danger">Link vermelho</a>

Compare as diferenças:

Tamanhos de textos

Se quisermos aumentar o tamanho de uma fonte, podemos usar as classes “display-*”, onde * representa um número que pode ser 0, 1, 2, 3, 4, 5 ou 6. Veja que podemos aplicar isso em simples tags de parágrafo (<p>), caixas delimitadoras de texto (<span>) ou até mesmo em títulos (<h1>). Veja:

1 <!-- < p > com diplay-6 -->

2 <p class=”text-muted bg-light p-2″>< p > com diplay-6</p>

3 <p>Texto comum</p>

4 <p class=”display-6″>Texto grande</p>

5

6 <!-- < span > com diplay-2 -->

7 <p class=”text-muted bg-light p-2 mt-5″>< span > com diplay-2</p>

8 <p>

9 Texto comum com um <span class=”display-2″>texto grande</span>

10 embutido </p>

11

12 <!-- < h1 > com diplay-1 -->

13 <p class=”text-muted bg-light p-2 mt-5″>< h1 > com diplay-1</p>

14 <h1>Um título</h1>

15 <h1 class=”display-1″>O maior título possível</h1>

Observe o resultado:

Já para reduzir o tamanho de um texto, utilize a classe “small”.

1 <p>Um texto</p>

2 <p class="small">Um texto menor</p>

Podemos ainda adicionar destaque a um texto usando a classe “lead”. Observe:

1 <p>Parágrafo comum</p>

2 <p class="lead">Parágrafo com destaque</p>

Imagens e figuras

Bootstrap fornece uma série de classes para estilizar figuras. São exemplos dessas classes:

• img-thumbnail: adiciona uma moldura à figura;
• rounded: adiciona bordas arredondadas;
• img-fluid: imagem responsiva (ocupa todo o espaço).

Observe o código que gera as figuras acima:

1 <!-- Imagem responsive: img-fluid -->

2 <div class=”container”>

3 <div class=”w-25 float-start”>.col-1

4 <div class=”col-1″>

5 <img src=”lion.jpg” class=”img-fluid”>

6 </div>

7 <div class=”col-2″>.col-2

8 <img src=”lion.jpg” class=”img-fluid”>

9 </div>

10 </div>

11 <div class=”w-25 float-start”>

12 <div class=”col-3″>.col-3

13 <img src=”lion.jpg” class=”img-fluid”>

14 </div>

15 <div class=”col-4″>.col-4

16 <img src=”lion.jpg” class=”img-fluid”>

17 </div>

18 </div>

19 <div class=”w-25 float-start”>

20 <div class=”col-5″>.col-5

21 <img src=”lion.jpg” class=”img-fluid”>

22 </div>

23 <div class=”col-6″>.col-6

24 <img src=”lion.jpg” class=”img-fluid”>

25 </div>

26 </div>

27 <div class=”w-25 float-start”>

28 <div class=”col-7″>.col-7

29 <img src=”lion.jpg” class=”img-fluid”>

30 </div>

31 <div class=”col-8″>.col-8

32 <img src=”lion.jpg” class=”img-fluid”>

33 </div>

34 </div>

35 </div>

36

37 <!-- Moldura: img-thumbnail -->

38 <img src=”lion.jpg” class=”img-thumbnail”>

39

40 <!-- Bordas redondas: rounded -->

41 <img src=”lion.jpg” class=”rounded”>

Para posicionar imagens podemos usar as classes:

• Esquerda: float-start
• Direita: float-end
• Centro: mx-auto d-block

Veja como fica o código:

1 <!-- esquerda -->

2 <img src=”lion.jpg” class=”float-start w-25″>

3

4 <!-- direta -->

5 <img src=”lion.jpg” class=”float-end w-25″>

6

7 <!-- centro -->

8 <img src=”lion.jpg” class=”d-block mx-auto w-25″>

O resultado será:

Agora, digamos que você queira vincular sua figura a uma determinada legenda. Podemos fazer isso usando a tag <figure> como contêiner para imagem e texto, além da tag <figcaption> para legenda. Além disso, vamos precisar aplicar três classes:

• <figure> deve receber a classe “figure”;
• <img> deve receber a classe “figure-img”;
• <figcaption> deve receber a classe “figure-caption”.

Observe como ficaria o código:

1 <figure class=”figure p-4″>

2 <img src=”lion.jpg” class=”figure-img w-75 rounded”>

3 <figcaption class=”figure-caption”>

4 Eu sou um leão.

5 </figcaption>

6 </figure>

Agora veja o resultado:

Tabelas

Bootstrap fornece uma série de classes para estilizar tabelas. Por padrão, toda a tabela deve receber a classe “table”. Essa classe pode ser complementada por outras classes como:

• table-striped: adiciona listas na tabela;
• table-hover: ao passar o mouse sobre uma linha, o navegador irá destacá-la;
• table-sm: tabela condensada;
• table-bordered: tabela com bordas;
• table-borderless: tabela sem bordas;
• table-[*cor]: colore a tabela (ver padrões de cores do Bootstrap, como primary, etc.);
• table-responsive: tabela responsiva.

Observe a tabela de exemplo a seguir:

1 <table class=” “>

2 <thead>

3 <tr>

4 <th>#</th>

5 <th>Número</th>

6 </tr>

7 </thead>

8 <tbody>

9 <tr>

10 <td>1</td>

11 <td>Um</td>

12 </tr>

13 <tr>

14 <td>2</td>

15 <td>Dois</td>

16 </tr>

17 <tr>

18 <td>3</td>

19 <td>Três</td>

20 </tr>

21 </tbody>

22 </table>

Observe como o navegador exibiria essa tabela por padrão:

Agora vamos alterar apenas a linha 1, testando as diferentes classes do Bootstrap. Vamos começar apenas inserindo a classe “table”:

1 <table class="table">

Observe como o estilo da tabela se altera por completo:

Agora, vamos adicionar listras as linhas de nossa tabela. Podemos fazer isso com a classe “table-striped”:

1 <table class="table table-striped">

Note que por padrão, Bootstrap não inclui bordas externas. Podemos adicioná-las usando a classe “table-bordered”:

1 <table class="table table-bordered">

Ou podemos ainda remover todas as bordas usando “table-borderless”:

1 <table class=”table table-borderless”>

Além disso, Bootstrap inclui um valor de preenchimento padrão, o que aumenta o tamanho final da tabela. Podemos criar tabelas mais condensadas usando “table-sm”:

1 <table class="table table-sm">

Para que você veja a diferença, vamos colocá-la lado a lado com o modelo padrão de tabela:

Tabelas coloridas

Tabelas também aceitam os atributos de cores. Para isso, basta chamar a classe “table-*”, onde * pode ser um dos tipos padrões de cores do Bootstrap (confira a imagem a seguir).

Esse mesmo padrão pode ser aplicado em toda a tabela, ou apenas em linhas ou células.

1 <!– Tabelas <table> –>

2 <table class=”table-primary”>…</table>

3 <table class=”table-secondary”>…</table>

4 <table class=”table-success”>…</table>

5 <table class=”table-danger”>…</table>

6 <table class=”table-warning”>…</table>

7 <table class=”table-info”>…</table>

8 <table class=”table-light”>…</table>

9 <table class=”table-dark”>…</table>

10

11 <!-- Linhas <tr> -->

12 <tr class=”table-primary”>…</tr>

13 <tr class=”table-secondary”>…</tr>

14 <tr class=”table-success”>…</tr>

15 <tr class=”table-danger”>…</tr>

16 <tr class=”table-warning”>…</tr>

17 <tr class=”table-info”>…</tr>

18 <tr class=”table-light”>…</tr>

19 <tr class=”table-dark”>…</tr>

20

21 <!-- Células (<td> ou <th>) -->

22 <tr>

23 <td class=”table-primary”>…</td>

24 <td class=”table-secondary”>…</td>

25 <td class=”table-success”>…</td>

26 <td class=”table-danger”>…</td>

27 <td class=”table-warning”>…</td>

28 <td class=”table-info”>…</td>

29 <td class=”table-light”>…</td>

30 <td class=”table-dark”>…</td>

31 </tr>

Tabelas responsivas

Observe a tabela a seguir:

Perceba que essa tabela possui uma cor de fundo dada por:

1 <table class="table bg-warning">

Note que há um texto acima, que se ajusta perfeitamente ao espaço da página. Agora veja o que acontece se o texto presente na tabela superar o espaço disponível:

Uma barra horizontal de rolagem surgiu. Note que se arrastarmos a barra para o lado, nosso texto parcialmente desaparece:

Em uma página responsiva, isso não é uma característica desejada.

Por isso, Bootstrap fornece a classe “table-responsive”. Note que a classe table-responsive não é aplicada diretamente à tabela, mas sim a uma div contêiner:

1 <div class=”table-responsive”>

2 <table class=”table bg-warning”>

3 […]

4 </table>

5 </div>

Note que agora podemos navegar pelo conteúdo sem prejudicar a leitura dos outros elementos do site:

Formulários

Formulários são componentes HTML que permitem uma interação entre usuários de um site e o sistema. Entretanto, as configurações padrões de estilos de componentes de formulários não são muito atrativas. Por isso, Bootstrap fornece um conjunto de classes para formatação de campos de texto, caixas de seleção suspensos, caixa de marcação, dentre outros.

A principal classe utilizada é o “form-control”. Ela é aplicada a caixas de entrada de textos (<input type=“text”>) ou áreas de texto (<textarea>). Para botões do tipo checkbox ou radio, podemos usar a classe “form-input-check”. Já para caixas de seleção (<select>), podemos usar a classe “form-select”.

Observe alguns exemplos:

1 <form>

2 <input type=”text” class=”form-control” placeholder=”Digite aqui”>

3

4 <input type=”checkbox” class=”form-input-check”> Checkbox

5

6 <input type=”radio” name=”” class=”form-input-check”> Radio

7

8 <select class=”form-select”>

9 <option>Caixa de seleção</option>

10 </select>

11 </form>

Agora compare a diferença dos estilos padrão do navegador com o estilo aplicado pelo Bootstrap:

(A) Sem as classes Bootstrap

(B) Com as classes Bootstrap.

Figura 35. Formulários com (a) e sem (b) as classes do Bootstrap. Fonte: próprio autor.

Grupo de inputs

Podemos agrupar botões usando a classe “input-group”. Observe:

Podemos ainda agrupar campos de texto:

1 <!-- grupo de botões -->

2 <div class=”input-group”>

3

4 <!-- caixa cinza -->

5 <span class=”input-group-text”>R$</span>

6

7 <!-- entrada -->

8 <input type=”text” class=”form-control” aria-label=”Valor”>

9 </div>

Desabilitando um campo (somente leitura)

Podemos desabilitar um campo de um formulário ou até mesmo configurá-lo como somente leitura usando os atributos disabled e readonly, respectivamente. Observe como podemos implementar isso:

1 <input type=”text” class=”form-control” value=”Formulário

2 desabilitado” aria-label=”Valor” disabled>

3

4 <input type=”text” class=”form-control” value=”Formulário

5 somente leitura” aria-label=”Valor” readonly>

O resultado da implementação desses atributos será bastante parecido:

Rótulos flutuantes

Os rótulos flutuantes são uma nova característica do Bootstrap, que serve como um complemento ao atributo placeholder. Por padrão, placeholder permite exibir um texto em um campo input, que desaparece quando o usuário clica no campo. O atributo placeholder permite interfaces mais limpas, uma vez que aproveita o espaço dentro do campo para exibir informações relevantes (economizando espaços gastos com títulos e rótulos). Para visualizar o texto do placeholder novamente, o usuário deve clicar fora do campo de entrada, tendo em vista que nenhum valor deve ter sido digitado. Com os rótulos flutuantes isso não é necessário.

Rótulos flutuantes (float labels) permitem que um título para o campo seja exibido dentro da área do próprio campo quando o botão estiver ativo. Eles requerem que um campo <label> seja colocado junto com um campo <input>. Ambos devem ser agrupados por uma div contêiner que deve receber a classe “form-floating”. Observe o código:

1 <!-- div contêiner -->

2 <div class=”form-floating”>

3

4 <!-- campo de entrada -->

5 <input type=”email” class=”form-control”

6 id=”rotulo-flutuante” placeholder=”nome@email.com.br”>

7

8 <!-- rótulo que será exibido acima do campo -->

9 <label for=”rotulo-flutuante”>Endereço de e-mail</label>

10

11 </div>

O resultado será:

Validação de formulários

Podemos validar campos de um formulário com as classes “is-valid” e “is-invalid”. Veja:

1 <!-- Válido -->

2 <input type=”text” class=”form-control is-valid”

3 id=”exemplo-1″ placeholder=”Digite um valor”>

4

5 <!-- Inválido -->

6 <input type=”text” class=”form-control is-invalid”

7 id=”exemplo-2″ placeholder=”Digite um valor”>

Este código irá produzir a seguinte página:

---