Ngwa ngwa dị ike, nke enwere ike ịgbatị, yana atụmatụ juru n'ihu. Jiri Sass wulite ma hazie ya, jiri sistemụ grid arụgoro arụgoro na akụrụngwa, wee were ngwa Javascript dị ike weta ọrụ dị ndụ.
Ugbu a v5.2.1 · Budata · v4.6.x docs · Mwepụta niile
Jiri Bootstrap wulite ozugbo - jiri CDN, tinye ya site na njikwa ngwugwu, ma ọ bụ budata koodu isi mmalite.
Wụnye faịlụ Bootstrap Sass na Javascript site na npm, RubyGems, Onye na-ede egwú, ma ọ bụ Meteor. Ngwunye ejirikwa ngwungwu anaghị agụnye akwụkwọ ma ọ bụ script anyị wuo n'uju. Ị nwekwara ike iji npm template repo iji mepụta ọrụ Bootstrap ngwa ngwa site na npm.
npm install [email protected]gem install bootstrap -v 5.2.1Gụọ docs nwụnye anyị maka ozi ndị ọzọ yana ndị njikwa ngwugwu agbakwunyere.
Mgbe naanị ịchọrọ itinye Bootstrap's CSS ma ọ bụ JS, ị nwere ike iji jsDelivr . Hụ ya ka ọ na-arụ ọrụ na mmalite ngwa ngwa anyị dị mfe , ma ọ bụ chọgharịa ihe atụ ka ịmalite ịmalite ọrụ na-esote gị. Ị nwekwara ike họrọ ịgụnye Popper na JS anyị iche .
<!-- 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 na-eji Sass maka ụkpụrụ ụlọ nwere ike ịhazi ya. Bubata naanị akụrụngwa ị chọrọ, mee ka nhọrọ zuru ụwa ọnụ dị ka gradients na onyinyo, wee dee CSS nke gị site na iji mgbanwe, maapụ, ọrụ na mixins anyị.
Bubata otu mpempe akwụkwọ ma ị ga-aga n'ọsọ na akụkụ ọ bụla nke CSS anyị.
// Variable overrides first
$primary: #900;
$enable-shadows: true;
$prefix: "mo-";
// Then import Bootstrap
@import "../node_modules/bootstrap/scss/bootstrap";
Mụtakwuo maka nhọrọ Sass zuru ụwa ọnụ anyị .
Ụzọ kachasị mfe iji hazie Bootstrap-gụnyere naanị CSS ị chọrọ.
// 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";
Mụtakwuo maka iji Bootstrap na Sass .
Bootstrap 5 na-etolite na ntọhapụ ọ bụla iji jiri mgbanwe CSS mee ihe nke ọma maka ụdị isiokwu ụwa, ihe ndị dị n'otu n'otu, na ọbụna ngwa ọrụ. Anyị na-enye ọtụtụ mgbanwe maka agba, ụdị font na ndị ọzọ :rootn'ogo maka iji ebe ọ bụla. Na akụrụngwa na akụrụngwa, mgbanwe CSS na-agbakọba na klaasị dabara na enwere ike gbanwee ngwa ngwa.
Jiri mgbanwe ọ bụla zuru ụwa ọnụ:root anyị dee ụdị ọhụrụ. Ụdị CSS na-eji var(--bs-variableName)syntax eme ihe na ihe ụmụaka nwere ike ketara ya.
.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);
}Wepụ mgbanwe klaasị zuru ụwa ọnụ, akụrụngwa ma ọ bụ ike iji hazie Bootstrap ka ọ masịrị gị. Ọ dịghị mkpa ịkpọgharịa iwu ọ bụla, naanị uru mgbanwe ọhụrụ.
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;
}Ọhụrụ na Bootstrap 5, ngwa ngwa anyị bụ Utility API emepụtara ugbu a . Anyị wuru ya dị ka maapụ Sass nwere njiri mara nke enwere ike ịhazi ngwa ngwa yana ngwa ngwa. Ọ dịbeghị mfe ịgbakwunye, wepụ, ma ọ bụ gbanwee klaasị ọ bụla. Mee ka akụrụngwa nabata, tinye ụdị pseudo-class ma nye ha aha ahaziri iche.
// 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,
)
)
);
Ngwa ngwa tinye ihe zoro ezo na-agbanwe agbanwe, modal na menus offcanvas, popovers na ndụmọdụ ngwaọrụ, yana ọtụtụ ndị ọzọ — ha niile na-enweghị jQuery. Javascript na Bootstrap bụ HTML-nke mbụ, nke pụtara ịgbakwunye plugins dị mfe dị ka ịgbakwunye dataàgwà. Achọrọ njikwa ọzọ? Tinye plugins nke ọ bụla na mmemme.
Kedu ihe kpatara idekwu Javascript mgbe ị nwere ike ide HTML? Ihe fọrọ nke nta ka ọ bụrụ plugins Javascript Bootstrap niile nwere API data klas nke mbụ, na-enye gị ohere iji Javascript naanị site na ịgbakwunye datanjirimara.
<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>
Mụtakwuo maka Javascript anyị dị ka modul na iji API mmemme .
Bootstrap nwere plugins iri na abụọ ị nwere ike ịdaba na ọrụ ọ bụla. Tuba ha n'otu oge, ma ọ bụ họrọ naanị ndị ị chọrọ.
Icons Bootstrap bụ ọba akwụkwọ akara ngosi SVG mepere emepe nke na-egosipụta ihe karịrị 1,500 glyphs, yana agbakwunyere ntọhapụ ọ bụla. Emebere ha ka ha rụọ ọrụ n'ọrụ ọ bụla, ma ị na-eji Bootstrap n'onwe ya ma ọ bụ na ị naghị. Jiri ha dị ka SVGs ma ọ bụ akara ngosi akara - nhọrọ abụọ ahụ na-enye gị nhazi vector na nhazi dị mfe site na CSS.
Were isiokwu dị elu were Bootstrap gaa n'ọkwa ọzọ site na ụlọ ahịa Bootstrap Gburugburu . Ewubere isiokwu na Bootstrap dị ka usoro agbatịpụrụ onwe ha, nwee akụrụngwa ọhụrụ na plugins, akwụkwọ, yana ngwa nrụpụta dị ike.
