Atiyniyuq, mast'arikuq, chaymanta ruwanakuna hunt'asqa ñawpaqninpi yanapakuypa qillqan. Sass kaqwan ruway chaymanta ruway, ñawpaq ruwasqa rejilla sistema chaymanta componentes kaqwan llamk'achiy, chaymanta ruwanakuna kawsachiyman kallpasapa JavaScript plugins kaqwan.
Kunanqa v5.2.1 · Uraykachiy · v4.6.x docs · Tukuy lluqsisqakuna
Bootstrap kaqwan wasiman chiqan saltay —CDN llamk'achiy, paquete kamachiq kaqnintakama churay utaq pukyuta uraykachiy.
Bootstrap kaqpa pukyuta Sass chaymanta JavaScript willañiqikunata npm, RubyGems, Composer utaq Meteor kaqninta churay. Paquete kamachisqa churanakuna mana qillqakunata utaq hunt'asqa ruwana scriptkunaykutachu churanku. También puedes usar nuestro repo de plantillas de npm para generar rápidamente un proyecto de Bootstrap vía npm.
npm install [email protected]gem install bootstrap -v 5.2.1Ñawiriy churana qillqayku aswan willakuypaq chaymanta yapasqa paquete kamachiqkunapaq.
Bootstrap huñusqa CSS utaq JS kaqlla churanayki tiyan, jsDelivr llamk'achiyta atikunki . Rikuy ruwaypi ñuqaykupa sasan utqaylla qallariy , utaq qatiq ruwayniykimanta qallariypaq ejemplokunata maskay . Hinallataq akllayta atinki Popper chaymanta JSniyku sapanmanta churayta .
<!-- 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>
Huk saltayta tariy Bootstrap pukyuta willañiqikunata musuq ruwaypi oficial pusaqniykuwan yapay.
Bootstrap Sass llamk'achin huk modular chaymanta ruwanapaq arquitectura kaqpaq. Necesitasqayki componentekunallata apamuy, tukuypaq akllanakunata atichiy gradientekuna chaymanta llantukuna hina, chaymanta kikiyki CSS qillqay tikraqniykuwan, mapakunawan, ruwanaykuwan chaymanta mixinsniykuwan.
Huk estilo raphita apamuy chaymanta CSSniykupa sapa ruwayninwan carrerakunaman ripunki.
// Variable overrides first
$primary: #900;
$enable-shadows: true;
$prefix: "mo-";
// Then import Bootstrap
@import "../node_modules/bootstrap/scss/bootstrap";
Aswanta yachay tukuy pacha Sass akllanaykumanta .
Aswan facil ñan Bootstrap ruwanapaq—CSS necesitasqaykillata churay.
// 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";
Sass kaqwan Bootstrap llamk'achiyta astawan yachay .
Bootstrap 5 sapa lluqsichiywan wiñachkan aswan allinta CSS tikraqkunata llamk'achinapaq pachantinpi tema estilokuna kaqpaq, sapalla componentes kaqpaq, chaymanta yanapakuykunapaqpas. Chunkakuna tikraqkunata quyku llimp'ikuna, qillqakuna estilokuna chaymanta aswan huk :rootpatapi maypipas llamk'anapaq. Componentes kaqpi chaymanta yanapakuykunapi, CSS tikraqkuna tupaq clase kaqman alcanceyuq kanku chaymanta mana sasachu tikray atikunku.
Musuq estilokunata qillqanapaq mayqin pachantin :roottikraqniykutapas llamk'achiy. CSS tikraqkuna var(--bs-variableName)sintaxis llamk'achinku chaymanta wawakuna elementokuna herenciata atinku.
.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);
}Tukuypaq, componente utaq yanapakuy clase tikraqkunata llalliy Bootstrap imayna munasqaykimanhina ruwanapaq. Mana sapa kamachiyta musuqmanta willaychu tiyan, musuq tikraq chanilla.
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;
}Musuq Bootstrap 5 kaqpi, yanapakuyniyku kunan Utility APIykuwan ruwasqa kachkan . Chayta ruwarqayku huk ruwanakuna hunt'asqa Sass mapa hina chaymanta usqhaylla chaymanta mana sasachu ruwasqa kanman. Mana hayk'aqpas aswan facilchu karqan yapay, hurquy utaq ima yanapakuy clasekuna tikray. Utilidadkuna kutichiq ruway, pseudo-clase variantes yapay, chaymanta sapanchasqa sutikuna quy.
Utilidades nisqamanta astawan yachay Componentes personalizados nisqakunata maskay
// 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,
)
)
);
Facilmente yapay toggleable pakasqa elementokuna, modales chaymanta offcanvas menúkuna, popovers chaymanta yanapakuykunamanta, chaymanta aswan achka —tukuy mana jQuery kaqwan. JavaScript Bootstrap kaqpi HTML-ñawpaq kaq, chaymanta niyta munan plugins yapayqa dataatributokuna yapay hina facilmi. ¿Necesitankichu aswan controlta? Sapa plugins programawan churay.
¿Imaraykutaq aswan JavaScript qillqanayki HTML qillqayta atispa? Yaqa llapa Bootstrap kaqpa JavaScript plugins kaqnin huk ñawpaq clase willay API kaqwan ruwanku, JavaScript llamk'achiyta atikunki dataatributokuna yapaspalla.
<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>
Aswan yachay JavaScriptniykumanta módulos hina chaymanta programatico API llamk'achiyta .
Bootstrap huk chunka plugins kaqwan kachkan mayqinkunatachus mayqin proyectomanpas urmachiyta atikunki. Chaykunata huk kutillapi churay, otaq necesitasqaykikunallata akllay.
Bootstrap Icons huk kichasqa qullqisapa SVG icono biblioteca 1.500 aswan glifokunayuq, aswan yapasqa sapa lluqsichiywan. Paykunaqa mayqin ruwaypipas llamk'anankupaq ruwasqa kachkanku, kikin Bootstrap llamk'achkanki utaq mana llamk'achkanki chaypas. Chaykunata SVGs hina utaq icono letrakuna hina llamk'achiy—iskaynin akllanakuna vector escalacionta qusunki chaymanta CSS kaqnintakama mana sasa ruwanakuna ruwayta.
Bootstrap qatiq pataman apakuy premium temakunawan Bootstrap Temas qhatumanta oficial kaqmanta . Temakuna Bootstrap kaqpi ruwasqa kanku kikinku mast'arisqa marcokuna hina, qhapaq musuq componentekunawan chaymanta plugins kaqwan, qillqakunawan chaymanta kallpasapa ruwana yanapakuykunawan.
