Saltar al contenido principal
Check
Musuq v5.2 nisqapi CSS tikraqkuna, kutichiq offcanvas, musuq yanapakuykuna, chaymanta aswan! Correa de botas

Bootstrap kaqwan utqaylla, kutichiq sitiokunata ruway

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.

npm i [email protected]
Ñawinchay docs nisqakunata

Kunanqa v5.2.1 · Uraykachiy · v4.6.x docs · Tukuy lluqsisqakuna

Imayna munasqaykiman hina qallariy

Bootstrap kaqwan wasiman chiqan saltay —CDN llamk'achiy, paquete kamachiq kaqnintakama churay utaq pukyuta uraykachiy.

Ñawinchay churana qillqakunata

Paquete kamachiqnintakama churay

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.

Incluye vía CDN

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>

Ñawinchay qallariypaq yanapakuyniyku

Huk saltayta tariy Bootstrap pukyuta willañiqikunata musuq ruwaypi oficial pusaqniykuwan yapay.

Webpack nisqa Parcela Vite

Personaliza todo con Sass

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.

Aswanta yachay personalización nisqamanta

Incluye todos los Sass de Bootstrap

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 .

Ima necesitasqaykitapas churay

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 .

CSS tikraqkunawan chiqap pachapi ruway chaymanta mast'ariy

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.

CSS tikraqkunamanta astawan yachay

CSS tikraqkunata llamk'achispa

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);
}

CSS tikraqkunawan ruway

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;
}

Componentes, Utilidad API kaqwan tupay

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

Utqaylla componentekunata ruway
// 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,
    )
  )
);

Atiyniyuq JavaScript plugins mana jQuery kaqwan

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.

Bootstrap JavaScript nisqamanta astawan yachay

Willayta atributo API

¿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 .

Conjunto integral de plugins nisqa

Bootstrap huk chunka plugins kaqwan kachkan mayqinkunatachus mayqin proyectomanpas urmachiyta atikunki. Chaykunata huk kutillapi churay, otaq necesitasqaykikunallata akllay.

Willariq

Ruwaqniykikunaman willay willaykunata rikuchiy chaymanta pakay.

Ñitina

Programmáticamente kamachiy activo estadota botonespaq.

Carrusel

Mayqin p'anqamanpas diapositivakuna qhawaykunata yapay, crossfade yanapakuypas.

Tuñiy

Contenidopa áreas nisqakunata mastariy hinaspa urmachiy, utaq acordeonkunata ruway.

Uraykachiy

T'inkikuna, ruwaykuna, formulariokuna chaymanta aswan menúkuna ruway.

Modal

Proyectoykiman flexible chaymanta kutichiq rimanakuykunata yapay.

Fuera de lona

Pakasqa lado barrakunata mayqin p'anqamanpas ruway chaymanta tikray.

Popover

Sapanchasqa llanthukunata ruway. Popper nisqapi ruwasqa.

Scrollspy nisqa

Kikinmanta musuqchay activo nav t'inkikunata p'anqa kuyuypi.

Tab

Bootstrap nav componentakuna imayna kanankuna tikrayta saqiy.

Tostada

Watukuqniykikunaman willakuykunata qhaway chaymanta pakay.

Hiranakuna yuyaychay

Navegadorpa yanapakuyninkunata sapanchasqa kaqkunawan tikray. Popper nisqapi ruwasqa.

Personalizalo con Iconos de Bootstrap

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.

Obtener Iconos de Tierra de Arranque

Iconos de Correa de Arranque

Hazlo tuyo con Temas oficiales de Bootstrap

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.

Navegación de Temas de Bootstrap

Temas de bootstrap