Kit de ferramentas de front-end poderoso, extensível e repleto de recursos. Crie e personalize com Sass, utilize sistemas e componentes de grade pré-construídos e dê vida a projetos com poderosos plugins JavaScript.
Atualmente v5.2.1 · Download · v4.6.x docs · Todas as versões
Vá direto para a construção com o Bootstrap - use o CDN, instale-o pelo gerenciador de pacotes ou baixe o código-fonte.
Instale os arquivos Sass e JavaScript de origem do Bootstrap via npm, RubyGems, Composer ou Meteor. As instalações gerenciadas por pacote não incluem documentação ou nossos scripts de compilação completos. Você também pode usar nosso repositório de modelos npm para gerar rapidamente um projeto Bootstrap via npm.
npm install [email protected]gem install bootstrap -v 5.2.1Leia nossos documentos de instalação para obter mais informações e gerenciadores de pacotes adicionais.
Quando você só precisa incluir CSS ou JS compilado do Bootstrap, você pode usar jsDelivr . Veja-o em ação com nosso início rápido simples ou navegue pelos exemplos para iniciar seu próximo projeto. Você também pode optar por incluir Popper e nosso JS separadamente .
<!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT" crossorigin="anonymous">
<!-- JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-u1OknCvxWvY5kfmNBILK2hRnQC3Pr17a+RTT6rIHI7NnikvbZlHgTPOOmMi466C8" crossorigin="anonymous"></script>
Bootstrap utiliza Sass para uma arquitetura modular e personalizável. Importe apenas os componentes necessários, habilite opções globais como gradientes e sombras e escreva seu próprio CSS com nossas variáveis, mapas, funções e mixins.
Importe uma folha de estilo e você estará pronto para as corridas com todos os recursos do nosso CSS.
// Variable overrides first
$primary: #900;
$enable-shadows: true;
$prefix: "mo-";
// Then import Bootstrap
@import "../node_modules/bootstrap/scss/bootstrap";
Saiba mais sobre nossas opções globais de Sass .
A maneira mais fácil de personalizar o Bootstrap—inclua apenas o CSS que você precisa.
// Functions first
@import "../node_modules/bootstrap/scss/functions";
// Variable overrides second
$primary: #900;
$enable-shadows: true;
$prefix: "mo-";
// Required Bootstrap imports
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/maps";
@import "../node_modules/bootstrap/scss/mixins";
@import "../node_modules/bootstrap/scss/root";
// Optional components
@import "../node_modules/bootstrap/scss/utilities";
@import "../node_modules/bootstrap/scss/reboot";
@import "../node_modules/bootstrap/scss/containers";
@import "../node_modules/bootstrap/scss/grid";
@import "../node_modules/bootstrap/scss/helpers";
@import "../node_modules/bootstrap/scss/utilities/api";
Saiba mais sobre como usar o Bootstrap com Sass .
O Bootstrap 5 está evoluindo a cada lançamento para melhor utilizar variáveis CSS para estilos de temas globais, componentes individuais e até utilitários. Fornecemos dezenas de variáveis para cores, estilos de fonte e muito mais em um :rootnível para uso em qualquer lugar. Em componentes e utilitários, as variáveis CSS têm como escopo a classe relevante e podem ser facilmente modificadas.
Use qualquer uma de nossas variáveis globais:root para escrever novos estilos. Variáveis CSS usam a var(--bs-variableName)sintaxe e podem ser herdadas por elementos filhos.
.component {
color: var(--bs-gray-800);
background-color: var(--bs-gray-100);
border: 1px solid var(--bs-gray-200);
border-radius: .25rem;
}
.component-header {
color: var(--bs-purple);
}Substitua variáveis globais, de componente ou de classe de utilitário para personalizar o Bootstrap exatamente como você gosta. Não há necessidade de redeclarar cada regra, apenas um novo valor de variável.
body {
--bs-body-font-family: var(--bs-font-monospace);
--bs-body-line-height: 1.4;
--bs-body-bg: var(--bs-gray-100);
}
.table {
--bs-table-color: var(--bs-gray-600);
--bs-table-bg: var(--bs-gray-100);
--bs-table-border-color: transparent;
}Novo no Bootstrap 5, nossos utilitários agora são gerados por nossa API de utilitários . Nós o construímos como um mapa Sass repleto de recursos que pode ser personalizado de forma rápida e fácil. Nunca foi tão fácil adicionar, remover ou modificar qualquer classe de utilitário. Torne os utilitários responsivos, adicione variantes de pseudoclasse e dê a eles nomes personalizados.
Saiba mais sobre utilitários Explore componentes personalizados
// Create and extend utilities with the Utility API
@import "bootstrap/scss/bootstrap";
$utilities: map-merge(
$utilities,
(
"cursor": (
property: cursor,
class: cursor,
responsive: true,
values: auto pointer grab,
)
)
);
Adicione facilmente elementos ocultos alternáveis, modais e menus offcanvas, popovers e dicas de ferramentas e muito mais, tudo sem jQuery. JavaScript no Bootstrap é HTML-first, o que significa que adicionar plugins é tão fácil quanto adicionar dataatributos. Precisa de mais controle? Inclua plugins individuais programaticamente.
Por que escrever mais JavaScript quando você pode escrever HTML? Quase todos os plugins JavaScript do Bootstrap apresentam uma API de dados de primeira classe, permitindo que você use JavaScript apenas adicionando dataatributos.
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Dropdown item</a></li>
<li><a class="dropdown-item" href="#">Dropdown item</a></li>
<li><a class="dropdown-item" href="#">Dropdown item</a></li>
</ul>
</div>
Saiba mais sobre nosso JavaScript como módulos e como usar a API programática .
Bootstrap apresenta uma dúzia de plugins que você pode colocar em qualquer projeto. Coloque-os todos de uma vez ou escolha apenas os que você precisa.
Bootstrap Icons é uma biblioteca de ícones SVG de código aberto com mais de 1.500 glifos, com mais adicionados a cada lançamento. Eles são projetados para funcionar em qualquer projeto, se você usa o Bootstrap ou não. Use-os como SVGs ou fontes de ícone - ambas as opções oferecem dimensionamento de vetor e fácil personalização via CSS.
Leve o Bootstrap para o próximo nível com temas premium do mercado oficial de temas do Bootstrap . Os temas são construídos no Bootstrap como seus próprios frameworks estendidos, ricos em novos componentes e plugins, documentação e poderosas ferramentas de construção.
