Күчтүү, кеңейтилүүчү жана өзгөчөлүктөргө жык толгон алдыңкы куралдар топтому. 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";
Sass менен Bootstrap колдонуу жөнүндө көбүрөөк билип алыңыз .
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сиз кошуңуз. Bootstrap ичиндеги JavaScript биринчи HTML болуп саналат, демек, плагиндерди кошуу dataатрибуттарды кошуу сыяктуу оңой. Көбүрөөк көзөмөл керекпи? Программалык түрдө жеке плагиндерди кошуңуз.
HTML жаза турган болсоңуз, эмне үчүн көбүрөөк JavaScript жазыңыз? dataДээрлик бардык Bootstrap JavaScript плагиндеринде атрибуттарды кошуу менен JavaScriptти колдонууга мүмкүндүк берүүчү биринчи класстагы маалымат API бар.
<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>
Модулдар катары жана программалык API колдонуу менен биздин JavaScript жөнүндө көбүрөөк билип алыңыз .
Bootstrap сиз каалаган долбоорго түшүрө турган ондогон плагиндерди камтыйт. Аларды бир эле учурда таштаңыз же керектүүсүн гана тандаңыз.
Bootstrap Icons - бул 1500дөн ашык глифтерди камтыган ачык булактуу SVG сүрөтчөлөр китепканасы, ар бир чыгарылышта дагы көбүрөөк кошулат. Алар Bootstrapтин өзүн колдонсоңуз да, колдонбосоңуз да, каалаган долбоордо иштөө үчүн иштелип чыккан. Аларды SVG же сөлөкөт шрифттери катары колдонуңуз — эки вариант тең сизге вектордук масштабды жана CSS аркылуу оңой ыңгайлаштырууну берет.
Bootstrap'ти расмий Bootstrap Themes базарынын премиум темалары менен кийинки деңгээлге көтөрүңүз . Темалар Bootstrapте жаңы компоненттерге жана плагиндерге, документтерге жана күчтүү куруу куралдарына бай өздөрүнүн кеңейтилген алкактары катары курулган.
