Қуатты, кеңейтілетін және мүмкіндіктері бар алдыңғы құралдар жинағы. 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сіз оңай қосыңыз. dataBootstrap бағдарламасындағы JavaScript бірінші кезекте HTML болып табылады, яғни плагиндерді қосу атрибуттарды қосу сияқты оңай . Қосымша бақылау керек пе? Бағдарламалық түрде жеке плагиндерді қосыңыз.
HTML жаза алатын болсаңыз, неге көбірек JavaScript жазуыңыз керек? dataBootstrap 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 Themes нарығындағы премиум тақырыптармен Bootstrap қолданбасын келесі деңгейге көтеріңіз . Тақырыптар Bootstrap жүйесінде жаңа құрамдас бөліктер мен плагиндерге, құжаттамаға және қуатты құрастыру құралдарына бай жеке кеңейтілген фреймворктер ретінде жасалған.
