Kit de herramientas frontal potente, ampliable y repleto de funciones. Cree y personalice con Sass, utilice el sistema de grillas y los componentes prediseñados y haga que los proyectos cobren vida con potentes complementos de JavaScript.
Actualmente v5.2.1 · Descargar · v4.6.x docs · Todos los lanzamientos
Vaya directamente a la construcción con Bootstrap: use el CDN, instálelo a través del administrador de paquetes o descargue el código fuente.
Instale los archivos fuente Sass y JavaScript de Bootstrap a través de npm, RubyGems, Composer o Meteor. Las instalaciones gestionadas por paquetes no incluyen documentación ni nuestros scripts de compilación completos. También puede usar nuestro repositorio de plantillas npm para generar rápidamente un proyecto Bootstrap a través de npm.
npm install [email protected]gem install bootstrap -v 5.2.1Lea nuestros documentos de instalación para obtener más información y administradores de paquetes adicionales.
Cuando solo necesita incluir el CSS o JS compilado de Bootstrap, puede usar jsDelivr . Véalo en acción con nuestro inicio rápido simple , o explore los ejemplos para impulsar su próximo proyecto. También puede optar por incluir Popper y nuestro 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>
Anímese a incluir los archivos fuente de Bootstrap en un nuevo proyecto con nuestras guías oficiales.
Bootstrap utiliza Sass para una arquitectura modular y personalizable. Importe solo los componentes que necesita, habilite opciones globales como degradados y sombras, y escriba su propio CSS con nuestras variables, mapas, funciones y mixins.
Importa una hoja de estilo y estarás listo para las carreras con todas las características de nuestro CSS.
// Variable overrides first
$primary: #900;
$enable-shadows: true;
$prefix: "mo-";
// Then import Bootstrap
@import "../node_modules/bootstrap/scss/bootstrap";
Obtenga más información sobre nuestras opciones globales de Sass .
La forma más fácil de personalizar Bootstrap: incluye solo el 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";
Obtenga más información sobre el uso de Bootstrap con Sass .
Bootstrap 5 evoluciona con cada versión para utilizar mejor las variables CSS para estilos de temas globales, componentes individuales e incluso utilidades. Proporcionamos docenas de variables para colores, estilos de fuente y más a un :rootnivel para usar en cualquier lugar. En los componentes y las utilidades, las variables CSS se limitan a la clase relevante y se pueden modificar fácilmente.
Utilice cualquiera de nuestras variables globales:root para escribir nuevos estilos. Las variables CSS usan la var(--bs-variableName)sintaxis y pueden ser heredadas por elementos secundarios.
.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);
}Anule las variables globales, de componente o de clase de utilidad para personalizar Bootstrap como desee. No es necesario volver a declarar cada regla, solo un nuevo 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;
}Nuevo en Bootstrap 5, nuestras utilidades ahora son generadas por nuestra API de utilidades . Lo construimos como un mapa Sass repleto de funciones que se puede personalizar rápida y fácilmente. Nunca ha sido tan fácil agregar, eliminar o modificar clases de utilidad. Haga que las utilidades respondan, agregue variantes de pseudoclases y asígneles nombres personalizados.
Obtenga más información sobre los servicios públicos Explora 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,
)
)
);
Agregue fácilmente elementos ocultos alternables, menús modales y fuera del lienzo, ventanas emergentes e información sobre herramientas, y mucho más, todo sin jQuery. JavaScript en Bootstrap es HTML primero, lo que significa que agregar complementos es tan fácil como agregar dataatributos. ¿Necesita más control? Incluya complementos individuales mediante programación.
¿Por qué escribir más JavaScript cuando puedes escribir HTML? Casi todos los complementos de JavaScript de Bootstrap cuentan con una API de datos de primera clase, lo que le permite usar JavaScript simplemente agregando 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>
Obtenga más información sobre nuestro JavaScript como módulos y el uso de la API programática .
Bootstrap presenta una docena de complementos que puede colocar en cualquier proyecto. Póngalos todos a la vez, o elija solo los que necesita.
Bootstrap Icons es una biblioteca de iconos SVG de código abierto que presenta más de 1500 glifos, y se agregan más en cada versión. Están diseñados para funcionar en cualquier proyecto, ya sea que use Bootstrap o no. Úselos como SVG o fuentes de iconos: ambas opciones le brindan escalado vectorial y una fácil personalización a través de CSS.
Lleve Bootstrap al siguiente nivel con temas premium del mercado oficial de Bootstrap Themes . Los temas se crean en Bootstrap como sus propios marcos extendidos, ricos en nuevos componentes y complementos, documentación y potentes herramientas de construcción.
