Kit de ferramentas de interface potente, extensible e cheo de funcións. Constrúe e personalice con Sass, utilice o sistema de reixa e os compoñentes predefinidos e dá vida aos proxectos con poderosos complementos de JavaScript.
Actualmente v5.2.1 · Descargar · v4.6.x docs · Todos os lanzamentos
Ir directamente á construción con Bootstrap: use o CDN, instáleo a través do xestor de paquetes ou descargue o código fonte.
Instala os ficheiros de orixe Sass e JavaScript de Bootstrap a través de npm, RubyGems, Composer ou Meteor. As instalacións xestionadas por paquetes non inclúen documentación nin os nosos scripts de compilación completos. Tamén podes usar o noso repositorio de modelos npm para xerar rapidamente un proxecto Bootstrap a través de npm.
npm install [email protected]gem install bootstrap -v 5.2.1Lea os nosos documentos de instalación para obter máis información e xestores de paquetes adicionais.
Cando só precisa incluír o CSS ou JS compilado de Bootstrap, pode usar jsDelivr . Mírao en acción co noso sinxelo inicio rápido ou explora os exemplos para poñer en marcha o teu próximo proxecto. Tamén podes optar por incluír Popper e o noso JS por separado .
<!-- 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>
Comeza a incluír os ficheiros fonte de Bootstrap nun novo proxecto coas nosas guías oficiais.
Bootstrap utiliza Sass para unha arquitectura modular e personalizable. Importa só os compoñentes que necesites, activa opcións globais como degradados e sombras e escribe o teu propio CSS coas nosas variables, mapas, funcións e mesturas.
Importa unha folla de estilo e xa estarás ás carreiras con todas as funcións do noso CSS.
// Variable overrides first
$primary: #900;
$enable-shadows: true;
$prefix: "mo-";
// Then import Bootstrap
@import "../node_modules/bootstrap/scss/bootstrap";
Obtén máis información sobre as nosas opcións globais de Sass .
O xeito máis sinxelo de personalizar Bootstrap: inclúe só o CSS que necesitas.
// 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";
Obtén máis información sobre o uso de Bootstrap con Sass .
Bootstrap 5 está evolucionando con cada versión para utilizar mellor as variables CSS para estilos de temas globais, compoñentes individuais e mesmo utilidades. Ofrecemos decenas de variables para cores, estilos de fonte e moito máis nun :rootnivel para usar en calquera lugar. En compoñentes e utilidades, as variables CSS atópanse na clase correspondente e pódense modificar facilmente.
Use calquera das nosas variables globais:root para escribir novos estilos. As variables CSS usan a var(--bs-variableName)sintaxe e poden ser herdadas por elementos fillos.
.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);
}Anular variables globais, de compoñentes ou de clase de utilidade para personalizar Bootstrap como queiras. Non é necesario volver declarar cada regra, só un novo valor de variable.
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 en Bootstrap 5, as nosas utilidades agora xéranse pola nosa API de utilidades . Creámolo como un mapa Sass cheo de funcións que se pode personalizar de xeito rápido e sinxelo. Nunca foi tan fácil engadir, eliminar ou modificar ningunha clase de utilidade. Fai que as utilidades respondan, engade variantes de pseudo-clase e dálles nomes personalizados.
Máis información sobre as utilidades Explore compoñentes 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,
)
)
);
Engade facilmente elementos ocultos que se poden alternar, menús modais e fóra do lenzo, ventás emerxentes e información sobre ferramentas, e moito máis, todo sen jQuery. JavaScript en Bootstrap é HTML primeiro, o que significa que engadir complementos é tan sinxelo como engadir dataatributos. Necesitas máis control? Incluír complementos individuais mediante programación.
Por que escribir máis JavaScript cando podes escribir HTML? Case todos os complementos de JavaScript de Bootstrap contan cunha API de datos de primeira clase, que che permite usar JavaScript só engadindo 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>
Obtén máis información sobre o noso JavaScript como módulos e o uso da API programática .
Bootstrap presenta unha ducia de complementos que podes colocar en calquera proxecto. Colócaos todos á vez ou escolle só os que necesites.
Bootstrap Icons é unha biblioteca de iconas SVG de código aberto que inclúe máis de 1.500 glifos, con máis engadindo cada versión. Están deseñados para funcionar en calquera proxecto, tanto se utiliza o propio Bootstrap ou non. Utilízaos como SVG ou fontes de iconas: ambas opcións ofrécenche escala vectorial e personalización sinxela mediante CSS.
Take Bootstrap to the next level with premium themes from the official Bootstrap Themes marketplace. Themes are built on Bootstrap as their own extended frameworks, rich with new components and plugins, documentation, and powerful build tools.
