Магутны, пашыраемы і шматфункцыянальны інтэрфейсны інструментар. Стварайце і наладжвайце з дапамогай Sass, выкарыстоўвайце загадзя ўбудаваную сеткавую сістэму і кампаненты і ўвасабляйце ў жыццё праекты з дапамогай магутных плагінаў JavaScript.
У цяперашні час v5.2.1 · Спампаваць · v4.6.x дакументы · Усе выпускі
Перайдзіце адразу да стварэння з дапамогай Bootstrap — выкарыстоўвайце CDN, усталюйце яго праз менеджэр пакетаў або загрузіце зыходны код.
Усталюйце зыходныя файлы Sass і JavaScript Bootstrap праз 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. JavaScript у Bootstrap у першую чаргу з'яўляецца HTML, што азначае, што дадаваць плагіны так жа проста, як і dataатрыбуты. Патрэбен большы кантроль? Праграмна ўключыце асобныя плагіны.
Навошта пісаць больш JavaScript, калі можна пісаць HTML? Амаль усе плагіны JavaScript ад Bootstrap маюць першакласны API дадзеных, які дазваляе выкарыстоўваць JavaScript, проста дадаючы dataатрыбуты.
<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 - гэта бібліятэка значкоў SVG з адкрытым зыходным кодам, якая змяшчае больш за 1500 гліфаў, з кожным выпускам дадаюцца новыя. Яны распрацаваны для працы ў любым праекце, незалежна ад таго, выкарыстоўваеце вы сам Bootstrap ці не. Выкарыстоўвайце іх як SVG або шрыфты значкоў — абодва варыянты даюць вам вектарнае маштабаванне і лёгкую наладу з дапамогай CSS.
Перанясіце Bootstrap на наступны ўзровень з прэміум-тэмамі з афіцыйнага рынку тэм Bootstrap . Тэмы пабудаваны на Bootstrap як уласныя пашыраныя фрэймворкі, багатыя новымі кампанентамі і ўбудовамі, дакументацыяй і магутнымі інструментамі зборкі.
