Notes

Search

SearchSearch

Configuração do Bootstrap 5

Feb 28, 2024, 2 min read

Configuração do Bootstrap 5

A configuração do Bootstrap 5 pode ser feita de maneira rápida e eficiente, graças à disponibilidade de um CDN (Content Delivery Network) gratuito e de código aberto chamado jsDelivr. Este serviço permite incorporar os arquivos do Bootstrap diretamente em seu projeto sem a necessidade de baixar os arquivos manualmente.

Nota

Caso você não queira utilizar o link do CDN, é possível realizar a instalação utilizando gerenciadores de pacotes ou baixando os arquivos de origem.

Para adicionar o Bootstrap ao seu projeto por meio do CDN, insira os seguintes trechos de código no arquivo HTML.

CSS

O CSS do Bootstrap deve ser adicionado dentro do elemento head.

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

JavaScript (Bundle)

Já o bundle precisar ser adicionado no final do elemento body, imediatamente antes do seu fechamento.

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

O exemplo acima inclui tanto o arquivo de estilo (CSS) quanto os scripts necessários (JavaScript) para que o Bootstrap funcione corretamente.

JavaScript (Separado)

Já o bundle precisar ser adicionado no final do elemento body, imediatamente antes do seu fechamento.

Nota

Nesse caso os scripts (CSS e JavaScript do Bootstrap) podem ser adicionados separadamente, porém é importante garantir que o Popper seja adicionado antes do Bootstrap, caso esteja utilizando os componentes tooltips ou popovers.

<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>

Exemplo

<!DOCTYPE html>
<html lang="en">
<head>
    <!-- Meta tags obrigatórias -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
 
    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
 
    <title>Seu Título Aqui</title>
</head>
<body>
    <h1>Olá, mundo!</h1>
 
    <!-- JavaScript opcional; escolha uma das opções! -->
 
    <!-- Opção 1: Bootstrap Bundle com Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
 
    <!-- Opção 2: Scripts Separados de Popper e Bootstrap JS -->
    <!--
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
    -->
</body>
</html>

Referências

Graph View

Backlinks