كۈچلۈك ، كېڭەيتكىلى بولىدىغان ۋە ئىقتىدار قاچىلانغان ئالدى قورال قوراللىرى. Sass بىلەن قۇرۇش ۋە خاسلاشتۇرۇش ، ئالدىن ياسالغان تور سىستېمىسى ۋە زاپچاسلىرىنى ئىشلىتىش ھەمدە كۈچلۈك JavaScript قىستۇرمىلىرى بىلەن تۈرلەرنى جانلاندۇرۇش.
ھازىر v5.2.1 · چۈشۈرۈش · v4.6.x docs · بارلىق تارقىتىلمىلار
Bootstrap ئارقىلىق بىناغا سەكرەپ كىرىڭ - CDN نى ئىشلىتىڭ ، بوغچا باشقۇرغۇچى ئارقىلىق قاچىلاڭ ياكى ئەسلى كودنى چۈشۈرۈڭ.
Bootstrap نىڭ مەنبە Sass ۋە JavaScript ھۆججىتىنى npm ، RubyGems ، كومپوزىتور ياكى Meteor ئارقىلىق قاچىلاڭ. بوغچا باشقۇرۇلىدىغان قاچىلاش ھۆججەتلىرى ياكى تولۇق قۇر ئورگىناللىرىمىزنى ئۆز ئىچىگە ئالمايدۇ. سىز يەنە npm قېلىپ ئامبىرىمىزنى ئىشلىتىپ ، npm ئارقىلىق تېز سۈرئەتتە Bootstrap تۈرىنى ھاسىل قىلالايسىز.
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 دە يېڭى ، بىزنىڭ ئەسلىھەلىرىمىز ھازىر بىزنىڭ API 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,
)
)
);
ئاسان يۆتكىگىلى بولىدىغان يوشۇرۇن ئېلېمېنتلار ، مودېللار ۋە offcanvas تىزىملىكى ، پوپايكا ۋە قورال قوراللىرى ۋە باشقىلارنى ئاسانلا قوشۇڭ - ھەممىسى jQuery يوق. Bootstrap دىكى JavaScript HTML بىرىنچى بولۇپ ، قىستۇرمىلارنى قوشۇش dataخاسلىق قوشقانغا ئوخشاش ئاسان دېگەنلىك. تېخىمۇ كۆپ كونترول قىلىش كېرەكمۇ؟ پروگرامما بويىچە ئايرىم قىستۇرمىلارنى ئۆز ئىچىگە ئالىدۇ.
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 دا ھەر قانداق تۈرگە تاشلىيالايدىغان ئون نەچچە قىستۇرما بار. ئۇلارنى بىراقلا تاشلاڭ ياكى لازىملىقلىرىنىلا تاللاڭ.
Bootstrap سىنبەلگىسى ئوچۇق كودلۇق SVG سىنبەلگىسى كۇتۇپخانىسى بولۇپ ، 1500 دىن ئارتۇق گىلىف بار ، ھەر بىر تارقىتىلغاندا تېخىمۇ كۆپ. ئۇلار Bootstrap نى ئىشلىتىڭ ياكى ئىشلەتمىسىڭىز ، ئۇلار ھەر قانداق تۈردە ئىشلەش ئۈچۈن لايىھەلەنگەن. ئۇلارنى SVGs ياكى سىنبەلگە خەت شەكلىدە ئىشلىتىڭ - ھەر ئىككى تاللاش سىزگە ۋېكتور كۆلىمىنى ۋە CSS ئارقىلىق ئاسان خاسلاشتۇرۇشنى بېرىدۇ.
Bootstrap نى رەسمىي Bootstrap باش تېما بازىرىدىكى ئالىي دەرىجىلىك باشتېمىلار بىلەن تېخىمۇ يۇقىرى پەللىگە كۆتۈرۈڭ . باشتېمىلار Bootstrap دا ئۆزىنىڭ كېڭەيتىلگەن رامكىسى سۈپىتىدە ياسالغان بولۇپ ، يېڭى زاپچاس ۋە قىستۇرمىلار ، ھۆججەتلەر ۋە كۈچلۈك قۇرۇلۇش قوراللىرى مول.
