تور سىستېمىسى
كۈچلۈك كۆچمە بىرىنچى ئەۋرىشىم ئېلېكتر تورىدىن پايدىلىنىپ ، ئون ئىككى ئىستون سىستېمىسى ، بەش سۈكۈتتىكى ئىنكاس قايتۇرۇش دەرىجىسى ، Sass ئۆزگەرگۈچى مىقدار ۋە ئارىلاشمىلار ۋە ئالدىن بېكىتىلگەن ئون نەچچە سىنىپنىڭ ياردىمىدە ھەر خىل شەكىلدىكى چوڭ-كىچىكلىكلەرنى ئورۇنلاشتۇرۇڭ.
قانداق ئىشلەيدۇ
Bootstrap نىڭ تور سىستېمىسى بىر قاتار قاچا ، قۇر ۋە ستونلارنى ئىشلىتىپ مەزمۇننى ئورۇنلاشتۇرىدۇ ۋە ماسلاشتۇرىدۇ. ئۇ flexbox بىلەن ياسالغان بولۇپ ، تولۇق ئىنكاس قايتۇرىدۇ. تۆۋەندە تورنىڭ قانداق بىر يەرگە كېلىدىغانلىقىغا بىر مىسال ۋە چوڭقۇر نەزەر.
Flexbox غا يېڭىمۇ ياكى ناتونۇشمۇ؟ تەگلىك ، تېرمىنولوگىيە ، كۆرسەتمە ۋە كود پارچىلىرى ئۈچۈن بۇ CSS Tricks ئەۋرىشىم قوللانمىسىنى ئوقۇڭ .
يۇقارقى مىسال بىزنىڭ ئالدىن بېكىتىلگەن تور سىنىپىمىز ئارقىلىق كىچىك ، ئوتتۇرا ، چوڭ ۋە قوشۇمچە چوڭ ئۈسكۈنىلەردە ئۈچ كەڭلىكتىكى ئىستون ھاسىل قىلىدۇ. ئۇ ئىستونلار ئاتا-ئانىلار بىلەن بەتنى مەركەز قىلغان .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
. سىز ئېھتىياجلىق بولغان ھەر بىر بۆسۈش ئېغىزىغا بىر قانچە سانسىز سىنىپ قوشۇڭ ، ھەر بىر ئىستون ئوخشاش كەڭلىكتە بولىدۇ.
ئوخشاش كەڭلىكتىكى كۆپ لىنىيىلىك
ئوخشاش كەڭلىكتىكى ئىستون قۇرۇڭ ، .w-100
بۇ ئىستونلارنىڭ يېڭى قۇرغا بۆلىنىشىنى خالىغان ئورۇنغا قىستۇرۇپ. .w-100
بەزى ئىنكاسچان كۆرسىتىش قوراللىرى بىلەن ئارىلاشتۇرۇپ ئارام ئېلىشنى ئىنكاسچان قىلىڭ .
بۇ يەردە Safari flexbox خاتالىقىflex-basis
بار بولۇپ ، بۇنى ئېنىق ياكى ئېنىق ئىشلىمەيتتى border
. كونا توركۆرگۈ نۇسخىلىرىنىڭ خىزمەت چارىلىرى بار ، ئەمما نىشانلىق توركۆرگۈڭىز كەمتۈك نەشرىگە كىرمىسە ، ئۇلار لازىم ئەمەس.
بىر ئىستون كەڭلىكىنى تەڭشەش
ئەۋرىشىم كاتەكچە ستوننىڭ ئاپتوماتىك ئورۇنلاشتۇرۇلۇشى يەنە بىر ئىستوننىڭ كەڭلىكىنى تەڭشىيەلەيدىغانلىقىڭىزنى ۋە ئاكا-ئۇكا ئىستونلارنىڭ ئاپتوماتىك چوڭلۇقىنى تەڭشىيەلەيدىغانلىقىڭىزنى بىلدۈرىدۇ. سىز ئالدىن بېكىتىلگەن تور سىنىپى (تۆۋەندە كۆرسىتىلگەندەك) ، كاتەكچە ئارىلاشما ياكى سىزىق كەڭلىكىنى ئىشلىتەلەيسىز. شۇنىڭغا دىققەت قىلىڭكى ، باشقا ئىستونلارنىڭ مەركىزى ئىستوننىڭ كەڭلىكى قانداق بولۇشىدىن قەتئىينەزەر چوڭ-كىچىكلىكى چوڭ بولىدۇ.
ئۆزگىرىشچان كەڭلىك مەزمۇنى
col-{breakpoint}-auto
دەرسلەرنىڭ مەزمۇنىنىڭ تەبىئىي كەڭلىكىگە ئاساسەن چوڭلۇقتىكى ئىستونلارنى ئىشلىتىڭ .
مەسئۇلىيەتچان دەرسلەر
Bootstrap تورى مۇرەككەپ ئىنكاس لايىھىسى قۇرۇش ئۈچۈن ئالدىن بېكىتىلگەن بەش قاتلامنى ئۆز ئىچىگە ئالىدۇ. ئىستونلىرىڭىزنىڭ چوڭ-كىچىكلىكىنى كىچىك ، كىچىك ، ئوتتۇرا ، چوڭ ياكى قوشۇمچە چوڭ ئۈسكۈنىلەرگە ماسلاشتۇرۇڭ.
بارلىق بۆسۈش نۇقتىلىرى
كىچىك ئۈسكۈنىلەردىن تارتىپ چوڭلارغىچە ئوخشاش بولغان تورلارغا نىسبەتەن ، دەرس .col
ۋە .col-*
دەرسلەرنى ئىشلىتىڭ. ئالاھىدە چوڭلۇقتىكى ئىستونغا ئېھتىياجلىق بولغاندا نومۇر قويۇلغان سىنىپنى بەلگىلەڭ. بولمىسا ، چىڭ تۇرۇڭ .col
.
توغرىسىغا توغرىلانغان
بىر يۈرۈش .col-sm-*
دەرسلەرنى ئىشلىتىپ ، ئاساسىي تور تورىنى قۇرالايسىز ھەمدە كىچىك بۆسۈش ئېغىزىدا توغرىسىغا ئايلىنىدۇ sm
.
ئارىلاش ۋە ماسلاشتۇرۇش
ستونلىرىڭىزنىڭ بەزى تور قاتلاملىرىغا تىزىپ قويۇشىنى خالامسىز؟ ئېھتىياجغا ئاساسەن ھەر بىر قاتلامغا ئوخشىمىغان سىنىپلارنىڭ بىرىكمىسىنى ئىشلىتىڭ. ئۇنىڭ قانداق ئىشلەيدىغانلىقىنى تېخىمۇ ياخشى چۈشىنىش ئۈچۈن تۆۋەندىكى مىسالغا قاراڭ.
Gutters
گۇتېرلارنى بۆسۈش خاراكتېرلىك ئالاھىدە تاختا ۋە مەنپىي پايدا نىسبىتى سىنىپى ئارقىلىق ئىنكاس قايتۇرغىلى بولىدۇ. مەلۇم بىر قۇردىكى ئۆستەڭنى ئۆزگەرتىش ئۈچۈن ، s دىكى سەلبىي گىرۋەكنى ئىشلىتىش .row
ۋە ماسلاشتۇرۇش تاختىسىنى ماسلاشتۇرۇش .col
. قايتا - قايتا ماسلاشتۇرۇلغان تاختا ئىشلىتىش ئارقىلىق ، .container
ياكى ئاتا-ئانىلارمۇ تەڭشەشكە ئېھتىياجلىق بولۇشى مۇمكىن..container-fluid
بۇ يەردە چوڭ ( lg
) بۆسۈش ئېغىزى ۋە ئۈستىدىكى Bootstrap تورىنى خاسلاشتۇرۇشنىڭ بىر مىسالى بار. بىز پاتقاقنى كۆپەيتتۇق ، .col
ئاتا -ئانىغا .px-lg-5
قارشى تۇردۇق ، ئاندىن ئورالمىنى تەڭشىدۇق ..mx-lg-n5
.row
.container
.px-lg-5
قۇر ئىستون
ئىنكاسچان .row-cols-*
دەرسلەرنى ئىشلىتىپ ، مەزمۇن ۋە ئورۇنلاشتۇرۇشىڭىزنى ئەڭ ياخشى تەمىنلەيدىغان ئىستون سانىنى تېز بەلگىلەڭ. نورمال .col-*
دەرسلەر ئايرىم ئىستونلارغا (مەسىلەن ، .col-md-4
) قوللىنىلسا ، قۇر ئىستون دەرسلىرى ئاتا-ئانىغا .row
تېزلەتمە قىلىپ بېكىتىلىدۇ.
بۇ قۇر ئىستون دەرسلىرىنى ئىشلىتىپ ئاساسىي تور ئورۇنلاشتۇرۇشىنى تېزدىن ھاسىل قىلىڭ ياكى كارتا ئورۇنلاشتۇرۇشىڭىزنى كونترول قىلىڭ.
قوشۇمچە ساس ئارىلاشمىسىنى ئىشلەتسىڭىزمۇ بولىدۇ row-cols()
:
توغرىلاش
تۈۋرۈكنى توغرىلاش ۋە توغرىسىغا توغرىلاش ئۈچۈن flexbox توغرىلاش قوراللىرىنى ئىشلىتىڭ. Internet Explorer 10-11 ئەۋرىشىم قاچىنىڭ تۆۋەندە كۆرسىتىلگەندەك ئەۋرىشىم تۈرلەرنىڭ تىك توغرىلىنىشىنى قوللىمايدۇ . min-height
تېخىمۇ كۆپ تەپسىلاتلارنى Flexbugs # 3 دىن كۆرۈڭ.
تىك توغرىلاش
توغرىسىغا توغرىلاش
ئۆستەڭ يوق
ئالدىن بېكىتىلگەن تور دەرسلىكىمىزدىكى تۈۋرۈكلەر ئارىسىدىكى ئۆستەڭلەرنى ئېلىۋەتكىلى بولىدۇ .no-gutters
. بۇ بارلىق بالىلار ئىستونلىرىدىكى مەنپىي margin
s .row
ۋە گورىزونتالنى چىقىرىپ تاشلايدۇ.padding
بۇ ئۇسلۇبلارنى قۇرۇشنىڭ ئەسلى كودى. شۇنىڭغا دىققەت قىلىڭكى ، ئىستون قاپلىمىسى پەقەت تۇنجى بالىلار ئىستونىغا توغرىلانغان بولۇپ ، خاسلىق تاللىغۇچ ئارقىلىق نىشانلىنىدۇ . گەرچە بۇ تېخىمۇ ئېنىق تاللىغۇچ ھاسىل قىلسىمۇ ، ئەمما بوشلۇق ئەسلىھەلىرى بىلەن ئىستون تاختىسىنى يەنىلا خاسلاشتۇرغىلى بولىدۇ .
قىرغاقتىن لايىھىلەش كېرەكمۇ؟ ئاتا-ئانىسىنى تاشلاڭ .container
ياكى .container-fluid
.
ئەمەلىيەتتە ، ئۇ قانداق كۆرۈنىدۇ. شۇنىڭغا دىققەت قىلىڭكى ، سىز باشقا ئالدىن بېكىتىلگەن تور سىنىپلىرى بىلەن داۋاملىق ئىشلىتەلەيسىز (ستون كەڭلىكى ، ئىنكاس دەرىجىسى ، رەت تەرتىپى ۋە باشقىلارنى ئۆز ئىچىگە ئالىدۇ).
تۈۋرۈك ئوراش
ئەگەر بىر قۇرغا 12 دىن ئارتۇق ئىستون قويۇلسا ، ھەر بىر گۇرۇپپا قوشۇمچە ئىستونلار بىر گەۋدە سۈپىتىدە يېڭى قۇرغا ئورۇلىدۇ.
9 + 4 = 13> 12 دىن باشلاپ ، بۇ 4 ئىستون كەڭلىكتىكى div بىر تۇتاش ئورۇن سۈپىتىدە يېڭى قۇرغا ئورالغان.
كېيىنكى ئىستونلار يېڭى لىنىيىدە داۋاملاشتى.
ستون بۇزۇلدى
Flexbox دىكى يېڭى قۇرغا ئىستونلارنى پارچىلاش كىچىك خاككېرنى تەلەپ قىلىدۇ: width: 100%
ئىستونلىرىڭىزنى يېڭى قۇرغا چاپلىماقچى بولغان ئورۇنغا ئېلېمېنت قوشۇڭ. ئادەتتە بۇ بىر نەچچە .row
s بىلەن ئەمەلگە ئاشىدۇ ، ئەمما ھەر بىر يولغا قويۇش ئۇسۇلى بۇنىڭ ھېسابىنى بېرەلمەيدۇ.
سىز بۇ بۆسۈشنى بىزنىڭ ئىنكاسچان كۆرسىتىش قوراللىرىمىز بىلەن ئالاھىدە بۆسۈش نۇقتىلىرىدا قوللانسىڭىز بولىدۇ .
Reordering
دەرسلەرنى زاكاز قىلىڭ
مەزمۇنلىرىڭىزنى كۆرۈش تەرتىپىنى.order-
كونترول قىلىش ئۈچۈن دەرسلەرنى ئىشلىتىڭ . بۇ دەرسلەر ئىنكاسى كۈچلۈك ، شۇڭا بۆسۈش نۇقتىسى ئارقىلىق تەڭشىيەلەيسىز (مەسىلەن ، ). بەش تورنىڭ ھەممىسىدە قوللاشنى ئۆز ئىچىگە ئالىدۇ .order
.order-1.order-md-2
1
12
ئىلتىماس قىلىش ۋە ( ) ئارقىلىق ئېلېمېنتنىڭ ئۆزگىرىشىنى ئۆزگەرتىدىغان ئىنكاسچان .order-first
ۋە .order-last
دەرسلەرمۇ بار . بۇ دەرسلەرنى ئېھتىياجغا ئاساسەن نومۇر قويۇلغان دەرسلەر بىلەن ئارىلاشتۇرغىلى بولىدۇ .order
order: -1
order: 13
order: $columns + 1
.order-*
ستونلارنى ئۆچۈرۈش
سىز كاتەكچە ئىستوننى ئىككى خىل ئۇسۇلدا ئۆچۈرەلەيسىز: بىزنىڭ ئىنكاسچان .offset-
تور سىنىپىمىز ۋە بىزنىڭ ئەۋزەللىكىمىز . كاتەكچە سىنىپلار چوڭلۇقتىكى ئىستونلارغا ماس كېلىدۇ ، ھالبۇكى گىرۋەكنىڭ كەڭلىكى ئۆزگىرىشچان بولغان تېز ئورۇنلاشتۇرۇشقا تېخىمۇ پايدىلىق.
دەرسلەرنى ئۆچۈرۈڭ
.offset-md-*
دەرسلەرنى ئىشلىتىپ ئىستوننى ئوڭغا يۆتكەڭ . بۇ دەرسلەر ئىستوننىڭ سول گىرۋىكىنى ئىستون ئارقىلىق ئۆستۈرىدۇ *
. مەسىلەن ، تۆت ئىستوندىن .offset-md-4
يۆتكىلىدۇ ..col-md-4
ئىنكاس قايتۇرۇش نۇقتىلىرىدا ستون تازىلاشتىن باشقا ، تور بېكەتنى قايتا ئورنىتىشىڭىز لازىم بولۇشى مۇمكىن. توردىكى مىسالدا بۇنى كۆرۈڭ .
Margin utilities
V4 دىكى flexbox غا يۆتكىلىش ئارقىلىق ، .mr-auto
ئاكا-ئۇكا ئىستونلارنى بىر-بىرىدىن يىراقلاشتۇرۇشقا ئوخشاش ئەۋزەللىكلەرنى ئىشلىتەلەيسىز.
Nesting
سۈكۈتتىكى تور بىلەن مەزمۇنلىرىڭىزنى ئۇۋىلاش ئۈچۈن ، بار بولغان ئىستونغا يېڭى .row
ۋە بىر قاتار ستون قوشۇڭ . ئۇلانغان قۇرلار 12 ياكى ئۇنىڭدىن تۆۋەن بولغان بىر قاتار ئىستونلارنى ئۆز ئىچىگە ئېلىشى كېرەك (ئىشلەتكىلى بولىدىغان 12 ئىستوننىڭ ھەممىسىنى ئىشلىتىشىڭىز تەلەپ قىلىنمايدۇ)..col-sm-*
.col-sm-*
Sass mixins
Bootstrap نىڭ مەنبە Sass ھۆججىتىنى ئىشلەتكەندە ، Sass ئۆزگەرگۈچى مىقدار ۋە ئارىلاشمىلارنى ئىشلىتىپ ئىختىيارى ، مەنىلىك ۋە ئىنكاسچان بەت ئورۇنلاشتۇرۇشىنى تاللىيالايسىز. بىزنىڭ ئالدىن بېكىتىلگەن تور سىنىپىمىز ئوخشاش ئۆزگەرگۈچى مىقدار ۋە ئارىلاشمىلارنى ئىشلىتىپ ، تېز ئىنكاس قايتۇرۇش لايىھىسى ئۈچۈن ئىشلىتىشكە بولىدىغان بىر يۈرۈش دەرسلەرنى تەمىنلەيدۇ.
ئۆزگەرگۈچى مىقدار
ئۆزگەرگۈچى مىقدار ۋە خەرىتە تۈۋرۈك سانى ، ئۆستەڭ كەڭلىكى ۋە لەيلىمە ئىستوننى باشلايدىغان مېدىيا سوئال نۇقتىسىنى بەلگىلەيدۇ. بىز بۇلارنى يۇقىرىدا خاتىرىلەنگەن ئالدىن بېكىتىلگەن تور سىنىپى ، شۇنداقلا تۆۋەندە كۆرسىتىلگەن ئىختىيارى ئارىلاشمىلار ئۈچۈن ھاسىل قىلىمىز.
Mixins
ئارىلاشما كاتەكچە ئۆزگەرگۈچى مىقدارلار بىلەن بىرلەشتۈرۈپ ، يەككە كاتەكچە ستون ئۈچۈن مەنىلىك CSS ھاسىل قىلىدۇ.
مىسال ئىشلىتىش
ئۆزگەرگۈچى مىقدارنى ئۆزىڭىزنىڭ خاس قىممىتىگە ئۆزگەرتەلەيسىز ياكى ئارىلاشما قىممەتنى ئۇلارنىڭ كۆڭۈلدىكى قىممىتى بىلەن ئىشلىتەلەيسىز. بۇ يەردە سۈكۈتتىكى تەڭشەكلەرنى ئىشلىتىپ ئىككى ئىستون ئورۇنلاشتۇرۇشنى ھاسىل قىلىدىغان مىسال بار.
Customizing the grid
Using our built-in grid Sass variables and maps, it’s possible to completely customize the predefined grid classes. Change the number of tiers, the media query dimensions, and the container widths—then recompile.
Columns and gutters
The number of grid columns can be modified via Sass variables. $grid-columns
is used to generate the widths (in percent) of each individual column while $grid-gutter-width
sets the width for the column gutters.
Grid tiers
Moving beyond the columns themselves, you may also customize the number of grid tiers. If you wanted just four grid tiers, you’d update the $grid-breakpoints
and $container-max-widths
to something like this:
Sass ئۆزگەرگۈچى مىقدار ياكى خەرىتىگە ھەر قانداق ئۆزگەرتىش ئېلىپ بارغاندا ، ئۆزگەرتىشلىرىڭىزنى تېجەپ قايتا تولۇقلىشىڭىز كېرەك. شۇنداق قىلسىڭىز ، ئىستون كەڭلىكى ، تورغا چىقىش ۋە زاكاز قىلىش ئۈچۈن ئالدىن بېكىتىلگەن يېڭى بىر يۈرۈش كاتەكچە سىنىپ چىقىدۇ. مەسئۇلىيەتچان كۆرۈنۈشلۈك ئىقتىدارلارمۇ يېڭىلىنىپ ، ئىختىيارى بۆلەكلەرنى ئىشلىتىدۇ. كاتەكچە قىممىتىنى تەڭشەشكە كاپالەتلىك قىلىڭ px
(ئەمەس rem
، em
ياكى %
).