Bootstrap 5 é uma estrutura CSS gratuita e de código aberto, voltada para o desenvolvimento web responsivo e com mobile primeiro.

Caso você não saiba, Bootstrap 5 alpha foi lançado oficialmente. Ele removeu o jQuery como uma dependência, diminuiu o suporte para o Internet Explorer 9 e 10 e traz algumas atualizações impressionantes para os arquivos Sass, marcação e uma nova API de utilitário.

Este tutorial mostrará como começar a usar o VanillaJS em vez do jQuery ao criar sites usando a versão mais recente do Bootstrap 5.

Começando

Você precisará incluir o Bootstrap 5 em seu projeto. Existem várias maneiras de fazer isso, mas, para simplificar, incluiremos o framework via CDN.

Primeiro de tudo, vamos criar um espaço em branco index.html página dentro de uma pasta do projeto:

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <title>Bootstrap 5 Vanilla JS tutorial by Themesberg</title></head><body>    </body></html>

Inclua o bootstrap.min.css folha de estilo antes do final do seu <head> tag:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css" integrity="sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I" crossorigin="anonymous">

Posteriormente, inclua a biblioteca Popper.js e o arquivo JavaScript Bootstrap principal antes do final do seu <body> tag:

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script><script src="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/js/bootstrap.min.js" integrity="sha384-oesi62hOLfzrys4LxRF63OJCXdXDipiYWBnvTl9Y9/TRlw5xlKIEHpNyvvDShgf/" crossorigin="anonymous"></script>

Curioso o que o integrity e crossorigin atributos significam? Aqui está a explicação:

Atributo de integridade: permite que o navegador verifique a fonte do arquivo para garantir que o código nunca seja carregado se a fonte tiver sido manipulada.

Atributo Crossorigin: está presente quando uma solicitação é carregada usando ‘CORS’, que agora é um requisito de verificação do SRI quando não carregada da ‘mesma origem’.

Ótimo! Agora, incluímos com sucesso a versão mais recente do Bootstrap em nosso projeto. Uma das diferenças óbvias é que não precisamos mais exigir o jQuery como uma dependência, economizando cerca de 82,54 KB em largura de banda se estiver em um estado minificado.

Mudando do jQuery para o Vanilla JS

Antes de começarmos com esta seção, você deve saber que o uso do Bootstrap 5 com jQuery ainda é possível, de acordo com o documentação oficial.

Recomendamos o uso de Vanilla JavaScript se o único motivo pelo qual você usa o jQuery foi no seletor de consultas, porque você pode fazer o mesmo com o document.querySelector('#element') como se fosse $('#element').

A primeira etapa é criar um arquivo JavaScript e incluí-lo antes do final da tag body, mas após as outras duas:

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script><script src="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/js/bootstrap.min.js" integrity="sha384-oesi62hOLfzrys4LxRF63OJCXdXDipiYWBnvTl9Y9/TRlw5xlKIEHpNyvvDShgf/" crossorigin="anonymous"></script><script src="js/app.js"></script>

Então, quando você realmente precisa usar o Javascript com o Bootstrap 5? Existem alguns componentes na estrutura que funcionam apenas se forem inicializados via Javascript, como dicas de ferramentas, popovers e brindes.

Além disso, com componentes como modais, menus suspensos e carrosséis, convém alterá-los programaticamente com base na ação do usuário ou na lógica do aplicativo.

Inicializando dicas de ferramenta via Vanilla JavaScript

Todos nós gostamos de dicas de ferramentas, mas elas não funcionam a menos que sejam inicializadas via JavaScript. Vamos começar criando um elemento de dica de ferramenta dentro do nosso index.html Arquivo:

<button id="tooltip" type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="top" title="Tooltip on top">    Tooltip on top</button>

Passar o mouse sobre o botão não mostrará a dica de ferramenta, porque, por padrão, é um recurso de ativação do Bootstrap e precisa ser inicializado manualmente usando JavaScript. Se você quiser fazer isso com o jQuery, veja como ficaria:

$('#tooltip').tooltip();

Usando o Vanilla JS, você precisaria usar o seguinte código para ativar a dica de ferramenta:

var tooltipElement = document.getElementById('tooltip');var tooltip = new bootstrap.Tooltip(tooltipElement);

O que o código acima faz é que ele seleciona o elemento com o ID exclusivo de “dica de ferramenta” e cria um objeto de dica de ferramenta de Bootstrap. Você pode usá-lo para manipular o estado da dica de ferramenta, como mostrar ou ocultar a dica de ferramenta programaticamente.

Aqui está um exemplo de como você pode mostrá-lo / ocultá-lo através de métodos:

var showTooltip = true;if (showTooltip) {    tooltip.show();} else {    tooltip.hide();}

Se você deseja ativar todas as dicas de ferramentas, também pode usar o seguinte código:

var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-toggle="tooltip"]'));var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {  return new bootstrap.Tooltip(tooltipTriggerEl)});

O que acontece aqui é que selecionamos todos os elementos que têm o data-toggle="tooltip" atributo e valor e inicialize um objeto de dica de ferramenta para cada um. Ele também os salva em uma variável tooltipList.

Alterne a visibilidade de seus elementos usando os métodos Collapse JavaScript

O recurso de recolhimento no Bootstrap é outra maneira muito útil de mostrar e ocultar elementos por meio de atributos de dados ou JavaScript.

Aqui está um exemplo de como podemos mostrar ou ocultar um cartão quando um determinado botão está sendo clicado. Vamos primeiro criar a marcação HTML:

<button id="toggleCardButton" type="button" class="btn btn-primary mb-2">Toggle Card</button>    <div id="card" class="card collapse show" style="width: 18rem;">        <img src="https://dev-to-uploads.s3.amazonaws.com/i/rphqzfoh2cbz3zj8m8t1.png" class="card-img-top" alt="...">        <div class="card-body">            <h5 class="card-title">Freecodecamp.org</h5>            <p class="card-text">Awesome resource to learn programming from.</p>            <a href="#" class="btn btn-primary">Learn coding for free</a>        </div>    </div>

Então criamos um botão com o id toggleCardButton e um cartão com o ID card. Vamos começar selecionando os dois elementos:

var toggleButton = document.getElementById('toggleCardButton');var card = document.getElementById('card');

Em seguida, precisamos criar um objeto recolhível usando o novo elemento de cartão selecionado:

var collapsableCard = new bootstrap.Collapse(card, {toggle: false});

O que toggle:false O sinalizador faz é que ele mantém o elemento visível após a criação do objeto. Se não estiver presente, ocultará o cartão por padrão.

Agora precisamos adicionar um ouvinte de evento para o botão da ação de clique:

toggleButton.addEventListener('click', function () {    // do something when the button is being clicked});

E, finalmente, precisamos alternar o cartão usando o objeto recolhível que inicializamos assim:

toggleButton.addEventListener('click', function () {    collapsableCard.toggle();});

É isso aí! Agora o cartão será exibido / oculto sempre que o botão for clicado. Claro que tudo isso poderia ter sido feito usando o recurso de atributos de dados do Bootstrap, mas convém alternar determinados elementos com base em uma chamada de API ou lógica no seu aplicativo.

Conclusão

Se você seguiu este tutorial, agora poderá usar a estrutura CSS mais popular sem a necessidade de exigir o jQuery em seu projeto. Isso permite que você economize até 85 KB de dados e torna seu site mais rápido! Parabéns 🎉

Se você aprecia este tutorial e gosta de usar o Bootstrap como uma estrutura CSS para seus projetos, convido você a conferir alguns dos recursos gratuitos e premium Temas de inicialização, modelos e kits de interface do usuário que construímos em Themesberg ❤️



Fonte