Үндсэн агуулга руу шилжих
Check
v5.2-д шинэ CSS хувьсагчууд, хариу үйлдэл үзүүлэх боломжтой зураг, шинэ хэрэгслүүд болон бусад зүйлс! Ачаалагч

Bootstrap ашиглан хурдан, хариу үйлдэл үзүүлэх сайтуудыг бүтээгээрэй

Хүчирхэг, өргөтгөх боломжтой, олон функцээр дүүрэн урд талын хэрэгсэл. Sass ашиглан бүтээж, өөрчилж, урьдчилан бүтээсэн сүлжээний систем болон бүрэлдэхүүн хэсгүүдийг ашиглаж, хүчирхэг JavaScript залгаасуудын тусламжтайгаар төслүүдийг амьдралд хэрэглээрэй.

npm i [email protected]
Баримт бичгийг уншина уу

Одоогоор 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

Дэлгэрэнгүй мэдээлэл болон нэмэлт багц менежерүүдийг манай суулгацын баримт бичгийг уншина уу .

CDN-ээр дамжуулан оруулах

Хэрэв та зөвхөн 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-тай бүх зүйлийг тохируулаарай

Bootstrap нь Sass-ийг модульчлагдсан, өөрчлөх боломжтой архитектурт ашигладаг. Зөвхөн өөрт хэрэгтэй бүрэлдэхүүн хэсгүүдийг импортлож, градиент, сүүдэр гэх мэт глобал сонголтуудыг идэвхжүүлж, манай хувьсагч, газрын зураг, функц, холимог ашиглан өөрийн CSS бичээрэй.

Тохируулах талаар илүү ихийг мэдэж аваарай

Bootstrap-ийн бүх Sass-ийг оруулаарай

Нэг загварын хүснэгт импортлоод та манай 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-тай ашиглах талаар нэмэлт мэдээлэл аваарай .

CSS хувьсагчийг ашиглан бодит цаг хугацаанд бүтээж, өргөжүүлээрэй

Bootstrap 5 нь дэлхийн сэдвийн хэв маяг, бие даасан бүрэлдэхүүн хэсгүүд, тэр ч байтугай хэрэгслүүдэд CSS хувьсагчдыг илүү сайн ашиглахын тулд хувилбар бүрээр хөгжиж байна. Бид өнгө, үсгийн хэв маяг гэх мэт олон арван хувьсагчийг :rootхаана ч ашиглах боломжтой түвшинд өгдөг. Бүрэлдэхүүн хэсгүүд болон хэрэгслүүдийн хувьд CSS хувьсагчдыг холбогдох ангид багтаасан бөгөөд амархан өөрчлөх боломжтой.

CSS хувьсагчийн талаар илүү ихийг олж мэдэх

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

CSS хувьсагчаар дамжуулан тохируулах

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

Бүрэлдэхүүн хэсгүүд, Utility API-тай танилцана уу

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-гүй хүчирхэг JavaScript залгаасууд

JQuery-г ашиглахгүйгээр сэлгэх боломжтой далд элементүүд, модаль болон гадуур цэс, поповер, хэрэгслийн зөвлөмж зэргийг хялбархан нэмж болно. dataBootstrap дахь JavaScript нь HTML-ийн хувьд эхлээд байгаа бөгөөд энэ нь залгаасуудыг нэмэх нь атрибут нэмэхтэй адил хялбар гэсэн үг юм. Илүү хяналт хэрэгтэй байна уу? Тус тусад нь залгаасуудыг програмын дагуу оруулах.

Bootstrap JavaScript-ийн талаар нэмэлт мэдээлэл аваарай

Өгөгдлийн шинж чанарын API

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 нь ямар ч төсөлд оруулах боломжтой хэдэн арван залгаасуудыг агуулдаг. Тэдгээрийг бүгдийг нь нэг дор оруул эсвэл өөрт хэрэгтэйг нь сонго.

Анхааруулга

Хэрэглэгчдэд анхааруулах мессежийг харуулах, нуух.

Товчлуур

Товчлуурын идэвхтэй төлөвийг программчлан удирдах.

Карусель

Crossfade-ийн дэмжлэгийг оруулаад аль ч хуудсанд слайд шоу нэмнэ үү.

Нурах

Агуулгын хэсгийг өргөжүүлэх, буулгах, эсвэл баян хуур үүсгэх.

Унтраах цэс

Холбоос, үйлдэл, маягт болон бусад зүйлсийн цэсийг үүсгэ.

Модал

Төсөлдөө уян хатан, хариу үйлдэл үзүүлэх харилцах цонхыг нэмнэ үү.

Offcanvas

Дурын хуудсанд далд хажуугийн самбар үүсгэж, сэлгэх боломжтой.

Поповер

Захиалгат давхаргыг үүсгэх. Поппер дээр бүтээгдсэн.

Scrollspy

Хуудасны гүйлгээнд тулгуурлан идэвхтэй навигацийн холбоосыг автоматаар шинэчлэх.

Таб

Ачаалагчийн навигацийн бүрэлдэхүүн хэсгүүдэд агуулгыг сэлгэхийг зөвшөөрнө үү.

Шарсан талх

Өөрийн зочдод мэдэгдлийг харуулах, нуух.

Зөвлөмж

Хөтөчийн зөвлөмжийг захиалгаар соль. Поппер дээр бүтээгдсэн.

Үүнийг Bootstrap Icons ашиглан тохируулаарай

Bootstrap Icons нь 1500 гаруй дүрс бүхий SVG дүрс бүхий нээлттэй эхийн номын сан бөгөөд хувилбар болгон нэмж оруулдаг. Эдгээр нь Bootstrap-г өөрөө ашигладаг эсэхээс үл хамааран ямар ч төсөлд ажиллахад зориулагдсан. Тэдгээрийг SVG эсвэл дүрсний фонт болгон ашигла—хоёр сонголт нь танд векторын масштаб болон CSS-ээр хялбар тохируулах боломжийг олгоно.

Bootstrap дүрсүүдийг аваарай

Ачаалагчийн дүрс тэмдэг

Албан ёсны Bootstrap сэдвүүдээр үүнийг өөрийн болго

Албан ёсны Bootstrap Themes зах зээлийн дээд зэрэглэлийн загваруудыг ашиглан Bootstrap-ийг дараагийн түвшинд ав . Сэдвүүд нь Bootstrap дээр шинэ бүрэлдэхүүн хэсэг, залгаасууд, баримт бичиг, хүчирхэг бүтээх хэрэгслээр баялаг өөрийн өргөтгөсөн хүрээ болгон бүтээгдсэн.

Bootstrap сэдвүүдийг үзэх

Bootstrap сэдэв