Bootstrap 5 foi lançado - Confira as novidades desta versão
Na última semana a tão aguardada versão 5 do Bootstrap foi lançada. Neste artigo iremos ver as novidades que chegam nesta versão e como elas poderão ser úteis para nosso desenvolvimento se desejamos utilizar esse incrível framework em nossos projetos.
Como instalar o novo Bootstrap
Para usar o novo Bootstrap nós podemos simplesmente informar a sua CDN em nossas tags <link> e <script>. Essa informação está disponível no site do Bootstrap, na área de download.
Uma outra alternativa é instalar o Bootstrap utilizando algum gerenciador de pacotes, como o npm. Para fazer isso, basta executar npm install bootstrap em seu Terminal.
Daí, podemos fazer referência para os arquivos CSS e JS desse framework em nosso código:
<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css" />
<script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>Agora que sabemos como usar o Bootstrap em sua versão mais atual, vamos partir para as novidades de fato.
Novo Componente Offcanvas
O novo componente offcanvas consiste em um painel lateral que não faz parte da área visível do site, mas que pode ser usado para exibir informações para os usuários.
Para utilizá-lo precisamos criar uma <div> com a classe “offcanvas” e daí uma outra <div> dentro dela com a classe “offcanvas-body”, sem esquecer que também podemos ter uma <div> com a classe “offcanvas-header” se desejarmos.
Abaixo vemos um exemplo um offcanvas:
<div class="offcanvas offcanvas-start show" tabindex="-1" id="meuOffCanvas" aria-labelledby="offcanvasLabel">
<div class="offcanvas-header">
<h5 class="offcanvas-title" id="offcanvasLabel">Atualização feita</h5>
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body">
Na última semana nós fizemos uma alteração em nosso sistema. Confira abaixo as novidades
</div>
</div>Quando usamos apenas a classe “offcanvas”, por padrão nosso Offcanvas não irá aparecer. Contudo, ao adicionar a classe “show” ele será exibido:
Para tornar esse processo dinâmico, nós podemos criar um botão que irá manipular como o Offcanvas é exibido ou ocultado na página.
Podemos criá-lo dentro de um card:
<div class="card" style="width: 20rem;">
<div class="card-body">
<h5 class="card-title">Atualizações no Sistema</h5>
<p class="card-text">Tivemos atualizações em nosso Sistema na última semana. Clique no botão abaixo para saber mais</p>
<a class="btn btn-success" data-bs-toggle="offcanvas" href="#meuOffCanvas" role="button" aria-controls="meuOffCanvas">Ver atualizações</a>
</div>
</div>Ele ficará com a seguinte aparência:
O que torna possível que ele abra e feche o offcanvas é o atributo data-bs-toggle, que deixa explícito que o objetivo desse botão é ser como que um “interruptor” do nosso offcanvas e essa informação será usada pelo JavaScript do Bootstrap para executar este comportamento.
Além disso, o atributo href é muito importante também, pois mostra qual offcanvas nós queremos abrir ou fechar ao clicar no botão.
Agora, ao clicar neste botão, veremos o offcanvas sendo aberto e fechado:
Outra customização que podemos fazer neste componente é definir em qual posição da página iremos posicionar o nosso offcanvas. Para definir isso, mudamos a classe que está na tag de abertura de nosso offcanvas. Além de ter a classe “offcanvas”, lembre que também tínhamos a classe “offcanvas-start”. Essa classe definia que o nosso offcanvas apareceria à esquerda de nossa página. Se mudarmos essa segunda classe para “offcanvas-end”, ela aparecerá à direita de nossa página:
Se definimos a classe como “offcanvas-bottom”, o offcanvas irá aparecer na parte inferior da página:
E se definirmos a classe como “offcanvas-top”, o offcanvas aparecerá na parte superior da página:
Novo Componente Accordion
Outra novidade notável foi o novo componente de accordion. Em versões anteriores do Bootstrap poderíamos criar este componente com a classe “card”. A partir da versão 5 poderemos usar a classe “accordion”. Abaixo vemos um exemplo de um accordion:
<div class="accordion" id="meuAccordion" style="width: 50vw;">
<div class="accordion-item">
<h2 class="accordion-header" id="headingOne">
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#opcaoUm" aria-expanded="true" aria-controls="opcaoUm">
Curso de Bootstrap
</button>
</h2>
<div id="opcaoUm" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#meuAccordion">
<div class="accordion-body">
Deseja elevar o seu conhecimento no Desenvolvimento Web com um Framework CSS que aumenta a sua produtividade e torna seus projetos cada vez mais profissionais? Gostaria de entender as novidades do Bootstrap 4? Ou será que chegou a hora de elevar o seu conhecimento em Bootstrap e entender sua estrutura e como extrair o que ele tem de melhor?
Qualquer que seja sua motivação você veio ao lugar certo.
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="headingTwo">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#opcaoDois" aria-expanded="false" aria-controls="opcaoDois">
Curso Completo de PHP 7
</button>
</h2>
<div id="opcaoDois" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#meuAccordion">
<div class="accordion-body">
Procurando se especializar como Programador WEB? Ou talvez buscando uma carreira que ofereça mais tempo livre e flexibilidade? Sempre teve curiosidade em aprender de uma forma prática, como programar no lado Back-End
Qualquer que seja sua motivação você veio ao lugar certo.
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="headingThree">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#opcaoTres" aria-expanded="false" aria-controls="opcaoTres">
Dominando Banco de Dados com MySQL
</button>
</h2>
<div id="opcaoTres" class="accordion-collapse collapse" aria-labelledby="headingThree" data-bs-parent="#meuAccordion">
<div class="accordion-body">
Gostaria de saber por que todos os programadores precisam dominar o banco de dados? Como será que as informações das empresas ficam armazenadas, e como manipular estas informações? Deseja se tornar um programador Web completo
Qualquer que seja sua motivação você veio ao lugar certo.
</div>
</div>
</div>
</div>O resultado deste código será o seguinte:
Além da classe “accordion”, os atributos data-bs-target e data-bs-toggle são essenciais para que o accordion funcione.
Como podemos ver no exemplo, conforme clicamos em outras opções, o item clicado aparece e os outros são ocultados:
Isso é possível graças ao atributo data-bs-parent, que é adicionado em todas as divs com a classe “accordion-collapse”. Se esse atributo é removido, os itens que clicamos continuam abertos, mesmo que cliquemos em outras opções:
Com estes conceitos podemos desenvolver componentes de accordion, que podem ser úteis em vários contextos em nossos sistemas.
Atualizações nos Formulários
A próxima novidade que iremos falar está relacionada com os formulários do Bootstrap. Iremos comentar abaixo algumas simplificações relacionadas aos formulários, assim como a adição de novos recursos.
Simplificação no Posicionamento
A partir da versão 5 do Bootstrap será possível posicionar os formulários de uma maneira mais simples, usando o conceito já tão conhecido do Grid Layout, usando as classes “row” e “col”. Devido a essa simplificação, as classes “form-group”, “form-row” e “form-inline” foram removidas do Bootstrap 5.
Podemos ver como posicionar os campos de nosso formulário com o Grid System no exemplo abaixo:
<form>
<div class="row">
<label for="primeiroNome" class="form-label col-5">Primeiro Nome</label>
<div class="col-7">
<input type="text" class="form-control" id="primeiroNome" />
</div>
</div>
<div class="row">
<label for="sobrenome" class="form-label col-5">Sobrenome</label>
<div class="col-7">
<input type="text" class="form-control" id="sobrenome" />
</div>
</div>
</form>O código ficou bem mais simples, não é mesmo? O resultado deste código será o seguinte:
Floating Labels
O próximo recurso que iremos analisar são os floating labels, um recurso muito comum na Web Moderna, que consiste em selecionar o texto da label que dá a sugestão para o preenchimento de um campo e “içá-lo” para a parte superior do nosso input.
Para criar um floating label, precisamos usar a classe “form-floating” e dentro dela definir a nossa tag input e label. Veja um exemplo abaixo:
<div class="form-floating">
<input type="email" class="form-control" id="email" placeholder="eu@exemplo.com" />
<label for="email">Endereço de Email</label>
</div>
<div class="form-floating">
<input type="password" class="form-control" id="password" placeholder="Sua senha" />
<label for="password">Senha</label>
</div>Um detalhe muito importante que precisamos sempre nos lembrar: é essencial que definamos um placeholder para os inputs de texto. A documentação do Bootstrap informa que isso é necessário pois o framework fará uso do pseudo-seletor :placeholder-shown para conseguir selecionar o conteúdo do texto da tag label.
Agora, ao executar nosso código, veremos o seguinte resultado:
Note que os campos foram renderizados corretamente. Quando clicamos em algum deles, vemos a seguinte mudança:
Note que agora o texto “Senha” aparece um pouco acima em nosso input e podemos digitar o conteúdo dela.
Também é possível aplicar esse recurso na tag select. Basta adicionar a classe “form-select” a ela e também criar uma label:
<div class="form-floating">
<select id="selectEstado" class="form-select">
<option value="" selected>Selecione um estado</option>
<option value="AC">AC</option>
<option value="AL">AL</option>
<option value="AP">AP</option>
…
</select>
<label for="selectEstado">Estado de residência</label>
</div>Com este código veremos o seguinte resultado:
Se estava desejando já há algum tempo adicionar o conceito de floating labels em seus projetos, esse novo recurso do Bootstrap pode ser de grande ajuda!
Melhor Estilização dos Campos Checkbox e Radio
Na versão 5 do Bootstrap também foi adicionada uma melhor estilização para os campos checkbox e radio. Para aplicar esses novos estilos, é necessário usar a classe “form-check” em uma div que irá envolver cada um desses campos. Além disso, devemos fazer uso das classes “form-check-input” e “form-check-label”, como podemos ver abaixo:
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="lembrar-se">
<label class="form-check-label" for="lembrar-se">
Lembrar de mim
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="maioridade" id="checkUm">
<label class="form-check-label" for="checkUm">
Menor de idade
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="maioridade" id="checkDois">
<label class="form-check-label" for="checkDois">
Maior de idade
</label>
</div>O resultado deste código será o seguinte:
Note que a estilização destes campos está bem mais agradável, seguindo um padrão que está sendo bastante usado nos sistemas mais modernos atualmente.
Além de melhorar a estilização de campos de formulário já existentes, na versão 5 também foi adicionado um novo estilo para o input conhecido como switch, que desempenha o mesmo papel de um interruptor. Ele é muito comum principalmente em aplicativos mobile, mas agora também pode ser aplicado em aplicativos Web.
Para usar este novo recurso, além de adicionar a classe “form-check”, também devemos usar a classe “form-switch”:
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" id="notificacoes">
<label class="form-check-label" for="notificacoes">Habilitar notificações</label>
</div>Este código resultará no seguinte:
Esta novidade é de fato bem interessante, não concorda?
Melhor Estilização do Input File
Ainda falando de formulários, o Bootstrap 5 trouxe uma novidade relacionada aos campos para selecionar arquivos.
Para criar um campo de seleção de arquivos, podemos usar o seguinte código:
<div>
<label for="photo" class="form-label">Adicionar foto ao seu perfil</label>
<input class="form-control" type="file" id="photo">
</div>O resultado será o seguinte:
Note que este é mais um caso em que a funcionalidade e estrutura do elemento HTML continuam os mesmos, mas a estilização mudou, tornando-se também mais agradável.
Outras Novidades
Outras novidades que podemos comentar na versão 5 do Bootstrap são:
- Novos exemplos de template do Bootstrap
- Atualizações de classes em componentes como Dropdown e Carousel
- Uma nova página de customização, que oferece uma paleta de cores para usarmos em nossos projetos
- Migração da biblioteca LibSass para Dart Sass
- Remoção total do jQuery no JavaScript do framework
Veja mais no YouTube
Todas as novidades mostradas neste artigo foram apresentadas em vídeo no Hcode Café, nosso programa semanal sobre programação e tecnologia que é transmitido em nosso canal no YouTube. Além de exibir as novidades, também fizemos comentários sobre boas práticas no desenvolvimento e respondemos às dúvidas dos inscritos ao vivo.
Veja a explicação em vídeo clicando aqui.
Conclusão
Você pode ver o código desenvolvido neste artigo em nosso GitHub.
Esperamos que esse artigo o tenha ajudado a analisar as novidades do Bootstrap 5 e que a nova versão deste incrível framework CSS nos ajude a continuar desenvolvendo projetos incríveis para a Web.
Até o próximo artigo! :)
