Kuchli, kengaytiriladigan va imkoniyatlarga ega frontend asboblar to'plami. Sass bilan tuzing va sozlang, oldindan tuzilgan tarmoq tizimi va komponentlaridan foydalaning va kuchli JavaScript plaginlari yordamida loyihalarni hayotga olib boring.
Hozirda v5.2.1 · Yuklab olish · v4.6.x hujjatlar · Barcha relizlar
Bootstrap yordamida to'g'ridan-to'g'ri binoga o'ting - CDN-dan foydalaning, uni paket menejeri orqali o'rnating yoki manba kodini yuklab oling.
Bootstrap manbalarining Sass va JavaScript fayllarini npm, RubyGems, Composer yoki Meteor orqali o'rnating. Paket boshqariladigan oʻrnatishlar hujjatlarni yoki toʻliq tuzilgan skriptlarni oʻz ichiga olmaydi. Shuningdek , npm orqali Bootstrap loyihasini tezda yaratish uchun npm shablon repo -dan foydalanishingiz mumkin.
npm install [email protected]gem install bootstrap -v 5.2.1Qo'shimcha ma'lumot va qo'shimcha paket menejerlari uchun o'rnatish hujjatlarini o'qing .
Agar siz faqat Bootstrap-ning kompilyatsiya qilingan CSS yoki JS-ni qo'shishingiz kerak bo'lsa, jsDelivr dan foydalanishingiz mumkin . Bizning oddiy tez boshlashimiz bilan buni amalda ko'ring yoki keyingi loyihangizni tezda boshlash uchun misollarni ko'rib chiqing . Popper va JSni alohida qo'shishni tanlashingiz mumkin .
<!-- 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 modulli va sozlanishi arxitektura uchun Sass-dan foydalanadi. Faqat kerakli komponentlarni import qiling, gradientlar va soyalar kabi global opsiyalarni yoqing va o‘zgaruvchilarimiz, xaritalarimiz, funksiyalarimiz va miksinlarimiz yordamida o‘z CSS-ni yozing.
Bitta uslublar jadvalini import qiling va siz CSS-ning barcha funksiyalari bilan poygaga chiqasiz.
// Variable overrides first
$primary: #900;
$enable-shadows: true;
$prefix: "mo-";
// Then import Bootstrap
@import "../node_modules/bootstrap/scss/bootstrap";
Global Sass variantlarimiz haqida ko'proq bilib oling .
Bootstrap-ni sozlashning eng oson usuli - faqat sizga kerak bo'lgan CSS-ni o'z ichiga oladi.
// 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-ni Sass bilan ishlatish haqida ko'proq bilib oling .
Bootstrap 5 global mavzu uslublari, individual komponentlar va hatto yordamchi dasturlar uchun CSS o'zgaruvchilaridan yaxshiroq foydalanish uchun har bir nashr bilan rivojlanmoqda. Biz ranglar, shrift uslublari va boshqalar uchun o'nlab o'zgaruvchilarni :rootistalgan joyda ishlatish uchun taqdim etamiz. Komponentlar va yordamchi dasturlarda CSS o'zgaruvchilari tegishli sinfga kiritilgan va ularni osongina o'zgartirish mumkin.
Yangi uslublarni yozish uchun har qanday global :rooto'zgaruvchilarimizdan foydalaning. CSS o'zgaruvchilari var(--bs-variableName)sintaksisdan foydalanadi va bolalar elementlari tomonidan meros qilib olinishi mumkin.
.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-ni o'zingiz yoqtirgan tarzda sozlash uchun global, komponent yoki yordamchi sinf o'zgaruvchilarini bekor qiling. Har bir qoidani qayta e'lon qilishning hojati yo'q, faqat yangi o'zgaruvchi qiymati.
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 da yangi, bizning yordamchi dasturlarimiz endi Utility API tomonidan yaratilgan . Biz uni tez va oson sozlanishi mumkin bo'lgan Sass xaritasi sifatida yaratdik. Har qanday yordam sinflarini qo'shish, olib tashlash yoki o'zgartirish hech qachon oson bo'lmagan. Utilitalarni sezgir qiling, psevdo-sinf variantlarini qo'shing va ularga maxsus nomlar bering.
Kommunal xizmatlar haqida ko'proq bilib oling Moslashtirilgan komponentlarni o'rganing
// 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,
)
)
);
Osonlik bilan almashtiriladigan yashirin elementlarni, modal va kanvasdan tashqari menyularni, popoverlar va maslahatlar va boshqa ko'p narsalarni jQuerysiz qo'shing. dataBootstrap-dagi JavaScript-da HTML-da birinchi bo'lib, plaginlarni qo'shish atributlar qo'shish kabi osondir . Ko'proq nazorat kerakmi? Shaxsiy plaginlarni dasturiy ravishda qo'shing.
Agar HTML yozishingiz mumkin bo'lsa, nima uchun ko'proq JavaScript yozish kerak? dataBootstrap’ning deyarli barcha JavaScript plaginlari atributlarni qo‘shish orqali JavaScript-dan foydalanish imkonini beruvchi birinchi darajali ma’lumotlar API’siga ega .
<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-ni modul sifatida va dasturiy API dan foydalanish haqida ko'proq bilib oling .
Bootstrap-da har qanday loyihaga kiritishingiz mumkin bo'lgan o'nlab plaginlar mavjud. Ularni bir vaqtning o'zida qo'ying yoki faqat keraklilarini tanlang.
Bootstrap Icons bu ochiq manbali SVG piktogramma kutubxonasi boʻlib, unda 1500 dan ortiq gliflar mavjud boʻlib, har bir nashrda qoʻshimchalar qoʻshiladi. Ular Bootstrap-dan foydalanasizmi yoki yo'qmi, har qanday loyihada ishlashga mo'ljallangan. Ulardan SVG yoki piktogramma shriftlari sifatida foydalaning — ikkala variant sizga vektor masshtabini va CSS orqali oson sozlash imkonini beradi.
Rasmiy Bootstrap Themes bozoridagi premium mavzular bilan Bootstrap-ni keyingi bosqichga olib chiqing . Mavzular Bootstrap-da yangi komponentlar va plaginlar, hujjatlar va kuchli qurish vositalariga boy kengaytirilgan ramkalar sifatida yaratilgan.
