Bootstrap possui uma série de componentes que facilitam a construção de websites. Neste capítulo, serão apresentados os 10 componentes essenciais para construção de uma página completa.
Em sua documentação, Bootstrap apresenta diversos componentes. De fato, alguns terão mais uso do que outros; por isso, neste capítulo serão elencados os 10 principais componentes :
- Caixas expansivas (sanfona e classe de colapso)
- Caixa de alertas (alert) e caixa de notificações (toast)
- Emblemas (badge)
- Botões, grupo de botões e dropdown
- Cards
- Barras de progresso
- Carrossel de imagens
- Modal – caixas de diálogos
- Popovers e tooltips
- Menus: barras de navegação e abas
1. Caixas expansivas (sanfona e classe de colapso)
Em muitos casos, desenvolvedores de interface precisam exibir informações sob demanda, isto é, a informação deve estar disponível apenas se o usuário clicar em determinado ponto ou interagir com determinado elemento. Em Bootstrap, isso é possível por meio de diversos componentes, como as “Sanfonas Bootstrap”. Observe a figura a seguir para analisar como esse componente funciona.
(B) Ao clicar na segunda aba.
(C) Ao clicar na terceira aba.
Figura 41. Sanfona Bootstrap.
Fonte: próprio autor.
O código a seguir, apresenta detalhadamente como implementar o componente sanfona:
1 <!-- Sanfona -->
2 <div class=”accordion” id=”acordeao-exemplo”>
3
4 <!-- ITEM 1: aba do sanfona + conteúdo -->
5 <div class=”accordion-item”>
6
7 <!-- aba – botão de carregamento -->
8 <h2 class=”accordion-header” id=”titulo-1″>
9 <button
10 class=”accordion-button”
11 data-bs-toggle=”collapse”
12 data-bs-target=”#item-1″
13 aria-expanded=”true”
14 aria-controls=”item-1″
15 >
16 Sanfona – Item #1
17 </button>
18 </h2>
19
20 <!-- conteúdo -->
21 <div
22 id=”item-1″
23 class=”accordion-collapse collapse show”
24 aria-labelledby=”titulo-1″
25 data-bs-parent=”#acordeao-exemplo”
26 >
27 <div class=”accordion-body”>
28
29 <strong>Este é o corpo do segundo item da “Sanfona Bootstrap”.</strong> Este item é mostrado por padrão até que o plugin de recolhimento adicione as classes apropriadas que usamos para estilizar cada elemento. Essas classes controlam a aparência geral, bem como a exibição e ocultação por meio de transições CSS. Você pode modificar qualquer um deles com CSS personalizado ou substituindo as variáveis padrão do Bootstrap. Também vale a pena notar que praticamente qualquer HTML pode ir dentro do <code>.accordion-body</code>, embora a transição limite o “overflow”.
30
31 </div>
32 </div>
33 </div>
34
35 <!-- ITEM 2: aba do sanfona + conteúdo -->
36 <div class=”accordion-item”>
37
38 <!-- aba – botão de carregamento -->
39 <h2 class=”accordion-header” id=”titulo-2″>
40 <button
41 class=”accordion-button”
42 data-bs-toggle=”collapse”
43 data-bs-target=”#item-2″
44 aria-expanded=”true”
45 aria-controls=”item-2″
46 >
47 Sanfona – Item #2
48 </button>
49 </h2>
50
51 <!-- conteúdo -->
52 <div
53 id=”item-2″
54 class=”accordion-collapse collapse”
55 aria-labelledby=”titulo-2″
56 data-bs-parent=”#acordeao-exemplo”
57 >
58 <div class=”accordion-body”>
59
60 <strong>Este é o corpo do primeiro item da “Sanfona Bootstrap”.</strong> Este item é mostrado apenas se o usuário clicar na aba correspondente (ao fazer isso, outros itens são ocultados). Você pode modificar qualquer um deles com CSS personalizado ou substituindo as variáveis padrão do Bootstrap. Também vale a pena notar que praticamente qualquer HTML pode ir dentro do <code>.accordion-body</code>, embora a transição limite o “overflow”.
61
62 </div>
63 </div>
64 </div>
65
66 <!-- ITEM 1: aba do sanfona + conteúdo -->
67 <div class=”accordion-item”>
68
69 <!-- aba – botão de carregamento -->
70 <h2 class=”accordion-header” id=”titulo-3″>
71 <button
72 class=”accordion-button”
73 data-bs-toggle=”collapse”
74 data-bs-target=”#item-3″
75 aria-expanded=”true”
76 aria-controls=”item-3″
77 >
78 Sanfona – Item #3
79 </button>
80 </h2>
81
82 <!-- conteúdo -->
83 <div
84 id=”item-3″
85 class=”accordion-collapse collapse”
86 aria-labelledby=”titulo-3″
87 data-bs-parent=”#acordeao-exemplo”
88 >
89 <div class=”accordion-body”>
90 <strong>Este é o corpo do terceiro item da “Sanfona Bootstrap”.</strong> Este item é mostrado apenas se o usuário clicar na aba correspondente (ao fazer isso, outros itens são ocultados). Você pode modificar qualquer um deles com CSS personalizado ou substituindo as variáveis padrão do Bootstrap. Também vale a pena notar que praticamente qualquer HTML pode ir dentro do <code>.accordion-body</code>, embora a transição limite o “overflow”.
91 </div>
92 </div>
93 </div>
94
95 </div>Classe “.collapse”
O componente sanfona é baseado na classe “.collapse”. Essa classe é responsável por exibir ou esconder elementos aplicando um efeito de transição durante o processo. De modo generalizado podemos visualizar este componente da seguinte forma:
1 <!-- botão de ativação -->
2 <button
3 class=”btn btn-primary”
4 data-bs-toggle=”collapse”
5 data-bs-target=”#item_secreto”
6 >
7 Exibir caixa oculta
8 </button>
9
10 <!-- Texto escondido -->
11 <div
12 class=”collapse collpase-horizontal my-2″
13 id=”item_secreto”
14 >
15 <span class=”card p-4″>Texto oculto</span>
16 </div>Note que o componente é composto por dois itens:
- um botão de ativação/desativação;
- um elemento HTML que fica escondido e só aparece após o clique no botão de ativação.
Agora observe a interface produzida:
(A) Antes de clicar.
(B) Após clicar.
Fonte: próprio autor.
2. Caixa de alertas (alert) e caixa de notificações (toast)
Caixas de alertas e de notificações são componentes que têm objetivos parecidos: mostrar mensagens para o usuário, mas por meio de estilos distintos.
As caixas de alertas (alert) são mais simples e podem ser carregados com a classe “alert”. Note que um elemento desse tipo também deve receber uma segunda classe indicando a cor “alert-*”, onde * pode ser primary, secondary, success, warning, danger, info, dark ou light. Links devem receber a classe “alert-link”.
Observe o exemplo a seguir:
1 <div class=”alert alert-primary” role=”alert”>
2 Caixa de alertas primary.
3 <a href=”#” class=”alert-link”>Exemplo de link</a>.
4 </div>
5 <div class=”alert alert-secondary” role=”alert”>
6 Caixa de alertas secondary.
7 <a href=”#” class=”alert-link”>Exemplo de link</a>.
8 </div>
9 <div class=”alert alert-success” role=”alert”>
10 Caixa de alertas success.
11 <a href=”#” class=”alert-link”>Exemplo de link</a>.
12 </div>
13 <div class=”alert alert-warning” role=”alert”>
14 Caixa de alertas warning.
15 <a href=”#” class=”alert-link”>Exemplo de link</a>.
16 </div>
17 <div class=”alert alert-danger” role=”alert”>
18 Caixa de alertas danger.
19 <a href=”#” class=”alert-link”>Exemplo de link</a>.
20 </div>
21 <div class=”alert alert-info” role=”alert”>
22 Caixa de alertas info.
23 <a href=”#” class=”alert-link”>Exemplo de link</a>.
24 </div>
25 <div class=”alert alert-light” role=”alert”>
26 Caixa de alertas light.
27 <a href=”#” class=”alert-link”>Exemplo de link</a>.
28 </div>
29 <div class=”alert alert-dark” role=”alert”>
30 Caixa de alertas dark.
31 <a href=”#” class=”alert-link”>Exemplo de link</a>.
32 </div>Este código produzirá a seguinte página:
Por outro lado, as caixas de notificação têm um design mais sofisticado e podem ser usadas para envio de mensagens rápidas para o usuário. Caixas de notificação são também conhecidas como toasts ou “torradas” na tradução (acredito que tenha alguma relação com a forma como são utilizadas: elas surgem na tela de forma parecida com um pão saindo de uma torradeira). Observe o exemplo a seguir:
Observe o código usado para criá-lo:
1 <!-- Caixa de notificações -->
2 <div class=”toast fade show” role=”alert”
3 aria-live=”assertive” aria-atomic=”true”>
4
5 <!-- Cabeçalho -->
6 <div class=”toast-header”>
7
8 <label class=”badge bg-warning me-1″>!</label>
9 <strong class=”me-auto”>Aviso</strong>
10 <small class=”text-muted”>2 minutos atrás</small>
11
12 <!-- Botão fechar -->
13 <button type=”button” class=”btn-close”
14 data-bs-dismiss=”toast” aria-
15 label=”Close”></button>
16 </div>
17
18 <!-- Corpo da caixa de notificações -->
19 <div class=”toast-body”>
20 Isso é uma caixa de notificações!
21 </div>
22 </div>3. Emblemas (badge)
Badges (ou na tradução “emblemas”) são componentes bastante simples, mas que podem ser de grande valia a sua interface. Em geral, o componente badge é usado em elementos inline (como as tags <span>, <strong> ou <label>) para aplicação de destaque e pode ser combinado com as classes de cores de plano de fundo (bg-*). Pode ainda ser usado em conjunto com a classe rounded-pill para inserção de bordas arredondadas.
O código a seguir ilustra como podemos implementá-lo:
1 <p>O componente <label class=”badge
2 bg-primary”>badge</label> destaca um trecho do texto.</p>
3
4 <p>O componente <label class=”badge bg-primary
5 rounded-pill”>badge</label> pode ser usado em conjunto
6 com a classe rounded-pill.</p>O código produzirá a seguinte interface:
4. Botões, grupo de botões e dropdown
Botões são um dos componentes mais utilizados em Bootstrap. Eles podem ser carregados por meio da classe “.btn”, seguindo da classe “.btn-*”, onde * representa uma cor, sendo:
- primary: azul
- secondary: cinza
- success: verde
- danger: vermelho
- warning: laranja
- info: azul ciano
- light: branco gelo
- dark: preto acinzentado
- link: formata um botão como se fosse um link
Podemos ter botões clássicos (com preenchimento com a cor correspondente) ou botões de outline (onde apenas a borda corresponde à cor informada). Para criar botões clássicos utilize o seguinte código:
1 <!-- Botões clássicos -->
2
3 <button class=”btn btn-primary”>Primary</button>
4 <button class=”btn btn-secondary”>Secondary</button>
5 <button class=”btn btn-success”>Success</button>
6 <button class=”btn btn-danger”>Danger</button>
7 <button class=”btn btn-warning”>Warning</button>
8 <button class=”btn btn-info”>Info</button>
9 <button class=”btn btn-light”>Light</button>
10 <button class=”btn btn-dark”>Dark</button>
11 <button class=”btn btn-link”>Link</button>
Para criar botões somente com borda (sem preenchimento), utilize as classes “.btn-outline-[cor]”, como o seguinte exemplo:
1 <!-- Botões outline -->
2
3 <button class=”btn btn-outline-primary”>Primary</button>
4 <button class=”btn btn-outline-secondary”> Secondary </button>
5 <button class=”btn btn-outline-success”>Success</button>
6 <button class=”btn btn-outline-danger”>Danger</button>
7 <button class=”btn btn-outline-warning”>Warning</button>
8 <button class=”btn btn-outline-info”>Info</button>
9 <button class=”btn btn-outline-light”>Light</button>
10 <button class=”btn btn-outline-dark”>Dark</button>
Note que podemos aplicar a classe “.btn” a qualquer tipo de elemento, desde botões (<button>), links (<a>), inputs de submissão (<input>) ou até mesmo tags do tipo <span>.
1 <button class=”btn btn-primary”>button</button>
2 <a class=”btn btn-primary”>a</a>
3 <input type=”submit” class=”btn btn-primary” value=”input”>
4 <span class=”btn btn-primary”>span</span>
Alterando o tamanho de um botão
Podemos ainda alterar o tamanho de um botão com as classes btn-lg e btn-sm. Veja:
1 <a class="btn btn-primary btn-sm">Botão pequeno</a>
2 <a class="btn btn-primary">Botão padrão</a>
3 <a class="btn btn-primary btn-lg">Botão grande</a>
Estilo de botões: ativo, desabilitado, ocupando toda a linha e botão fechar
Agora vamos aplicar quatro outras classes para configurar o estilo de um botão:
- active: deixa o botão em um estado ativo (ou seja, ele fica com uma cor mais escura);
- disabled: desabilita o botão, ou seja, deixa o botão com uma cor desbotada (além disso, ao passar o mouse sobre ele, perceberá que as características de link do botão foram removidas);
- btn-close: cria um botão fechar (com um “x”). O botão fechar é utilizado em muitos outros componentes, por isso vale a pena citá-lo aqui;
- d-grid: faz com que o botão passe a ocupar todo o espaço de uma linha.
Código que renderiza esses botões:
1 <!-- Botão ativo -->
2 <a class=”btn btn-primary active”>Botão ativo</a>
3
4 <!-- Botão desabilitado -->
5 <a class=”btn btn-primary disabled”>Botão desabilitado</a>
6
7 <!-- Botão fechar -->
8 <button type=”button” class=”btn-close”
9 aria-label=”Close”></button>
10 <!-- Botão largo -->
11 <a class=”btn btn-primary d-grid mt-2″>Botão largo</a>Menus suspensos (dropdown)
Menus suspensos podem ser criados pela classe “.dropdown”. Eles devem possuir um botão de ativação, que deve receber a classe “.dropdown-toggle” (responsável por inserir uma seta no fim do botão). A seguir, ainda dentro do contêiner “.dropdown”, um elemento do tipo <ul> deve receber a classe “.dropdown-menu” (esse elemento estará inicialmente oculto). Os elementos <li> desta lista devem receber a classe “.dropdown-item”. Esse menu só estará disponível se o usuário clicar no botão de ativação. Observe o código:
1 <!-- Menu suspenso -->
2 <div class=”dropdown”>
3
4 <!-- Botão de ativação -->
5 <button
6 class=”btn btn-primary dropdown-toggle”
7 id=”menu-suspenso-oculto”
8 data-bs-toggle=”dropdown”>
9 Menu suspenso
10 </button>
11
12 <!-- itens do menu -->
13 <ul class=”dropdown-menu”>
14 <li><a class=”dropdown-item” href=”#”>Item 1</a></li>
15 <li><a class=”dropdown-item” href=”#”>Item 2</a></li>
16
17 <!-- Linha separadora -->
18 <li><hr class=”dropdown-divider”></li>
19
20 <li><a class=”dropdown-item” href=”#”>Item 3</a></li>
21 </ul>
22 </div>Veja como fica nosso menu suspenso ao ser clicado:
Grupo de botões
Pode-se agrupar botões usando uma div contêiner que recebe a classe “.btn-group”. Observe o código:
1 <!-- grupo de botões -->
2 <div class=”btn-group” role=”group”>
3 <button type=”button” class=”btn btn-primary”>Esquerda </button>
4 <button type=”button” class=”btn btn-warning”> Meio </button>
5 <button type=”button” class=”btn btn-success”> Direita </button>
6 </div>Ao abrir este código no navegador, você verá a seguinte interface:
Note que podemos agrupar grupos de botões usando a classe “.btn-toolbar”, ou ainda, alterar a largura de botões usando as classes “.btn-group-lg” (grupo de botões mais largos) ou “.btn-group-sm” (grupo de botões pequenos).
Observe o código usado para gerar esta figura:
1 <!-- barra de ferramentas -->
2 <div class=”btn-toolbar”>
3
4 <!-- grupo de botões mais largos -->
5 <div class=”btn-group btn-group-lg me-2″ role=”group”>
6 <button type=”button” class=”btn btn-primary”>1</button>
7 <button type=”button” class=”btn btn-dark”>2</button>
8 <button type=”button” class=”btn btn-success”>3</button>
9 </div>
10
11 <!-- grupo de botões padrão -->
12 <div class=”btn-group me-2″ role=”group”>
13 <button type=”button” class=”btn btn-info”>4</button>
14 <button type=”button” class=”btn btn-secondary”>5</button>
15 <button type=”button” class=”btn btn-primary”>6</button>
16 </div>
17
18 <!-- grupo de botões menores -->
19 <div class=”btn-group btn-group-sm” role=”group”>
20 <button type=”button” class=”btn btn-dark”>7</button>
21 <button type=”button” class=”btn btn-success”>8</button>
22 <button type=”button” class=”btn btn-info”>9</button>
23 </div>
24 </div>5. Cards
Cards são componentes que exibem uma formatação amigável para elementos listados que possuem uma imagem, título, texto complementar e um link de acesso, por exemplo. Observe um exemplo a seguir:
Para que este código funcione, é necessário ter o arquivo “lion.jpg” (teste usando uma imagem qualquer). A imagem de exemplo foi obtida gratuitamente no Pixabay (https://pixabay.com/).
1 <!-- Cards Bootstrap -->
2 <div class=”card col-4″> <!-- tamanho: col-4 -->
3
4 <!-- Imagem no topo -->
5 <img src=”lion.jpg” class=”card-img-top” alt=”…”>
6
7 <!-- Corpo do card -->
8 <div class=”card-body”>
9
10 <!-- Título -->
11 <h5 class=”card-title”>Título do card</h5>
12
13 <!-- Texto complementar -->
14 <p class=”card-text”>
15 Aqui você pode incluir algumas informações
16 complementares.
17 </p>
18 <!-- Link de acesso -->
19 <a href=”#” class=”btn btn-primary”>Saiba mais</a>
20
21 </div> <!-- /Fim do Corpo do card -->
22
23 </div><!-- /Fim do card -->Podemos ainda criar cards horizontais, como o seguinte:
Para isso, podemos utilizar colunas. Observe o código a seguir:
1 <!-- Card horizontal -->
2 <div class=”card mb-3″>
3 <div class=”row g-0″>
4
5 <!-- coluna da imagem -->
6 <div class=”col-4″>
7 <img src=”lion.jpg” class=”img-fluid rounded-start”>
8 </div>
9
10 <!-- coluna do texto -->
11 <div class=”col-8″>
12 <div class=”card-body”>
13 <h5 class=”card-title”>Título do card</h5>
14 <p class=”card-text”>
15 Um card horizontal tem uma maior largura.
16 Você pode usar este componente para descrever
17 melhor um determinado elemento de sua página.
18 </p>
19 <p class=”card-text”>
20 <small class=”text-muted”>
21 Atualizado há 3 minutos atrás
22 </small>
23 </p>
24 </div>
25 </div>
26 </div>
27 </div>Você pode ainda alterar a cor dos cards usando as classes “bg-[cor]” descritas anteriormente.
6. Barras de progresso
Barras de progresso permitem acompanhar o carregamento de determinado item. Observe um exemplo de uma barra de progresso 50% preenchida:
Podemos criá-la declarando uma div contêiner que recebe a classe “.progress” com uma div interna recebendo a barra de progresso (classe “.progress-bar”). Observe como ficaria o código:
1 <!-- barra de progresso -->
2 <div class=”progress”>
3
4 <div
5 class=”progress-bar bg-primary”
6 role=”progressbar”
7 style=”width: 50%; /* largura da barra */”
8 aria-valuenow=”50″
9 aria-valuemin=”0″
10 aria-valuemax=”100″
11 >
12 50% <!-- texto exibido dentro da barra -->
13 </div>
14
15 </div>Altere a classe bg-* na linha 5 para alterar a cor desejada da barra. Você pode ainda adicionar listras a sua barra de progresso usando a classe “.progress-bar-striped” ou adicionar animações usando a classe “.progress-bar-animated” (na linha 5).
Note que Bootstrap é responsável apenas pela exibição e estilo dos componentes. Para fazer com que a animação esteja funcional, é necessário integrar sua interface ao backend da aplicação, por exemplo, por meio de códigos Ajax.
Além das barras de progresso, podemos adicionar ícones de carregamento, como os spinners (círculos giratórios). Veja um exemplo:
1 <div class=”spinner-border text-primary” role=”status”>
2 <span class=”visually-hidden”>Carregando…</span>
3 </div>Note que alteramos a cor de um spinner com a classe “text-primary”.
7. Carrossel de imagens
O carrossel de imagens do Bootstrap combina JavaScript com uma interface amigável para exibir um slider de imagens. Para este exemplo, vamos coletar três imagens aleatórias da plataforma Pixabay (https://pixabay.com/pt/).
Um carrossel de imagens poderá ser composto por:
- Um conjunto de imagens que se alterna na tela de tempos em tempos (no exemplo a seguir, vamos usar três);
- Um par de botões de navegação que permitem trocar a imagem atual na tela (anterior e posterior);
- Legenda: cada imagem pode ter um título e uma pequena descrição exibida;
- Marcadores da posição da imagem: mostra qual a imagem atual, permitindo que o usuário acesse outras imagens clicando diretamente sobre este marcador.
Agora, observe o código fonte e veja como podemos implementar um carrossel de imagens com Bootstrap (detalhes foram incluídos nos trechos comentados). É necessário que o script do Bootstrap esteja carregado no rodapé da página.
1 <!-- Carrossel de imagens – um slider -->
2 <div id=”carrossel-de-imagens” class=”carousel slide”
3 data-bs-ride=”carousel”>
4
5 <!-- traços marcadores -->
6 <div class=”carousel-indicators”>
7
8 <!-- primeiro marcador (ativo por padrão) -->
9 <button type=”button” data-bs-target=”#carrossel-
10 de-imagens” data-bs-slide-to=”0″ class=”active” aria-
11 current=”true” aria-label=”Slide 1″></button>
12
13 <!-- segundo marcador: link imagem 2 -->
14 <button type=”button” data-bs-target=”#carrossel-de-imagens”
15 data-bs-slide-to=”1″ aria-label=”Slide 2″></button>
16
17 <!-- terceiro marcador: link imagem 3 -->
18 <button type=”button” data-bs-target=”#carrossel-de-imagens”
19 data-bs-slide-to=”2″ aria-label=”Slide 3″></button>
20
21 </div>
22
23 <!-- Bloco de imagens -->
24 <div class=”carousel-inner”>
25
26 <!-- imagem 1 + legenda -->
27 <div class=”carousel-item active”>
28
29 <!-- imagem 1 -->
30 <img src=”lion.jpg” class=”d-block w-100″ alt=”leão”>
31
32 <!-- legenda -->
33 <div class=”carousel-caption d-none d-md-block”>
34 <h5>Leão</h5>
35 <p>Exemplo de imagem.</p>
36 </div>
37 </div>
38
39 <!-- imagem 2 + legenda -->
40 <div class=”carousel-item”>
41
42 <!-- imagem 2 -->
43 <img src=”city.jpg” class=”d-block w-100″ alt=”cidade”>
44
45 <!-- legenda -->
46 <div class=”carousel-caption d-none d-md-block”>
47 <h5>Cidade</h5>
48 <p>Exemplo de imagem.</p>
49 </div>
50 </div>
51
52 <!-- imagem 3 + legenda -->
53 <div class=”carousel-item”>
54
55 <!-- imagem 3 -->
56 <img src=”mountain.jpg” class=”d-block w-100″ alt=”montanha”>
57
58 <!-- legenda -->
59 <div class=”carousel-caption d-none d-md-block”>
60 <h5>Montanha</h5>
61 <p>Exemplo de imagem.</p>
62 </div>
63 </div>
64 </div><!-- /fim bloco de imagens -->
65
66
67 <!-- Botões de navegação -->
68 <button class=”carousel-control-prev” type=”button”
69 data-bs-target=”#carrossel-de-imagens” data-bs-slide=”prev”>
70 <span class=”carousel-control-prev-icon” aria-hidden=”true”></span>
71 <span class=”visually-hidden”>Anterior</span>
72 </button>
73
74 <button class=”carousel-control-next” type=”button”
75 data-bs-target=”#carrossel-de-imagens” data-bs-slide=”next”>
76 <span class=”carousel-control-next-icon” aria-hidden=”true”></span>
77 <span class=”visually-hidden”>Próximo</span>
78 </button>
79 </div>8. Modal – Caixas de diálogos
Modals (caixas de diálogos) são um dos componentes mais elegantes do Bootstrap. Modals usam o conceito de lightboxes, isto é, enquanto uma caixa de mensagens aparece no centro da tela, uma tela preta semitransparente cobre o fundo, dando destaque para a mensagem principal. Observe um exemplo:
Um modal é composto por duas partes principais:
- Botão de ativação:
1 <!-- Botão de ativação -->
2 <button
3 class=”btn btn-primary”
4 data-bs-toggle=”modal”
5 data-bs-target=”#meu-primeiro-modal”
6 >
7 Botão de ativação
8 </button>2. Div oculta do modal:
1 <!-- Modal – inclui fundo semitransparente -->
2 <div class=”modal fade” id=”meu-primeiro-modal” tabindex=”-1″>
3
4 <!-- caixa de diálogo -->
5 <div class=”modal-dialog”>
6
7 <!-- conteúdo do modal -->
8 <div class=”modal-content”>
9
10 <!-- cabeçalho do modal -->
11 <div class=”modal-header”>
12 <h5 class=”modal-title” id=”titulo-modal”>Título do modal</h5>
13 <button type=”button” class=”btn-close” data-bs-dismiss=”modal”
14 aria-label=”Close”></button> <!-- botão fechar: x -->
15 </div>
16
17 <!-- corpo do modal -->
18 <div class=”modal-body”>
19 Olá, eu sou um modal!
20 </div>
21
22 <!-- rodapé do modal -->
23 <div class=”modal-footer”>
24 <button type=”button” class=”btn btn-secondary”
25 data-bs-dismiss=”modal”>Fechar</button><!-- botão fechar -->
26 <button type=”button” class=”btn btn-primary”>Salvar</button>
27 </div>
28
29 </div> <!-- /modal-content -->
30 </div> <!-- /modal-dialog -->
31 </div> <!-- /modal -->Você pode ainda alterar a largura de um modal usando as classes descritas na tabela a seguir junto com a div da caixa de diálogo e com a classe “.modal-dialog” (linha 5 do código apresentado anteriormente).
| Tamanho | Classe | Largura máxima modal |
|---|---|---|
|
Pequeno |
.modal-sm |
300px |
|
Predefinição |
Nenhum |
500px |
|
Grande |
.modal-lg |
800px |
|
Extra grande |
.modal-xl |
1140px |
Fonte: Traduzido de https://getbootstrap.com/docs/5.1/components/modal/.
9. Popovers e Tooltips
Popovers e tooltips são pequenos balões que aparecem ao lado de um elemento quando clicado (popover) ou quando sobreposto pelo mouse (tooltip).
Um popover é um componente que é ativado pelo clique em um determinado elemento, como um botão. Observe um exemplo de popover:
Neste caso, declaramos apenas um elemento HTML: um botão de ativação. Os dados exibidos no popover devem estar nos atributos “title” e “data-bs-content”. No atributo “data-bs-placement” podemos definir onde queremos que a caixa do popover seja posicionada: à esquerda (left), abaixo (bottom), à direita (right) ou acima (top). É claro que se o navegador definir que não há espaço disponível na posição informada, ele automaticamente posicionará a caixa onde for possível. Observe o código:
1 <button
2 class=”btn btn-lg btn-info”
3 data-bs-toggle=”popover”
4 title=”Saiba mais”
5 data-bs-placement=”bottom”
6 data-bs-content=”Um popover é um botão que quando clicado, exibe uma caixa de informações complementares ao lado. Podemos alterar a posição que a caixa é exibida mudando o atributo ‘data-bs-placement’, que pode receber ‘top’, ‘left’, ‘bottom’ ou ‘right'”
7 >Saiba mais</button>
Note que ao incluir o elemento HTML do popover, o botão ainda não estará funcional. Isso se deve ao fato de popovers não serem ativados automaticamente uma vez que podem consumir uma grande quantidade de recursos do navegador. Precisamos ativá-los usando JavaScript. O código abaixo, ativa todos os popovers em uma página (note que ele deve ser declarado após a declaração do Bootstrap JavaScript, em geral, antes do fim da página).
1 <!– Bootstrap JavaScript –>
2 <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>
3
4
5 <!-- ativando os popovers -->
6 <script>
7 /* seleciona todos os popovers */
8 let popovers = document.querySelectorAll(‘[data-bs-toggle=”popover”]’)
9
10 /* para cada popover *//
11 for(let i of popovers){
12 new bootstrap.Popover(i); // ative-o
13 }
14 </script>Os tooltips funcionam de maneira parecida. A diferença é que são ativos quando o mouse se posiciona sobre eles. Além disso, eles exibem apenas o valor presente no atributo “title” do botão de ativação. Observe:
Agora veja o código do botão de ativação:
1 <button
2 class=”btn btn-danger”
3 data-bs-toggle=”tooltip”
4 data-bs-placement=”bottom”
5 title=”Tooltips são componentes mais simples.
6 Basta passar o mouse sobre eles e o texto do
7 atributo ‘title’ é exibido.”
8 >
9 Saiba mais
10 </button>Note que os tooltips também precisam ser ativados via JavaScript. Então, no fim da página inclua o código:
1 <!-- ativando os tooltips -->
2 <script>
3 /* seleciona todos os tooltips */
4 let tooltips = document.querySelectorAll(
5 ‘[data-bs-toggle=”tooltip”]’
6 )
7
8 /* para cada tooltip */
9 for(let i of tooltips){
10 new bootstrap.Tooltip(i); // ative-o
11 }
12 </script>10. Menus: barras de navegação e abas
Os componentes de menus são essenciais para construção de páginas HTML completas com Bootstrap. De fato, esta seção engloba os vários tipos de menus, como barras de navegação (navbar), barras laterais em listas, menus laterais ocultos (offcanvas), além de identificadores de posição durante a rolagem (scrollspy), identificadores de caminhos (breadcumbs) e barras de paginação.
Começaremos com um dos mais importantes: barras de navegação (navbar).
Barras de navegação
Barras de navegação (navbar), também conhecida como menu principal, é a barra superior onde geralmente inserimos o logo, principais links de acesso e barra de busca. Esse menu deve ser responsivo, isto é, ao ser aberto em um dispositivo com tela pequena, ele deve se ajustar automaticamente ao conteúdo (em geral, exibindo um menu de sanduíche).
O pseudocódigo a seguir ilustra como podemos organizar as tags em um menu:
1 <!-- PSEUDOCÓDIGO MENU -->
2 <NAVBAR classe=”navbar navbar-[cor] bg-[cor] navbar-expand-[tamanho]”>
3 <CONTAINER>
4 <LOGO class=”navbar-brand”>
5 <MENU-SANDUÍCHE>
6 <DIV-COLAPSÁVEL classe=”collapse navbar-collapse”>
7 <LISTA-ESQUERDA classe=”navbar-nav me-auto”>
8 <ITEM-LISTA classe=”nav-item”>
9 <LINK classe=”nav-link”>
10 </ITEM-LISTA>
11 </LISTA-ESQUERDA>
12 <LISTA-DIREITA classe=”d-flex”>
13 <ITEM>
14 </LINKS-DIREITA>
15 </DIV-COLAPSÁVEL>
16 </CONTAINER>
17 </NAVBAR>Note que podemos alterar a cor do menu mudando as classes expressas na linha 2. Note ainda que a classe navbar-[cor] prepara apenas as cores de links e outros elementos. Para alterar a cor do fundo, deve-se alterar a classe bg-[cor]. A classe navbar-expand-[tamanho] permite definir os níveis de responsividade (por exemplo, define em qual tamanho de tela será carregado o menu-sanduíche, assim, ocultando parte do menu).
Veja a seguir um exemplo de menu de navegação:
Agora, observe o código completo que gera esse menu:
1 <!-- Barra de navegação -->
2 <nav class=”navbar navbar-dark bg-dark navbar-expand-lg”>
3
4 <!-- container -->
5 <div class=”container”>
6
7 <!-- logo -->
8 <a class=”navbar-brand me-5″ href=”#”>Meu site</a>
9
10 <!-- menu sanduíche (para smartphone) -->
11 <button class=”navbar-toggler” data-bs-toggle=”collapse”
12 data-bs-target=”#menu-links”>
13 <span class=”navbar-toggler-icon”></span>
14 </button>
15
16 <!-- menu de links -->
17 <div class=”collapse navbar-collapse” id=”menu-links”>
18
19 <!-- logo e link alinhados à esquerda -->
20 <ul class=”navbar-nav me-auto”>
21
22 <!-- Link home -->
23 <li class=”nav-item”>
24 <a href=”#” class=”nav-link”>Home</a>
25 </li>
26
27 <!-- Link desabilitado -->
28 <li class=”nav-item”>
29 <a href=”#” class=”nav-link disabled”>Contato</a>
30 </li>
31
32 <!-- Menu suspenso -->
33 <li class=”nav-item dropdown”>
34
35 <!-- botão do menu suspenso -->
36 <a class=”nav-link dropdown-toggle” href=”#”
37 role=”button” data-bs-toggle=”dropdown”>
38 Ajuda
39 </a>
40
41 <!-- links ocultos -->
42 <ul class=”dropdown-menu”>
43 <li>
44 <a class=”dropdown-item” href=”#”>
45 Sobre o sistema</a>
46 </li>
47 <li>
48 <a class=”dropdown-item” href=”#”>
49 Especialistas</a>
50 </li>
51 </ul>
52
53 </li> <!-- /nav-item dropdown -->
54
55 </ul> <!-- /navbar-nav -->
56
57 <!-- alinhado à direita -->
58 <div class=”d-flex”>
59 <form class=”input-group”>
60 <input type=”text” class=”form-control”
61 placeholder=”Buscar”>
62 <button class=”btn btn-success”>
63 <i class=”bi bi-search”></i>
64 </button>
65 </form>
66 </div>
67 </div>
68
69 </div>
70 </nav>Observe a seguir, como o mesmo código carregaria uma diferente interface em um smartphone:
Fonte: próprio autor.
List group
Os grupos de lista (list group) podem ser utilizados para criar menus laterais. Observe o código a seguir:
1 <!-- menu de grupo de listas -->
2 <div class=”list-group”>
3
4 <!-- Link ativo -->
5 <a href=”#” class=”list-group-item list-group-item-action active”>
6 Link atual
7 </a>
8
9 <!-- Link -->
10 <a href=”#” class=”list-group-item list-group-item-action”>
11 Segundo link
12 </a>
13
14 <!-- Link desabilitado -->
15 <a class=”list-group-item list-group-item-action disabled”>
16 Terceiro link
17 </a>
18
19 <!-- Link -->
20 <a href=”#” class=”list-group-item list-group-item-action”>
21 Quarto link
22 </a>
23
24 </div>Esse código produz a seguinte página:
Offcanvas: menu lateral
Menus laterais (offcanvas) são menus que aparecem no canto esquerdo ao serem ativados, em geral, por meio do clique em um botão de ativação.
(B) Menu lateral ativado
Fonte: próprio autor.
Figura 64. Menu lateral (offcanvas).
Podemos implementá-lo da seguinte forma:
1 <!-- botão de ativação -->
2 <a class=”btn btn-primary” data-bs-toggle=”offcanvas”
3 href=”#menu-lateral”>
4 Abrir menu lateral
5 </a>
6
7
8 <!-- menu lateral -->
9 <div class=”offcanvas offcanvas-start” tabindex=”-1″ id=”menu-lateral”>
10
11 <!-- cabeçalho -->
12 <div class=”offcanvas-header”>
13 <h5 class=”offcanvas-title” id=”offcanvasLabel”>Menu lateral</h5>
14 <button type=”button” class=”btn-close text-reset”
15 data-bs-dismiss=”offcanvas” aria-label=”Close”></button>
16 </div>
17
18 <!-- corpo -->
19 <div class=”offcanvas-body”>
20 Este é o conteúdo do menu lateral
21 </div>
22
23 </div>Menu de rolagem (scrollspy)
Scrollspy é um tipo de menu cujos itens são automaticamente marcados à medida que o usuário realiza a rolagem por certos títulos da página. Por exemplo:
Aqui, o item 2 foi selecionado quando o usuário fez a rolagem da página. Ao continuar a descer, e ir até o item 3.1, por exemplo, a seguinte seleção é feita:
Para implementar isso, observe o código a seguir:
1 <!-- campo de rolagem -->
2 <div class=”row”>
3
4 <!-- coluna à esquerda -->
5 <div class=”col-4″>
6
7 <nav id=”menu-rolagem” class=”navbar navbar-light
8 bg-light flex-column align-items-stretch p-3″>
9
10 <!-- Título -->
11 <a class=”navbar-brand” href=”#”>Menu de rolagem</a>
12
13 <!-- Itens do menu -->
14 <nav class=”nav nav-pills flex-column”>
15 <a class=”nav-link active” href=”#item-1″>Item 1</a>
16 <nav class=”nav nav-pills flex-column”>
17 <a class=”nav-link ms-3 my-1″ href=”#item-1-1″>Item 1-1</a>
18 </nav>
19 <a class=”nav-link” href=”#item-2″>Item 2</a>
20 <a class=”nav-link” href=”#item-3″>Item 3</a>
21 <nav class=”nav nav-pills flex-column”>
22 <a class=”nav-link ms-3 my-1″ href=”#item-3-1″>Item 3-1</a>
23 <a class=”nav-link ms-3 my-1″ href=”#item-3-2″>Item 3-2</a>
24 </nav>
25 </nav>
26
27 </nav>
28 </div>
29
30 <!-- coluna à direita -->
31 <div class=”col-8″>
32 <div data-bs-spy=”scroll” data-bs-target=”#menu-rolagem”
33 data-bs-offset=”0″ tabindex=”0″
34 style=”position:relative; height:350px; overflow:auto;”>
35
36 <h4 id=”item-1″>Item 1</h4>
37 <p>…</p> <!-- Preencher com texto -->
38 <h5 id=”item-1-1″>Item 1-1</h5>
39 <p>…</p>
40
41 <h4 id=”item-2″>Item 2</h4>
42 <p>…</p>
43
44 <h4 id=”item-3″>Item 3</h4>
45 <p>…</p>
46 <h5 id=”item-3-1″>Item 3-1</h5>
47 <p>…</p>
48 <h5 id=”item-3-2″>Item 3-2</h5>
49 <p>…</p>
50
51 </div>
52 </div>
53 </div>Note que das linhas 38 a 49 há vários parágrafos apenas com “…”. Para testar essa funcionalidade, substitua isso por um texto maior (como por exemplo, o lorem ipsum, disponível em https://www.lipsum.com/).
Breadcrumb
Menus de localização (breadcrumb) indicam a localização da página atual com base em uma hierarquia de navegação com barras separadoras adicionadas automaticamente via CSS.
Podemos implementar isso da seguinte forma:
1 <!-- Menus de localização -->
2 <nav aria-label=”breadcrumb”>
3 <ol class=”breadcrumb”>
4 <li class=”breadcrumb-item”><a href=”#”>Home</a></li>
5 <li class=”breadcrumb-item”><a href=”#”>Biblioteca</a></li>
6 <li class=”breadcrumb-item active”>Livros</li>
7 </ol>
8 </nav>Paginação
Menus de paginação podem ser criados usando a classe “.pagination”. Cada item da lista deve receber a classe “.page-item” e os links a classe “.page-link”. Observe o código a seguir:
1 <!-- Paginação -->
2 <nav>
3 <ul class=”pagination”>
4 <li class=”page-item”>
5 <a class=”page-link” href=”#”>Anterior</a>
6 </li>
7
8 <li class=”page-item”><a class=”page-link” href=”#”>1</a></li>
9 <li class=”page-item”><a class=”page-link” href=”#”>2</a></li>
10 <li class=”page-item”><a class=”page-link” href=”#”>3</a></li>
11
12 <li class=”page-item”>
13 <a class=”page-link” href=”#”>Próximo</a>
14 </li>
15 </ul>
16 </nav>Esse código produz a seguinte interface:
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
Capítulo 3 – Conteúdo
Capítulo 4 – Componentes
Capítulo 5 – Bootstrap Icons [próximo capítulo]
Material suplementar:
4 respostas em “Componentes Bootstrap”
[…] Capítulo 4 – Componentes […]
[…] Capítulo 4 – Componentes […]
[…] 4 – Componentes [próximo […]
[…] Capítulo 4 – Componentes […]