Conjunt d'eines d'interfície potent, extensible i ple de funcions. Creeu i personalitzeu amb Sass, utilitzeu un sistema de graella i components preconstruïts i doneu vida als projectes amb potents connectors de JavaScript.
Actualment v5.2.1 · Descarregar · Documents v4.6.x · Tots els llançaments
Aneu directament a la construcció amb Bootstrap: utilitzeu el CDN, instal·leu-lo mitjançant el gestor de paquets o descarregueu el codi font.
Instal·leu els fitxers Sass i JavaScript font de Bootstrap mitjançant npm, RubyGems, Composer o Meteor. Les instal·lacions gestionades per paquets no inclouen documentació ni els nostres scripts de compilació complets. També podeu utilitzar el nostre dipòsit de plantilles npm per generar ràpidament un projecte Bootstrap mitjançant npm.
npm install [email protected]gem install bootstrap -v 5.2.1Llegiu els nostres documents d'instal·lació per obtenir més informació i gestors de paquets addicionals.
Quan només necessiteu incloure el CSS o JS compilat de Bootstrap, podeu utilitzar jsDelivr . Mireu-lo en acció amb el nostre senzill inici ràpid o navegueu pels exemples per impulsar el vostre proper projecte. També podeu optar per incloure Popper i el nostre JS per separat .
<!-- 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>
Feu un salt a la inclusió dels fitxers font de Bootstrap en un projecte nou amb les nostres guies oficials.
Bootstrap utilitza Sass per a una arquitectura modular i personalitzable. Importeu només els components que necessiteu, activeu opcions globals com ara degradats i ombres i escriviu el vostre propi CSS amb les nostres variables, mapes, funcions i mixins.
Importeu un full d'estil i aneu a les curses amb totes les funcions del nostre CSS.
// Variable overrides first
$primary: #900;
$enable-shadows: true;
$prefix: "mo-";
// Then import Bootstrap
@import "../node_modules/bootstrap/scss/bootstrap";
Obteniu més informació sobre les nostres opcions globals de Sass .
La manera més senzilla de personalitzar Bootstrap: inclou només el CSS que necessiteu.
// 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";
Obteniu més informació sobre com utilitzar Bootstrap amb Sass .
Bootstrap 5 evoluciona amb cada llançament per utilitzar millor les variables CSS per a estils de tema globals, components individuals i fins i tot utilitats. Oferim desenes de variables per a colors, estils de lletra i més a un :rootnivell per utilitzar-lo a qualsevol lloc. En components i utilitats, les variables CSS s'abasten a la classe rellevant i es poden modificar fàcilment.
Utilitzeu qualsevol de les nostres variables globals:root per escriure estils nous. Les variables CSS utilitzen la var(--bs-variableName)sintaxi i poden ser heretades per elements fills.
.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);
}Substituïu variables globals, de components o de classe d'utilitat per personalitzar Bootstrap com vulgueu. No cal tornar a declarar cada regla, només un valor de variable nou.
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;
}Novetat de Bootstrap 5, les nostres utilitats ara les genera la nostra API d'utilitats . El vam crear com un mapa Sass ple de funcions que es pot personalitzar ràpidament i fàcilment. Mai ha estat més fàcil afegir, eliminar o modificar classes d'utilitat. Feu que les utilitats responguin, afegiu variants de pseudo-classe i doneu-los noms personalitzats.
Obteniu més informació sobre els serveis públics Exploreu components personalitzats
// 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,
)
)
);
Afegeix fàcilment elements ocults alternables, menús modals i fora del llenç, finestres emergents i informació sobre eines, i molt més, tot sense jQuery. JavaScript a Bootstrap és HTML primer, el que significa que afegir connectors és tan fàcil com afegir dataatributs. Necessites més control? Incloeu connectors individuals amb programació.
Per què escriure més JavaScript quan pots escriure HTML? Gairebé tots els connectors de JavaScript de Bootstrap inclouen una API de dades de primera classe, que us permet utilitzar JavaScript només afegint dataatributs.
<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>
Obteniu més informació sobre el nostre JavaScript com a mòduls i l'ús de l'API programàtica .
Bootstrap inclou una dotzena de connectors que podeu introduir en qualsevol projecte. Col·loqueu-los tots alhora o trieu només els que necessiteu.
Bootstrap Icons és una biblioteca d'icones SVG de codi obert que inclou més de 1.500 glifos, amb més afegits a cada llançament. Estan dissenyats per funcionar en qualsevol projecte, tant si feu servir Bootstrap com si no. Utilitzeu-los com a SVG o tipus de lletra d'icones: ambdues opcions us ofereixen escala vectorial i una personalització fàcil mitjançant CSS.
Porta Bootstrap al següent nivell amb temes premium del mercat oficial de temes Bootstrap . Els temes es creen a Bootstrap com els seus propis marcs estès, rics amb nous components i connectors, documentació i potents eines de creació.
