Bootstrap 5 foi lançado - Confira as novidades desta versão

24 de maio de 2021
Joao Rangel

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.

Comando para instalar a última versão do Bootstrap

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:

Componente Offcanvas

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:

Card para abrir o offcanvas

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:

Offcanvas abrindo ao clicar no botão do card

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:

Mudando a posição do offcanvas

Se definimos a classe como “offcanvas-bottom”, o offcanvas irá aparecer na parte inferior da página:

Exibindo o offcanvas na parte inferior da página

E se definirmos a classe como “offcanvas-top”, o offcanvas aparecerá na parte superior da página:

Exibindo o offcanvas 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:

Componente de Accordion

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:

Componente de Accordion com mais de uma opção

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:

Itens do accordion sendo exibidos ao mesmo tempo

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:

Posicionando os elementos de formulário de uma forma mais simplificada

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:

Campos floating label no navegador

Note que os campos foram renderizados corretamente. Quando clicamos em algum deles, vemos a seguinte mudança:

Floating labels sendo aplicados

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:

Floating label no campo select

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:

Campos checkbox e radio no Bootstrap 5

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:

Campo switch nos formulários do Bootstrap

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:

Campo de seleção de arquivos no Bootstrap 5

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! :)

Hcode: Utilizamos cookies para a personalização de anúncios e experiências de navegação dentro de nosso site. Ao continuar navegando, você concorda com as nossas Política de Privacidade.