Хүчирхэг, өргөтгөх боломжтой, олон функцээр дүүрэн урд талын хэрэгсэл. Sass ашиглан бүтээж, өөрчилж, урьдчилан бүтээсэн сүлжээний систем болон бүрэлдэхүүн хэсгүүдийг ашиглаж, хүчирхэг JavaScript залгаасуудын тусламжтайгаар төслүүдийг амьдралд хэрэглээрэй.
Одоогоор v5.2.1 · Татаж авах · v4.6.x docs · Бүх хувилбарууд
Bootstrap ашиглан шууд барилга руу үсэрнэ үү—CDN ашиглах, багц менежерээр дамжуулан суулгах эсвэл эх кодыг татаж авах.
Bootstrap-ийн эх сурвалж Sass болон JavaScript файлуудыг npm, RubyGems, Composer, эсвэл Meteor ашиглан суулгаарай. Багцын удирдлагатай суулгацууд нь баримт бичиг эсвэл бидний бүрэн бүтээх скриптийг агуулдаггүй. Та npm -ээр дамжуулан Bootstrap төслийг хурдан үүсгэхийн тулд манай npm загварын репо ашиглаж болно.
npm install [email protected]gem install bootstrap -v 5.2.1Дэлгэрэнгүй мэдээлэл болон нэмэлт багц менежерүүдийг манай суулгацын баримт бичгийг уншина уу .
Хэрэв та зөвхөн Bootstrap-ийн эмхэтгэсэн CSS эсвэл JS-г оруулах шаардлагатай бол jsDelivr ашиглаж болно . Үүнийг энгийн хурдан эхлүүлэхийн тусламжтайгаар харж , эсвэл дараагийн төслөө эхлүүлэхийн тулд жишээнүүдийг үзээрэй. Та мөн Popper болон манай JS-г тусад нь оруулахаар сонгож болно .
<!-- 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 нь Sass-ийг модульчлагдсан, өөрчлөх боломжтой архитектурт ашигладаг. Зөвхөн өөрт хэрэгтэй бүрэлдэхүүн хэсгүүдийг импортлож, градиент, сүүдэр гэх мэт глобал сонголтуудыг идэвхжүүлж, манай хувьсагч, газрын зураг, функц, холимог ашиглан өөрийн CSS бичээрэй.
Нэг загварын хүснэгт импортлоод та манай CSS-ийн бүх онцлогтой уралдаанд оролцох боломжтой.
// Variable overrides first
$primary: #900;
$enable-shadows: true;
$prefix: "mo-";
// Then import Bootstrap
@import "../node_modules/bootstrap/scss/bootstrap";
Манай дэлхийн Sass сонголтуудын талаар нэмэлт мэдээлэл аваарай .
Bootstrap-ийг өөрчлөх хамгийн хялбар арга бол зөвхөн танд хэрэгтэй CSS-г оруулаарай.
// 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";
Bootstrap-ийг Sass-тай ашиглах талаар нэмэлт мэдээлэл аваарай .
Bootstrap 5 нь дэлхийн сэдвийн хэв маяг, бие даасан бүрэлдэхүүн хэсгүүд, тэр ч байтугай хэрэгслүүдэд CSS хувьсагчдыг илүү сайн ашиглахын тулд хувилбар бүрээр хөгжиж байна. Бид өнгө, үсгийн хэв маяг гэх мэт олон арван хувьсагчийг :rootхаана ч ашиглах боломжтой түвшинд өгдөг. Бүрэлдэхүүн хэсгүүд болон хэрэгслүүдийн хувьд CSS хувьсагчдыг холбогдох ангид багтаасан бөгөөд амархан өөрчлөх боломжтой.
Шинэ загвар бичихийн тулд манай глобал :rootхувьсагчдыг ашиглана уу. CSS хувьсагч нь var(--bs-variableName)синтаксийг ашигладаг бөгөөд хүүхдийн элементүүдээр өвлөгдөж болно.
.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);
}Bootstrap-ийг хүссэнээрээ өөрчлөхийн тулд глобал, бүрэлдэхүүн хэсэг эсвэл хэрэгслийн ангиллын хувьсагчдыг дарж бичээрэй. Дүрэм бүрийг дахин зарлах шаардлагагүй, зөвхөн шинэ хувьсагчийн утга.
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-д шинээр гарсан манай хэрэгслүүдийг одоо Utility API -ээр үүсгэсэн . Бид үүнийг хурдан бөгөөд хялбархан өөрчлөх боломжтой Sass газрын зураг болгон бүтээсэн. Хэрэглээний анги нэмэх, хасах, өөрчлөх нь хэзээ ч амар байгаагүй. Хэрэгслийг хариу үйлдэл үзүүлэх, псевдо ангиллын хувилбаруудыг нэмж, тэдэнд тусгай нэр өгөх.
Хэрэглээний талаар илүү ихийг мэдэж аваарай Тохируулсан бүрэлдэхүүн хэсгүүдийг судлах
// 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,
)
)
);
JQuery-г ашиглахгүйгээр сэлгэх боломжтой далд элементүүд, модаль болон гадуур цэс, поповер, хэрэгслийн зөвлөмж зэргийг хялбархан нэмж болно. dataBootstrap дахь JavaScript нь HTML-ийн хувьд эхлээд байгаа бөгөөд энэ нь залгаасуудыг нэмэх нь атрибут нэмэхтэй адил хялбар гэсэн үг юм. Илүү хяналт хэрэгтэй байна уу? Тус тусад нь залгаасуудыг програмын дагуу оруулах.
HTML бичиж чаддаг байхад яагаад илүү JavaScript бичих вэ? Bootstrap-ийн бараг бүх JavaScript залгаасууд нь нэгдүгээр зэрэглэлийн өгөгдлийн API-тай бөгөөд зөвхөн dataатрибут нэмэх замаар JavaScript-г ашиглах боломжийг олгодог.
<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>
Манай JavaScript-ийн модулиуд болон программын API ашиглах талаар нэмэлт мэдээлэл аваарай .
Bootstrap нь ямар ч төсөлд оруулах боломжтой хэдэн арван залгаасуудыг агуулдаг. Тэдгээрийг бүгдийг нь нэг дор оруул эсвэл өөрт хэрэгтэйг нь сонго.
Bootstrap Icons нь 1500 гаруй дүрс бүхий SVG дүрс бүхий нээлттэй эхийн номын сан бөгөөд хувилбар болгон нэмж оруулдаг. Эдгээр нь Bootstrap-г өөрөө ашигладаг эсэхээс үл хамааран ямар ч төсөлд ажиллахад зориулагдсан. Тэдгээрийг SVG эсвэл дүрсний фонт болгон ашигла—хоёр сонголт нь танд векторын масштаб болон CSS-ээр хялбар тохируулах боломжийг олгоно.
Албан ёсны Bootstrap Themes зах зээлийн дээд зэрэглэлийн загваруудыг ашиглан Bootstrap-ийг дараагийн түвшинд ав . Сэдвүүд нь Bootstrap дээр шинэ бүрэлдэхүүн хэсэг, залгаасууд, баримт бичиг, хүчирхэг бүтээх хэрэгслээр баялаг өөрийн өргөтгөсөн хүрээ болгон бүтээгдсэн.
