تور سىستېمىسى
كۈچلۈك كۆچمە بىرىنچى ئەۋرىشىم ئېلېكتر تورىدىن پايدىلىنىپ ، ئون ئىككى ئىستون سىستېمىسى ، بەش سۈكۈتتىكى ئىنكاس قايتۇرۇش دەرىجىسى ، Sass ئۆزگەرگۈچى مىقدار ۋە ئارىلاشمىلار ۋە ئالدىن بېكىتىلگەن ئون نەچچە سىنىپنىڭ ياردىمىدە ھەر خىل شەكىلدىكى چوڭ-كىچىكلىكلەرنى ئورۇنلاشتۇرۇڭ.
قانداق ئىشلەيدۇ
Bootstrap نىڭ تور سىستېمىسى بىر قاتار قاچا ، قۇر ۋە ستونلارنى ئىشلىتىپ مەزمۇننى ئورۇنلاشتۇرىدۇ ۋە ماسلاشتۇرىدۇ. ئۇ flexbox بىلەن ياسالغان بولۇپ ، تولۇق ئىنكاس قايتۇرىدۇ. تۆۋەندە تورنىڭ قانداق بىر يەرگە كېلىدىغانلىقىغا بىر مىسال ۋە چوڭقۇر نەزەر.
Flexbox غا يېڭىمۇ ياكى ناتونۇشمۇ؟ تەگلىك ، تېرمىنولوگىيە ، كۆرسەتمە ۋە كود پارچىلىرى ئۈچۈن بۇ CSS Tricks ئەۋرىشىم قوللانمىسىنى ئوقۇڭ .
<div class="container">
<div class="row">
<div class="col-sm">
One of three columns
</div>
<div class="col-sm">
One of three columns
</div>
<div class="col-sm">
One of three columns
</div>
</div>
</div>
يۇقارقى مىسال بىزنىڭ ئالدىن بېكىتىلگەن تور سىنىپىمىز ئارقىلىق كىچىك ، ئوتتۇرا ، چوڭ ۋە قوشۇمچە چوڭ ئۈسكۈنىلەردە ئۈچ كەڭلىكتىكى ئىستون ھاسىل قىلىدۇ. ئۇ ئىستونلار ئاتا-ئانىلار بىلەن بەتنى مەركەز قىلغان .container
.
ئۇنى پارچىلاش ، ئۇنىڭ قانداق ئىشلەيدىغانلىقى:
- كونتېينېرلار تور بېتىڭىزنىڭ مەزمۇنىنى توغرىلاش ۋە توغرىسىغا توغرىلاش ۋاستىسى بىلەن تەمىنلەيدۇ.
.container
ئىنكاسچان پېكسىل كەڭلىكى ياكى بارلىق كۆرۈنۈش ۋە ئۈسكۈنىلەرنىڭ چوڭ-كىچىكلىكى.container-fluid
ئۈچۈن ئىشلىتىڭ .width: 100%
- قۇرلار ستون ئۈچۈن ئورالغان. ھەر بىر ئىستوننىڭ
padding
ئارىسىدىكى بوشلۇقنى كونترول قىلىش ئۈچۈن توغرىسىغا (ئۆستەڭ دېيىلىدۇ) بار.padding
ئاندىن كېيىن مەنپىي پەرقى بىلەن قۇرلارغا قارشى تۇرىدۇ . بۇنداق بولغاندا ، ستوندىكى بارلىق مەزمۇنلار كۆرۈنۈشتە سول تەرەپكە توغرىلىنىدۇ. - كاتەكچە ئورۇنلاشتۇرۇشىدا مەزمۇن چوقۇم ستون ئىچىگە قويۇلۇشى كېرەك ، پەقەت ستونلارلا قۇرلارنىڭ بالىلىرى بولۇشى مۇمكىن.
- ئەۋرىشىم ساندۇققا رەھمەت ، بەلگىلەنگەن كاتەكچە ستونلار
width
ئوخشاش كەڭلىكتىكى ئىستون سۈپىتىدە ئاپتوماتىك ئورۇنلاشتۇرۇلىدۇ. مەسىلەن ، تۆت خىل.col-sm
ئەھۋالنىڭ ھەر بىرى كىچىك بۆلەكتىن يۇقىرىغا ئاپتوماتىك ھالدا% 25 بولىدۇ. تېخىمۇ كۆپ مىساللار ئۈچۈن ئاپتوماتىك ئورۇنلاشتۇرۇش ئىستون بۆلىكىنى كۆرۈڭ . - ستون سىنىپلىرى سىز ئىشلەتمەكچى بولغان ئىستون سانىنى كۆرسىتىدۇ. شۇڭا ، ئەگەر ئوخشاش كەڭلىكتىكى ئۈچ ئىستوننى ئىشلەتمەكچى بولسىڭىز ، ئىشلەتسىڭىز بولىدۇ
.col-4
. - ستون
width
s پىرسەنتكە تەڭشەلگەن ، شۇڭا ئۇلار ئاتا-ئانىسىغا سېلىشتۇرغاندا ھەمىشە سۇيۇقلۇق ۋە چوڭلۇقتا بولىدۇ. - ستونلارنىڭ توغرىسىغا توغرىسىغا ئايرىم ئىستونلار ئوتتۇرىسىدا ئۆستەڭ ھاسىل بولىدۇ ، ئەمما ، سىز قۇر ۋە قۇردىكى ئىستونلارنى
padding
ئۆچۈرەلەيسىز .margin
padding
.no-gutters
.row
- كاتەكچە ئىنكاس قايتۇرۇش ئۈچۈن ، بەش تور ئۈزۈش نۇقتىسى بار ، ھەر بىر ئىنكاس قايتۇرۇش نۇقتىسىدىن بىرى : بارلىق بۆسۈش نۇقتىلىرى (قوشۇمچە كىچىك) ، كىچىك ، ئوتتۇرا ، چوڭ ۋە قوشۇمچە چوڭ.
- كاتەكچە بۆسۈش ئېغىزى ئەڭ تۆۋەن كەڭلىكتىكى مېدىيا سوئاللىرىنى ئاساس قىلىدۇ ، يەنى ئۇلار بۇ بىر بۆسۈش ئېغىزى ۋە ئۇنىڭ ئۈستىدىكى بارلىق نەرسىلەرگە ماس كېلىدۇ (مەسىلەن ،
.col-sm-4
كىچىك ، ئوتتۇرا ، چوڭ ۋە قوشۇمچە چوڭ ئۈسكۈنىلەرگە ماس كېلىدۇ ، ئەمما بىرىنچىxs
بۆسۈش ئەمەس). - تېخىمۇ كۆپ مەنىلىك بەلگە ئۈچۈن ئالدىن بېكىتىلگەن تور سىنىپى (مەسىلەن
.col-4
) ياكى Sass ئارىلاشمىسىنى ئىشلىتەلەيسىز.
ئەۋرىشىم ساندۇق ئەتراپىدىكى چەكلىمىلەر ۋە كەمتۈكلۈكلەرگە دىققەت قىلىڭ ، مەسىلەن بەزى HTML ئېلېمېنتلىرىنى ئەۋرىشىم قاچا قىلىپ ئىشلىتەلمەسلىك .
كاتەكچە تاللاش
Bootstrap كۆپىنچە چوڭ-كىچىكلىكىنى ئېنىقلاش ئۈچۈن em
s ياكى s نى ئىشلەتسە ، s تور ئېغىزى ۋە قاچا كەڭلىكى ئۈچۈن ئىشلىتىلىدۇ. چۈنكى كۆرۈش ئېغىزىنىڭ كەڭلىكى پېكسىل بولۇپ ، خەت چوڭلۇقى بىلەن ئۆزگەرمەيدۇ .rem
px
Bootstrap تورى سىستېمىسىنىڭ بىر قانچە قولايلىق ئۈستەل بىلەن نۇرغۇن ئۈسكۈنىلەردە قانداق ئىشلەيدىغانلىقىنى كۆرۈڭ.
قوشۇمچە كىچىك <576px |
كىچىك ≥576px |
ئوتتۇراھال ≥768px |
چوڭ ≥992px |
قوشۇمچە چوڭ ≥1200px |
|
---|---|---|---|---|---|
قاچىنىڭ كەڭلىكى | None (auto) | 540px | 720px | 960px | 1140px |
سىنىپ ئالدى قوشۇلغۇچىسى | .col- |
.col-sm- |
.col-md- |
.col-lg- |
.col-xl- |
# ئىستون | 12 | ||||
كەڭلىك كەڭلىكى | 30px (بىر ئىستوننىڭ ئىككى تەرىپىدە 15px) | ||||
Nestable | ھەئە | ||||
ستون زاكاز قىلىش | ھەئە |
ئاپتوماتىك ئورۇنلاشتۇرۇش ستونلىرى
ئېنىق نومۇر تۈرىگە ئوخشاش ئاسان ئىستون چوڭلۇقى ئۈچۈن بۆسۈش خاراكتېرلىك ستون دەرسلىكىدىن پايدىلىنىڭ .col-sm-6
.
كەڭلىكى تەڭ
مەسىلەن ، بۇ يەردە ھەر بىر ئۈسكۈنى ۋە كۆرۈنۈش ئېغىزىغا ماس كېلىدىغان ئىككى خىل تور ئورۇنلاشتۇرۇشى xs
بار xl
. سىز ئېھتىياجلىق بولغان ھەر بىر بۆسۈش ئېغىزىغا بىر قانچە سانسىز سىنىپ قوشۇڭ ، ھەر بىر ئىستون ئوخشاش كەڭلىكتە بولىدۇ.
<div class="container">
<div class="row">
<div class="col">
1 of 2
</div>
<div class="col">
2 of 2
</div>
</div>
<div class="row">
<div class="col">
1 of 3
</div>
<div class="col">
2 of 3
</div>
<div class="col">
3 of 3
</div>
</div>
</div>
ئوخشاش كەڭلىكتىكى كۆپ لىنىيىلىك
ئوخشاش كەڭلىكتىكى ئىستون قۇرۇڭ ، .w-100
بۇ ئىستونلارنىڭ يېڭى قۇرغا بۆلىنىشىنى خالىغان ئورۇنغا قىستۇرۇپ. .w-100
بەزى ئىنكاسچان كۆرسىتىش قوراللىرى بىلەن ئارىلاشتۇرۇپ ئارام ئېلىشنى ئىنكاسچان قىلىڭ .
بۇ يەردە Safari flexbox خاتالىقىflex-basis
بار بولۇپ ، بۇنى ئېنىق ياكى ئېنىق ئىشلىمەيتتى border
. كونا توركۆرگۈ نۇسخىلىرىنىڭ خىزمەت چارىلىرى بار ، ئەمما نىشانلىق توركۆرگۈڭىز كەمتۈك نەشرىگە كىرمىسە ، ئۇلار لازىم ئەمەس.
<div class="container">
<div class="row">
<div class="col">col</div>
<div class="col">col</div>
<div class="w-100"></div>
<div class="col">col</div>
<div class="col">col</div>
</div>
</div>
بىر ئىستون كەڭلىكىنى تەڭشەش
ئەۋرىشىم كاتەكچە ستوننىڭ ئاپتوماتىك ئورۇنلاشتۇرۇلۇشى يەنە بىر ئىستوننىڭ كەڭلىكىنى تەڭشىيەلەيدىغانلىقىڭىزنى ۋە ئاكا-ئۇكا ئىستونلارنىڭ ئاپتوماتىك چوڭلۇقىنى تەڭشىيەلەيدىغانلىقىڭىزنى بىلدۈرىدۇ. سىز ئالدىن بېكىتىلگەن تور سىنىپى (تۆۋەندە كۆرسىتىلگەندەك) ، كاتەكچە ئارىلاشما ياكى سىزىق كەڭلىكىنى ئىشلىتەلەيسىز. شۇنىڭغا دىققەت قىلىڭكى ، باشقا ئىستونلارنىڭ مەركىزى ئىستوننىڭ كەڭلىكى قانداق بولۇشىدىن قەتئىينەزەر چوڭ-كىچىكلىكى چوڭ بولىدۇ.
<div class="container">
<div class="row">
<div class="col">
1 of 3
</div>
<div class="col-6">
2 of 3 (wider)
</div>
<div class="col">
3 of 3
</div>
</div>
<div class="row">
<div class="col">
1 of 3
</div>
<div class="col-5">
2 of 3 (wider)
</div>
<div class="col">
3 of 3
</div>
</div>
</div>
ئۆزگىرىشچان كەڭلىك مەزمۇنى
col-{breakpoint}-auto
دەرسلەرنىڭ مەزمۇنىنىڭ تەبىئىي كەڭلىكىگە ئاساسەن چوڭلۇقتىكى ئىستونلارنى ئىشلىتىڭ .
<div class="container">
<div class="row justify-content-md-center">
<div class="col col-lg-2">
1 of 3
</div>
<div class="col-md-auto">
Variable width content
</div>
<div class="col col-lg-2">
3 of 3
</div>
</div>
<div class="row">
<div class="col">
1 of 3
</div>
<div class="col-md-auto">
Variable width content
</div>
<div class="col col-lg-2">
3 of 3
</div>
</div>
</div>
مەسئۇلىيەتچان دەرسلەر
Bootstrap تورى مۇرەككەپ ئىنكاس لايىھىسى قۇرۇش ئۈچۈن ئالدىن بېكىتىلگەن بەش قاتلامنى ئۆز ئىچىگە ئالىدۇ. ئىستونلىرىڭىزنىڭ چوڭ-كىچىكلىكىنى كىچىك ، كىچىك ، ئوتتۇرا ، چوڭ ياكى قوشۇمچە چوڭ ئۈسكۈنىلەرگە ماسلاشتۇرۇڭ.
بارلىق بۆسۈش نۇقتىلىرى
كىچىك ئۈسكۈنىلەردىن تارتىپ چوڭلارغىچە ئوخشاش بولغان تورلارغا نىسبەتەن ، دەرس .col
ۋە .col-*
دەرسلەرنى ئىشلىتىڭ. ئالاھىدە چوڭلۇقتىكى ئىستونغا ئېھتىياجلىق بولغاندا نومۇر قويۇلغان سىنىپنى بەلگىلەڭ. بولمىسا ، چىڭ تۇرۇڭ .col
.
<div class="container">
<div class="row">
<div class="col">col</div>
<div class="col">col</div>
<div class="col">col</div>
<div class="col">col</div>
</div>
<div class="row">
<div class="col-8">col-8</div>
<div class="col-4">col-4</div>
</div>
</div>
توغرىسىغا توغرىلانغان
بىر يۈرۈش .col-sm-*
دەرسلەرنى ئىشلىتىپ ، ئاساسىي تور تورىنى قۇرالايسىز ھەمدە كىچىك بۆسۈش ئېغىزىدا توغرىسىغا ئايلىنىدۇ sm
.
<div class="container">
<div class="row">
<div class="col-sm-8">col-sm-8</div>
<div class="col-sm-4">col-sm-4</div>
</div>
<div class="row">
<div class="col-sm">col-sm</div>
<div class="col-sm">col-sm</div>
<div class="col-sm">col-sm</div>
</div>
</div>
ئارىلاش ۋە ماسلاشتۇرۇش
ستونلىرىڭىزنىڭ بەزى تور قاتلاملىرىغا تىزىپ قويۇشىنى خالامسىز؟ ئېھتىياجغا ئاساسەن ھەر بىر قاتلامغا ئوخشىمىغان سىنىپلارنىڭ بىرىكمىسىنى ئىشلىتىڭ. ئۇنىڭ قانداق ئىشلەيدىغانلىقىنى تېخىمۇ ياخشى چۈشىنىش ئۈچۈن تۆۋەندىكى مىسالغا قاراڭ.
<div class="container">
<!-- Stack the columns on mobile by making one full-width and the other half-width -->
<div class="row">
<div class="col-md-8">.col-md-8</div>
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>
<!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
<div class="row">
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>
<!-- Columns are always 50% wide, on mobile and desktop -->
<div class="row">
<div class="col-6">.col-6</div>
<div class="col-6">.col-6</div>
</div>
</div>
Gutters
غول لىنىيەلەرنى بۆسۈش خاراكتېرلىك ئالاھىدە تاختا ۋە مەنپىي پايدا نىسبىتى سىنىپى ئارقىلىق ئىنكاس قايتۇرغىلى بولىدۇ. مەلۇم بىر قۇردىكى ئۆستەڭنى ئۆزگەرتىش ئۈچۈن ، s دىكى سەلبىي گىرۋەكنى ئىشلىتىش .row
ۋە .col
s دىكى ماسلاشتۇرۇش تاختىسىنى ماسلاشتۇرۇش. قايتا - قايتا ماسلاشتۇرۇلغان تاختا ئىشلىتىش ئارقىلىق ، .container
ياكى ئاتا-ئانىلارمۇ تەڭشەشكە ئېھتىياجلىق بولۇشى مۇمكىن..container-fluid
بۇ يەردە چوڭ ( lg
) بۆسۈش ئېغىزى ۋە ئۈستىدىكى Bootstrap تورىنى خاسلاشتۇرۇشنىڭ بىر مىسالى بار. بىز تاختاينى كۆپەيتتۇق ، بۇنىڭغا ئاتا-ئانىلار .col
بىلەن .px-lg-5
تاقابىل تۇردۇق ، ئاندىن ئورالمىنى تەڭشىدۇق ..mx-lg-n5
.row
.container
.px-lg-5
<div class="container px-lg-5">
<div class="row mx-lg-n5">
<div class="col py-3 px-lg-5 border bg-light">Custom column padding</div>
<div class="col py-3 px-lg-5 border bg-light">Custom column padding</div>
</div>
</div>
قۇر ئىستون
ئىنكاسچان .row-cols-*
دەرسلەرنى ئىشلىتىپ ، مەزمۇن ۋە ئورۇنلاشتۇرۇشىڭىزنى ئەڭ ياخشى تەمىنلەيدىغان ئىستون سانىنى تېز بەلگىلەڭ. نورمال .col-*
دەرسلەر ئايرىم ئىستونلارغا (مەسىلەن ، .col-md-4
) قوللىنىلسا ، قۇر ئىستون دەرسلىرى ئاتا-ئانىغا .row
تېزلەتمە قىلىپ بېكىتىلىدۇ.
بۇ قۇر ئىستون دەرسلىرىنى ئىشلىتىپ ئاساسىي تور ئورۇنلاشتۇرۇشىنى تېزدىن ھاسىل قىلىڭ ياكى كارتا ئورۇنلاشتۇرۇشىڭىزنى كونترول قىلىڭ.
<div class="container">
<div class="row row-cols-2">
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
</div>
</div>
<div class="container">
<div class="row row-cols-3">
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
</div>
</div>
<div class="container">
<div class="row row-cols-4">
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
</div>
</div>
<div class="container">
<div class="row row-cols-4">
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col-6">Column</div>
<div class="col">Column</div>
</div>
</div>
<div class="container">
<div class="row row-cols-1 row-cols-sm-2 row-cols-md-4">
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
</div>
</div>
قوشۇمچە ساس ئارىلاشمىسىنى ئىشلەتسىڭىزمۇ بولىدۇ row-cols()
:
.element {
// Three columns to start
@include row-cols(3);
// Five columns from medium breakpoint up
@include media-breakpoint-up(md) {
@include row-cols(5);
}
}
توغرىلاش
تۈۋرۈكنى توغرىلاش ۋە توغرىسىغا توغرىلاش ئۈچۈن flexbox توغرىلاش قوراللىرىنى ئىشلىتىڭ. Internet Explorer 10-11 ئەۋرىشىم قاچىنىڭ تۆۋەندە كۆرسىتىلگەندەك ئەۋرىشىم تۈرلەرنىڭ تىك توغرىلىنىشىنى قوللىمايدۇ . min-height
تېخىمۇ كۆپ تەپسىلاتلارنى Flexbugs # 3 دىن كۆرۈڭ.
تىك توغرىلاش
<div class="container">
<div class="row align-items-start">
<div class="col">
One of three columns
</div>
<div class="col">
One of three columns
</div>
<div class="col">
One of three columns
</div>
</div>
<div class="row align-items-center">
<div class="col">
One of three columns
</div>
<div class="col">
One of three columns
</div>
<div class="col">
One of three columns
</div>
</div>
<div class="row align-items-end">
<div class="col">
One of three columns
</div>
<div class="col">
One of three columns
</div>
<div class="col">
One of three columns
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col align-self-start">
One of three columns
</div>
<div class="col align-self-center">
One of three columns
</div>
<div class="col align-self-end">
One of three columns
</div>
</div>
</div>
توغرىسىغا توغرىلاش
<div class="container">
<div class="row justify-content-start">
<div class="col-4">
One of two columns
</div>
<div class="col-4">
One of two columns
</div>
</div>
<div class="row justify-content-center">
<div class="col-4">
One of two columns
</div>
<div class="col-4">
One of two columns
</div>
</div>
<div class="row justify-content-end">
<div class="col-4">
One of two columns
</div>
<div class="col-4">
One of two columns
</div>
</div>
<div class="row justify-content-around">
<div class="col-4">
One of two columns
</div>
<div class="col-4">
One of two columns
</div>
</div>
<div class="row justify-content-between">
<div class="col-4">
One of two columns
</div>
<div class="col-4">
One of two columns
</div>
</div>
</div>
ئۆستەڭ يوق
ئالدىن بېكىتىلگەن تور دەرسلىكىمىزدىكى تۈۋرۈكلەر ئارىسىدىكى ئۆستەڭلەرنى ئېلىۋەتكىلى بولىدۇ .no-gutters
. بۇ بارلىق بالىلار ئىستونلىرىدىكى مەنپىي margin
s .row
ۋە گورىزونتالنى چىقىرىپ تاشلايدۇ.padding
بۇ ئۇسلۇبلارنى قۇرۇشنىڭ ئەسلى كودى. شۇنىڭغا دىققەت قىلىڭكى ، ئىستون قاپلىمىسى پەقەت تۇنجى بالىلار ئىستونىغا توغرىلانغان بولۇپ ، خاسلىق تاللىغۇچ ئارقىلىق نىشانلىنىدۇ . گەرچە بۇ تېخىمۇ ئېنىق تاللىغۇچ ھاسىل قىلسىمۇ ، ئەمما بوشلۇق ئەسلىھەلىرى بىلەن ئىستون تاختىسىنى يەنىلا خاسلاشتۇرغىلى بولىدۇ .
قىرغاقتىن لايىھىلەش كېرەكمۇ؟ ئاتا-ئانىسىنى تاشلاڭ .container
ياكى .container-fluid
.
.no-gutters {
margin-right: 0;
margin-left: 0;
> .col,
> [class*="col-"] {
padding-right: 0;
padding-left: 0;
}
}
ئەمەلىيەتتە ، ئۇ قانداق كۆرۈنىدۇ. شۇنىڭغا دىققەت قىلىڭكى ، سىز باشقا ئالدىن بېكىتىلگەن تور سىنىپلىرى بىلەن داۋاملىق ئىشلىتەلەيسىز (ستون كەڭلىكى ، ئىنكاس دەرىجىسى ، رەت تەرتىپى ۋە باشقىلارنى ئۆز ئىچىگە ئالىدۇ).
<div class="row no-gutters">
<div class="col-sm-6 col-md-8">.col-sm-6 .col-md-8</div>
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>
تۈۋرۈك ئوراش
ئەگەر بىر قۇرغا 12 دىن ئارتۇق ئىستون قويۇلسا ، ھەر بىر گۇرۇپپا قوشۇمچە ئىستونلار بىر گەۋدە سۈپىتىدە يېڭى قۇرغا ئورۇلىدۇ.
9 + 4 = 13> 12 دىن باشلاپ ، بۇ 4 ئىستون كەڭلىكتىكى div بىر تۇتاش ئورۇن سۈپىتىدە يېڭى قۇرغا ئورالغان.
كېيىنكى ئىستونلار يېڭى لىنىيىدە داۋاملاشتى.
<div class="container">
<div class="row">
<div class="col-9">.col-9</div>
<div class="col-4">.col-4<br>Since 9 + 4 = 13 > 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.</div>
<div class="col-6">.col-6<br>Subsequent columns continue along the new line.</div>
</div>
</div>
ستون بۇزۇلدى
Flexbox دىكى يېڭى قۇرغا ئىستونلارنى پارچىلاش كىچىك خاككېرنى تەلەپ قىلىدۇ: width: 100%
ئىستونلىرىڭىزنى يېڭى قۇرغا چاپلىماقچى بولغان ئورۇنغا ئېلېمېنت قوشۇڭ. ئادەتتە بۇ بىر نەچچە .row
s بىلەن ئەمەلگە ئاشىدۇ ، ئەمما ھەر بىر يولغا قويۇش ئۇسۇلى بۇنىڭ ھېسابىنى بېرەلمەيدۇ.
<div class="container">
<div class="row">
<div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
<div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
<!-- Force next columns to break to new line -->
<div class="w-100"></div>
<div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
<div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
</div>
</div>
سىز بۇ بۆسۈشنى بىزنىڭ ئىنكاسچان كۆرسىتىش قوراللىرىمىز بىلەن ئالاھىدە بۆسۈش نۇقتىلىرىدا قوللانسىڭىز بولىدۇ .
<div class="container">
<div class="row">
<div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
<div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
<!-- Force next columns to break to new line at md breakpoint and up -->
<div class="w-100 d-none d-md-block"></div>
<div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
<div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
</div>
</div>
Reordering
دەرسلەرنى زاكاز قىلىڭ
مەزمۇنلىرىڭىزنى كۆرۈش تەرتىپىنى.order-
كونترول قىلىش ئۈچۈن دەرسلەرنى ئىشلىتىڭ . بۇ دەرسلەر ئىنكاسى كۈچلۈك ، شۇڭا بۆسۈش نۇقتىسى ئارقىلىق تەڭشىيەلەيسىز (مەسىلەن ، ). بەش تورنىڭ ھەممىسىدە قوللاشنى ئۆز ئىچىگە ئالىدۇ .order
.order-1.order-md-2
1
12
<div class="container">
<div class="row">
<div class="col">
First in DOM, no order applied
</div>
<div class="col order-12">
Second in DOM, with a larger order
</div>
<div class="col order-1">
Third in DOM, with an order of 1
</div>
</div>
</div>
ئىلتىماس قىلىش ۋە ( ) ئارقىلىق ئېلېمېنتنىڭ ئۆزگىرىشىنى ئۆزگەرتىدىغان ئىنكاسچان .order-first
ۋە .order-last
دەرسلەرمۇ بار . بۇ دەرسلەرنى ئېھتىياجغا ئاساسەن نومۇر قويۇلغان دەرسلەر بىلەن ئارىلاشتۇرغىلى بولىدۇ .order
order: -1
order: 13
order: $columns + 1
.order-*
<div class="container">
<div class="row">
<div class="col order-last">
First in DOM, ordered last
</div>
<div class="col">
Second in DOM, unordered
</div>
<div class="col order-first">
Third in DOM, ordered first
</div>
</div>
</div>
ستونلارنى ئۆچۈرۈش
سىز كاتەكچە ئىستوننى ئىككى خىل ئۇسۇلدا ئۆچۈرەلەيسىز: بىزنىڭ ئىنكاسچان .offset-
تور سىنىپىمىز ۋە بىزنىڭ ئەۋزەللىكىمىز . كاتەكچە سىنىپلار چوڭلۇقتىكى ئىستونلارغا ماس كېلىدۇ ، ھالبۇكى گىرۋەكنىڭ كەڭلىكى ئۆزگىرىشچان بولغان تېز ئورۇنلاشتۇرۇشقا تېخىمۇ پايدىلىق.
دەرسلەرنى ئۆچۈرۈڭ
.offset-md-*
دەرسلەرنى ئىشلىتىپ ئىستوننى ئوڭغا يۆتكەڭ . بۇ دەرسلەر ئىستوننىڭ سول گىرۋىكىنى ئىستون ئارقىلىق ئۆستۈرىدۇ *
. مەسىلەن ، تۆت ئىستوندىن .offset-md-4
يۆتكىلىدۇ ..col-md-4
<div class="container">
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4 offset-md-4">.col-md-4 .offset-md-4</div>
</div>
<div class="row">
<div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
<div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
</div>
<div class="row">
<div class="col-md-6 offset-md-3">.col-md-6 .offset-md-3</div>
</div>
</div>
ئىنكاس قايتۇرۇش نۇقتىلىرىدا ستون تازىلاشتىن باشقا ، تور بېكەتنى قايتا ئورنىتىشىڭىز لازىم بولۇشى مۇمكىن. توردىكى مىسالدا بۇنى كۆرۈڭ .
<div class="container">
<div class="row">
<div class="col-sm-5 col-md-6">.col-sm-5 .col-md-6</div>
<div class="col-sm-5 offset-sm-2 col-md-6 offset-md-0">.col-sm-5 .offset-sm-2 .col-md-6 .offset-md-0</div>
</div>
<div class="row">
<div class="col-sm-6 col-md-5 col-lg-6">.col-sm-6 .col-md-5 .col-lg-6</div>
<div class="col-sm-6 col-md-5 offset-md-2 col-lg-6 offset-lg-0">.col-sm-6 .col-md-5 .offset-md-2 .col-lg-6 .offset-lg-0</div>
</div>
</div>
Margin utilities
V4 دىكى flexbox غا يۆتكىلىش ئارقىلىق ، .mr-auto
ئاكا-ئۇكا ئىستونلارنى بىر-بىرىدىن يىراقلاشتۇرۇشقا ئوخشاش ئەۋزەللىكلەرنى ئىشلىتەلەيسىز.
<div class="container">
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4 ml-auto">.col-md-4 .ml-auto</div>
</div>
<div class="row">
<div class="col-md-3 ml-md-auto">.col-md-3 .ml-md-auto</div>
<div class="col-md-3 ml-md-auto">.col-md-3 .ml-md-auto</div>
</div>
<div class="row">
<div class="col-auto mr-auto">.col-auto .mr-auto</div>
<div class="col-auto">.col-auto</div>
</div>
</div>
Nesting
سۈكۈتتىكى تور بىلەن مەزمۇنلىرىڭىزنى ئۇۋىلاش ئۈچۈن ، بار بولغان ئىستونغا يېڭى .row
ۋە بىر قاتار ستون قوشۇڭ . ئۇلانغان قۇرلار 12 ياكى ئۇنىڭدىن تۆۋەن بولغان بىر قاتار ئىستونلارنى ئۆز ئىچىگە ئېلىشى كېرەك (ئىشلەتكىلى بولىدىغان 12 ئىستوننىڭ ھەممىسىنى ئىشلىتىشىڭىز تەلەپ قىلىنمايدۇ)..col-sm-*
.col-sm-*
<div class="container">
<div class="row">
<div class="col-sm-9">
Level 1: .col-sm-9
<div class="row">
<div class="col-8 col-sm-6">
Level 2: .col-8 .col-sm-6
</div>
<div class="col-4 col-sm-6">
Level 2: .col-4 .col-sm-6
</div>
</div>
</div>
</div>
</div>
Sass mixins
Bootstrap نىڭ مەنبە Sass ھۆججىتىنى ئىشلەتكەندە ، Sass ئۆزگەرگۈچى مىقدار ۋە ئارىلاشمىلارنى ئىشلىتىپ ئىختىيارى ، مەنىلىك ۋە ئىنكاسچان بەت ئورۇنلاشتۇرۇشىنى تاللىيالايسىز. بىزنىڭ ئالدىن بېكىتىلگەن تور سىنىپىمىز ئوخشاش ئۆزگەرگۈچى مىقدار ۋە ئارىلاشمىلارنى ئىشلىتىپ ، تېز ئىنكاس قايتۇرۇش لايىھىسى ئۈچۈن ئىشلىتىشكە بولىدىغان بىر يۈرۈش دەرسلەرنى تەمىنلەيدۇ.
ئۆزگەرگۈچى مىقدار
ئۆزگەرگۈچى مىقدار ۋە خەرىتە تۈۋرۈك سانى ، ئۆستەڭ كەڭلىكى ۋە لەيلىمە ئىستوننى باشلايدىغان مېدىيا سوئال نۇقتىسىنى بەلگىلەيدۇ. بىز بۇلارنى يۇقىرىدا خاتىرىلەنگەن ئالدىن بېكىتىلگەن تور سىنىپى ، شۇنداقلا تۆۋەندە كۆرسىتىلگەن ئىختىيارى ئارىلاشمىلار ئۈچۈن ھاسىل قىلىمىز.
$grid-columns: 12;
$grid-gutter-width: 30px;
$grid-breakpoints: (
// Extra small screen / phone
xs: 0,
// Small screen / phone
sm: 576px,
// Medium screen / tablet
md: 768px,
// Large screen / desktop
lg: 992px,
// Extra large screen / wide desktop
xl: 1200px
);
$container-max-widths: (
sm: 540px,
md: 720px,
lg: 960px,
xl: 1140px
);
Mixins
ئارىلاشما كاتەكچە ئۆزگەرگۈچى مىقدارلار بىلەن بىرلەشتۈرۈپ ، يەككە كاتەكچە ستون ئۈچۈن مەنىلىك CSS ھاسىل قىلىدۇ.
// Creates a wrapper for a series of columns
@include make-row();
// Make the element grid-ready (applying everything but the width)
@include make-col-ready();
@include make-col($size, $columns: $grid-columns);
// Get fancy by offsetting, or changing the sort order
@include make-col-offset($size, $columns: $grid-columns);
مىسال ئىشلىتىش
ئۆزگەرگۈچى مىقدارنى ئۆزىڭىزنىڭ خاس قىممىتىگە ئۆزگەرتەلەيسىز ياكى ئارىلاشما قىممەتنى ئۇلارنىڭ كۆڭۈلدىكى قىممىتى بىلەن ئىشلىتەلەيسىز. بۇ يەردە سۈكۈتتىكى تەڭشەكلەرنى ئىشلىتىپ ئىككى ئىستون ئورۇنلاشتۇرۇشنى ھاسىل قىلىدىغان مىسال بار.
.example-container {
@include make-container();
// Make sure to define this width after the mixin to override
// `width: 100%` generated by `make-container()`
width: 800px;
}
.example-row {
@include make-row();
}
.example-content-main {
@include make-col-ready();
@include media-breakpoint-up(sm) {
@include make-col(6);
}
@include media-breakpoint-up(lg) {
@include make-col(8);
}
}
.example-content-secondary {
@include make-col-ready();
@include media-breakpoint-up(sm) {
@include make-col(6);
}
@include media-breakpoint-up(lg) {
@include make-col(4);
}
}
<div class="example-container">
<div class="example-row">
<div class="example-content-main">Main content</div>
<div class="example-content-secondary">Secondary content</div>
</div>
</div>
تورنى خاسلاشتۇرۇش
ئىچىگە ئورۇنلاشتۇرۇلغان تور Sass ئۆزگەرگۈچى مىقدار ۋە خەرىتىمىزنى ئىشلىتىپ ، ئالدىن بېكىتىلگەن تور سىنىپىنى پۈتۈنلەي خاسلاشتۇرغىلى بولىدۇ. قاتلام سانى ، مېدىيا سوئال ئۆلچىمى ۋە قاچىنىڭ كەڭلىكىنى ئۆزگەرتىڭ ، ئاندىن قايتا ھاسىل قىلىڭ.
تۈۋرۈك ۋە ئۆستەڭ
كاتەكچە ستون سانىنى Sass ئۆزگەرگۈچى مىقدار ئارقىلىق ئۆزگەرتىشكە بولىدۇ. $grid-columns
ھەر بىر يەككە ئىستوننىڭ كەڭلىكىنى (پىرسەنت) ھاسىل قىلىشقا ئىشلىتىلىدۇ ، شۇنىڭ بىلەن بىر ۋاقىتتا $grid-gutter-width
ستون ئۆستەڭنىڭ كەڭلىكىنى بەلگىلەيدۇ.
$grid-columns: 12 !default;
$grid-gutter-width: 30px !default;
Grid tiers
ستونلارنىڭ ئۆزىدىن ھالقىپ كەتسىڭىز ، تور دەرىجىسىنىڭ سانىنىمۇ تەڭشىيەلەيسىز. ئەگەر سىز پەقەت تۆت كاتەكچە دەرىجىگە ئېرىشمەكچى بولسىڭىز ، بۇنى $grid-breakpoints
ۋە $container-max-widths
مۇنداق نەرسىلەرنى يېڭىلايسىز:
$grid-breakpoints: (
xs: 0,
sm: 480px,
md: 768px,
lg: 1024px
);
$container-max-widths: (
sm: 420px,
md: 720px,
lg: 960px
);
Sass ئۆزگەرگۈچى مىقدار ياكى خەرىتىگە ھەر قانداق ئۆزگەرتىش ئېلىپ بارغاندا ، ئۆزگەرتىشلىرىڭىزنى تېجەپ قايتا تولۇقلىشىڭىز كېرەك. شۇنداق قىلسىڭىز ، ئىستون كەڭلىكى ، تورغا چىقىش ۋە زاكاز قىلىش ئۈچۈن ئالدىن بېكىتىلگەن يېڭى بىر يۈرۈش كاتەكچە سىنىپ چىقىدۇ. مەسئۇلىيەتچان كۆرۈنۈشلۈك ئىقتىدارلارمۇ يېڭىلىنىپ ، ئىختىيارى بۆلەكلەرنى ئىشلىتىدۇ. كاتەكچە قىممىتىنى تەڭشەشكە كاپالەتلىك قىلىڭ px
(ئەمەس rem
، em
ياكى %
).