Frontend tresna-tresna indartsua, hedagarria eta eginbidez josia. Eraiki eta pertsonalizatu Sass-ekin, erabili aurrez eraikitako sareta-sistema eta osagaiak eta eman proiektuak bizia JavaScript plugin indartsuekin.
Une honetan v5.2.1 · Deskargatu · v4.6.x dokumentuak · Argitalpen guztiak
Sar zaitez Bootstrap-ekin eraikitzera: erabili CDN-a, instalatu pakete-kudeatzailearen bidez edo deskargatu iturburu-kodea.
Instalatu Bootstrap-en Sass eta JavaScript fitxategiak npm, RubyGems, Composer edo Meteor bidez. Kudeatutako paketeen instalazioek ez dute dokumentaziorik edo gure eraikuntza-script osorik sartzen. Gure npm txantiloiaren repo ere erabil dezakezu Bootstrap proiektu bat azkar sortzeko npm bidez.
npm install [email protected]gem install bootstrap -v 5.2.1Irakurri gure instalazio-dokumentuak informazio gehiago eta pakete-kudeatzaile gehigarrietarako.
Bootstrap-en konpilatutako CSS edo JS bakarrik sartu behar duzunean, jsDelivr erabil dezakezu . Ikus ezazu martxan gure hasiera azkar sinplearekin , edo arakatu adibideak zure hurrengo proiektua abiarazteko. Popper eta gure JS bereizita sartzea ere aukeratu dezakezu .
<!-- 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>
Bootstrap-ek Sass erabiltzen du arkitektura modular eta pertsonalizagarri baterako. Inportatu behar dituzun osagaiak soilik, gaitu gradienteak eta itzalak bezalako aukera globalak eta idatzi zure CSSa gure aldagai, map, funtzio eta nahasketarekin.
Inportatu estilo-orri bat eta gure CSSaren ezaugarri guztiekin lasterketetara abiatuko zara.
// Variable overrides first
$primary: #900;
$enable-shadows: true;
$prefix: "mo-";
// Then import Bootstrap
@import "../node_modules/bootstrap/scss/bootstrap";
Lortu informazio gehiago gure Sass aukerei buruz .
Bootstrap pertsonalizatzeko modurik errazena: sartu behar duzun CSS soilik.
// 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";
Lortu informazio gehiago Bootstrap Sass-ekin erabiltzeari buruz .
Bootstrap 5 bertsio bakoitzean eboluzionatzen ari da CSS aldagaiak hobeto erabiltzeko gai globaletarako, osagai indibidualetarako eta baita utilitateetarako ere. Koloreetarako, letra-tipoetarako eta beste hainbat aldagai eskaintzen ditugu :rootedonon erabiltzeko. Osagai eta utilitateetan, CSS aldagaiak dagokien klasean sartzen dira eta erraz alda daitezke.
Erabili gure aldagai globaletako:root edozein estilo berriak idazteko. CSS aldagaiek var(--bs-variableName)sintaxia erabiltzen dute eta elementu seme-alabek heredatu ditzakete.
.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);
}Gainidatzi aldagai globalak, osagaiak edo erabilgarritasun klaseak Bootstrap nahi duzun moduan pertsonalizatzeko. Ez da arau bakoitza berriro deklaratu behar, balio aldagai berri bat besterik ez.
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;
}Bootstrap 5-en berria, gure utilitateak gure Utility APIak sortzen ditu orain . Ezaugarriz betetako Sass mapa gisa eraiki dugu, azkar eta erraz pertsonaliza daitekeen. Inoiz ez da errazagoa izan erabilgarritasun-klaseak gehitzea, kentzea edo aldatzea. Egin utilitateak erantzuteko, gehitu sasi-klase aldaerak eta eman izen pertsonalizatuak.
Lortu informazio gehiago utilitateei buruz Arakatu pertsonalizatutako osagaiak
// 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,
)
)
);
Gehitu erraz txandaka daitezkeen ezkutuko elementuak, modalak eta oihalez kanpoko menuak, popover-ak eta tresna-aholkuak eta askoz gehiago, jQuery gabe. dataBootstrap-en JavaScript HTML lehena da, hau da, pluginak gehitzea atributuak gehitzea bezain erraza da . Kontrol gehiago behar duzu? Sartu banakako pluginak programatikoki.
Zergatik idatzi JavaScript gehiago HTML idazten duzunean? Bootstrap-en JavaScript plugin ia guztiek lehen mailako datu API bat dute, eta dataatributuak gehituz JavaScript erabiltzeko aukera ematen dizu.
<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>
Lortu informazio gehiago gure JavaScript modulu gisa eta API programatikoa erabiliz .
Bootstrap-ek edozein proiektutan jar ditzakezun dozena bat plugin eskaintzen ditu. Jarri itzazu aldi berean, edo aukeratu behar dituzunak besterik ez.
Bootstrap Icons kode irekiko SVG ikonoen liburutegia da, 1.500 glifo baino gehiago dituena, bertsio bakoitzean gehiago gehituz. Edozein proiektutan lan egiteko diseinatuta daude, Bootstrap bera erabili ala ez. Erabili SVG edo ikono letra-tipo gisa; bi aukerek bektore-eskala eta CSS bidez pertsonalizatzeko erraza eskaintzen dizute.
Eraman Bootstrap hurrengo mailara Bootstrap Themes merkatu ofizialeko gai premiumekin . Gaiak Bootstrap-en eraikitzen dira beren esparru hedatu gisa, osagai eta plugin berriekin, dokumentazioarekin eta eraikitze-tresna indartsuekin aberatsak.
