كونتېينېر
كونتېينېرلار Bootstrap نىڭ ئاساسىي قۇرۇلۇش توپى بولۇپ ، ئۇ مەلۇم ئۈسكۈنى ياكى كۆرۈنۈش ئېغىزى ئىچىدىكى مەزمۇنلىرىڭىزنى ئۆز ئىچىگە ئالىدۇ.
ئۇلار قانداق ئىشلەيدۇ
كونتېينېرلار Bootstrap دىكى ئەڭ ئاساسلىق ئورۇنلاشتۇرۇش ئېلېمېنتى بولۇپ ، سۈكۈتتىكى تور سىستېمىمىزنى ئىشلەتكەندە تەلەپ قىلىنىدۇ . كونتېينېرلار ئىچىدىكى مەزمۇنلارنى ئۆز ئىچىگە ئېلىش ، چاپلاش ۋە (بەزىدە) مەركەز قىلىشقا ئىشلىتىلىدۇ. قاچىلارنى ئۇۋا قىلىشقا بولسىمۇ ، كۆپىنچە ئورۇنلاشتۇرۇشلار ئۇۋا قاچىلانغان قاچا تەلەپ قىلمايدۇ.
Bootstrap غا ئۈچ خىل ئوخشىمىغان قاچا قاچىلانغان:
.container،max-widthھەر بىر ئىنكاس قايتۇرۇش نۇقتىسىنى بەلگىلەيدۇ.container-fluid، بۇwidth: 100%بارلىق بۆسۈش نۇقتىلىرىدا.container-{breakpoint}بۇwidth: 100%بەلگىلەنگەن نۇقتىغا قەدەر
تۆۋەندىكى جەدۋەلدە ھەر بىر قاچىنىڭ max-widthئەسلى .containerۋە .container-fluidھەر بىر بۆسۈش نۇقتىسىدا قانداق سېلىشتۇرۇلغانلىقى كۆرسىتىلدى.
ئۇلارنى ھەرىكەتتە كۆرۈڭ ۋە بىزنىڭ Grid مىسالىمىزدا سېلىشتۇرۇڭ .
| قوشۇمچە كىچىك <576px |
كىچىك ≥576px |
ئوتتۇراھال ≥768px |
چوڭ ≥992px |
X-Large ≥1200px |
XX- چوڭ ≥1400px |
|
|---|---|---|---|---|---|---|
.container |
100% | 540px | 720px | 960px | 1140px | 1320px |
.container-sm |
100% | 540px | 720px | 960px | 1140px | 1320px |
.container-md |
100% | 100% | 720px | 960px | 1140px | 1320px |
.container-lg |
100% | 100% | 100% | 960px | 1140px | 1320px |
.container-xl |
100% | 100% | 100% | 100% | 1140px | 1320px |
.container-xxl |
100% | 100% | 100% | 100% | 100% | 1320px |
.container-fluid |
100% | 100% | 100% | 100% | 100% | 100% |
كۆڭۈلدىكى قاچا
سۈكۈتتىكى .containerسىنىپىمىز ئىنكاسچان ، مۇقىم كەڭلىكتىكى قاچا ، ئۇنىڭ max-widthھەر بىر بۆسۈش ئېغىزىدىكى ئۆزگىرىشىدىن دېرەك بېرىدۇ.
<div class="container">
<!-- Content here -->
</div>
مەسئۇلىيەتچان قاچىلار
مەسئۇلىيەتچان قاچىلار سىزنى بەلگىلەنگەن بۆسۈش ھاسىل قىلغۇچە% 100 كەڭلىكتىكى دەرسنى بەلگىلىيەلەيسىز ، ئۇنىڭدىن كېيىن بىز max-widthھەر بىر يۇقىرى نۇقتىغا s ئىلتىماس قىلىمىز. مەسىلەن ، بۆسۈش نۇقتىسىغا .container-smيەتمىگۈچە باشلاش% 100 كەڭلىكتە ، ئۇنىڭ بىلەن ، ۋە .smmdlgxlxxl
<div class="container-sm">100% wide until small breakpoint</div>
<div class="container-md">100% wide until medium breakpoint</div>
<div class="container-lg">100% wide until large breakpoint</div>
<div class="container-xl">100% wide until extra large breakpoint</div>
<div class="container-xxl">100% wide until extra extra large breakpoint</div>
سۇيۇق قاچىلار
پۈتۈن كەڭلىكتىكى قاچىغا ئىشلىتىڭ .container-fluid، كۆرۈش ئېغىزىنىڭ پۈتۈن كەڭلىكىنى ئۆز ئىچىگە ئالىدۇ.
<div class="container-fluid">
...
</div>
Sass
يۇقىرىدا كۆرسىتىلگەندەك ، Bootstrap سىز ئارزۇ قىلغان ئورۇنلاشتۇرۇشلارنى قۇرۇشقا ياردەم بېرىش ئۈچۈن ئالدىن بېكىتىلگەن قاچا دەرسلىرىنى ھاسىل قىلىدۇ. سىز ئالدىن بېكىتىلگەن قاچا سىنىپلىرىنى _variables.scssئۇلارغا ھوقۇق بېرىدىغان Sass خەرىتىسىنى ئۆزگەرتىش ئارقىلىق تەڭشىيەلەيسىز:
$container-max-widths: (
sm: 540px,
md: 720px,
lg: 960px,
xl: 1140px,
xxl: 1320px
);
Sass نى خاسلاشتۇرۇشتىن باشقا ، سىز يەنە Sass ئارىلاشمىسى ئارقىلىق قاچا-قۇچىلارنى قۇرالايسىز.
// Source mixin
@mixin make-container($padding-x: $container-padding-x) {
width: 100%;
padding-right: $padding-x;
padding-left: $padding-x;
margin-right: auto;
margin-left: auto;
}
// Usage
.custom-container {
@include make-container();
}
بىزنىڭ Sass خەرىتىسى ۋە ئۆزگەرگۈچى مىقدارنى قانداق ئۆزگەرتىش توغرىسىدىكى تېخىمۇ كۆپ ئۇچۇر ۋە مىساللار ئۈچۈن ، Grid ھۆججىتىنىڭ Sass بۆلىكىنى كۆرۈڭ .