Bootstrap

Framework CSS com grid, componentes e utilitários. O bundle JS inclui o Popper.

Site oficial

Instalação

<link rel="stylesheet" href="https://cdn.rscsistemas.com.br/bootstrap/5.3.3/css/bootstrap.min.css"
      integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
<script src="https://cdn.rscsistemas.com.br/bootstrap/5.3.3/js/bootstrap.bundle.min.js"
        integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>

Como usar

Inclua o CSS no <head> e o JS (bundle, já com Popper) antes de fechar o <body>. As tags com SRI estão logo acima.

<!doctype html>
<html lang="pt-BR">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- CSS do Bootstrap aqui -->
</head>
<body>
    <div class="container py-4">
        <h1 class="h3">Olá</h1>
        <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exemplo">Abrir</button>
    </div>

    <div class="modal fade" id="exemplo" tabindex="-1">
        <div class="modal-dialog"><div class="modal-content">
            <div class="modal-body">Conteúdo do modal</div>
        </div></div>
    </div>

    <!-- JS do Bootstrap aqui -->
</body>
</html>

Observações

  • Use o bootstrap.bundle.min.js: ele já inclui o Popper, necessário para dropdowns, tooltips e popovers.
  • Tooltips e popovers precisam ser inicializados via JS:
document.querySelectorAll('[data-bs-toggle="tooltip"]').forEach(el => new bootstrap.Tooltip(el));
Arquivos da versão 5.3.3
URL base
https://cdn.rscsistemas.com.br/bootstrap/5.3.3/