Tembipururã frontend ipuꞌakapáva, oñembotuicháva ha oguerekóva mbaꞌeporã. Emopuꞌa ha emohenda Sass ndive, eipuru sistema ha componente rejilla rehegua oñemopuꞌa mboyve, ha emoingove umi proyecto umi plugin JavaScript ipuꞌakapáva reheve.
Ko’áĝaite v5.2.1 · Emboguejy · v4.6.x kuatiañe’ẽ · Opaite ñeguenohẽ
Ejupi oike hag̃ua ñemopu’ãme Bootstrap ndive—eipuru CDN, emoĩ paquete mohendaha rupive térã emboguejy kódigo fuente.
Emohenda Bootstrap vore Sass ha JavaScript ypykue npm, RubyGems, Composer térã Meteor rupive. Umi instalación oñemboguatáva paquete-pe ndoikéiva kuatiañe’ẽ térã ñande script ñemopu’ã henyhẽva. Ikatu avei reipuru ore repo plantilla npm rehegua emoheñói pyaꞌe hag̃ua peteĩ proyecto Bootstrap rehegua npm rupive.
npm install [email protected]gem install bootstrap -v 5.2.1Emoñe’ẽ ore kuatiañe’ẽ instalación rehegua reikuaave hag̃ua ha umi paquete mohendaha ambuéva.
Tekotevẽ jave remoinge Bootstrap CSS térã JS oñembohekopyréva añoite, ikatu reipuru jsDelivr . Ehecha acción-pe ore ñepyrũ pya’e simple reheve , térã ehesa’ỹijo umi techapyrã emoñepyrũ hag̃ua nde proyecto oúva. Ikatu avei reiporavo remoĩ hag̃ua Popper ha ore JS peteĩteĩ .
<!-- 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>
Ehupyty peteĩ salto emoĩvo Bootstrap rembiapokue fuente peteĩ proyecto pyahúpe ore guía oficial ndive.
Bootstrap oipuru Sass peteĩ arquitectura modular ha personalizable-pe g̃uarã. Egueru umi componente reikotevẽva añoite, emboguata opción global gradiente ha sombra-icha, ha ehai nde CSS ore mba’ekuaarã, mapa, función ha mixin reheve.
Egueru peteĩ hoja de estilo ha resẽ umi carrera-pe opaite mba’ekuaarã ore CSS rehegua reheve.
// Variable overrides first
$primary: #900;
$enable-shadows: true;
$prefix: "mo-";
// Then import Bootstrap
@import "../node_modules/bootstrap/scss/bootstrap";
Eikuaave ore opción Sass global rehegua .
Mba’éichapa ndahasýi oñemboheko hag̃ua Bootstrap—emoinge CSS reikotevẽva añoite.
// 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";
Eikuaave mba’éichapa ojepuru Bootstrap Sass ndive .
Bootstrap 5 oñemonguꞌe ohóvo peteĩteĩva ñembohasa ndive oipuru porãve hag̃ua CSS mbaꞌekuaarã umi estilo tema global rehegua, componente peteĩteĩva ha umi utilidad jepe. Romeꞌe hetaiterei mbaꞌekuaarã saꞌi, letra estilo ha hetave mbaꞌe peteĩ :rootnivel-pe ojepuru hag̃ua mamove. Umi componente ha utilidad rehe, umi variable CSS oñemboheko alcance clase relevante-pe ha ikatu oñemoambue fácilmente.
Eipuru oimeraẽva ñande variable global:root ehai hag̃ua estilo pyahu. Umi CSS mbaꞌekuaarã oipuru var(--bs-variableName)ñeꞌejoaju ha ikatu ojehereda umi elemento mitãnguéra rupive.
.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);
}Embogue umi variable clase global, componente térã utilidad rehegua emohenda hag̃ua Bootstrap ndegustaháicha. Natekotevẽi ojedeclara jey peteĩteĩva regla, peteĩ valor variable pyahúnte.
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;
}Ipyahúva Bootstrap 5-pe, ore purupyrã ko’áĝa oñemboheko ore API Utility rupive . Romopu’ã peteĩ mapa Sass henyhẽva mba’ekuaarãgui ikatúva oñemboheko pya’e ha ndahasýiva. Araka’eve ndahasyivéima oñembojoapy, ojeipe’a térã oñemoambue hag̃ua mba’eveichagua mbo’esyry utilidad rehegua. Ejapo umi utilidad ombohováiva, emoĩve umi variante clase seudo rehegua ha eme’ẽ chupekuéra téra personalizado.
Eikuaave umi servicio público rehegua Ojeporeka umi componente ojejapóva personalizado rehe
// 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,
)
)
);
Emoĩ pya’e umi elemento kañymby oñembohasáva, modal ha menú offcanvas, popovers ha tembipuru’i ñe’ẽmondo, ha heta mba’e—opavave jQuery’ỹre. JavaScript Bootstrap-pe haꞌehína HTML peteĩha, heꞌiséva oñembojoapy hag̃ua plugins ndahasýiha oñembojoapyháicha dataatributo. ¿Reikotevẽve control? Oike umi plugin peteĩteĩva programáticamente.
Mba’érepa ojehai hetave JavaScript ikatúramo ojehai HTML? Haimete opaite Bootstrap JavaScript mboajepyréva oguereko peteĩ API marandu peteĩha clase rehegua, ohejáva ndéve reipuru JavaScript emoĩvo dataatributo-kuéra añoite.
<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>
Eikuaave ore JavaScript rehegua módulo ramo ha eipuru API programática .
Bootstrap oguereko peteĩ docena plugins ikatúva reity oimeraẽ proyecto-pe. Eitypaite umíva peteĩ jeýpe, térã eiporavo umi reikotevẽvante.
Bootstrap Icons haꞌehína peteĩ SVG icono aranduka’i código abierto oguerekóva 1.500 glifo ári, oñembojoapýva hetave opaite ñeguenohẽme. Ojejapo hikuái ombaꞌapo hag̃ua oimeraẽ tembiaporãme, tahaꞌe reipuru Bootstrap ijehegui térã nahániri. Eipuru umíva SVG térã icono fuente ramo—mokõive opción ome’ẽ ndéve escala vectorial ha personalización ndahasýiva CSS rupive.
Egueraha Bootstrap ambue nivel-pe umi tema premium reheve mercado oficial Bootstrap Temas- gui . Umi tema oñemopuꞌa Bootstrap-pe iñemohendapyre oñembotuichávaicha, ipirapire hetáva componente ha plugin pyahúpe, kuatiañeꞌepyre ha tembipururã ipuꞌakapáva omopuꞌa hag̃ua.
