Bootstrap grid مىساللىرى
Bootstrap تورى سىستېمىسى ئىچىدىكى قۇرۇلۇش بىلەن تونۇشۇش ئۈچۈن ئاساسىي تور ئورۇنلاشتۇرۇشى.
بۇ مىساللاردا .themed-grid-col
سىنىپ ئىستونغا بىر قىسىم باشتېمىلارنى قوشۇش ئۈچۈن قوشۇلدى. بۇ Bootstrap دا سۈكۈتتىكى دەرسلىك ئەمەس.
بەش كاتەكچە
Bootstrap تور سىستېمىسىغا بەش قاتلام بار ، بىز قوللايدىغان ھەر بىر ئۈسكۈنىنىڭ بىرى. ھەر بىر دەرىجە ئەڭ تۆۋەن كۆرۈش ئۆلچىمىدىن باشلىنىدۇ ۋە ئېشىپ كەتمىسە ئاپتوماتىك ھالدا چوڭ ئۈسكۈنىلەرگە ماس كېلىدۇ.
ئۈچ تەڭگە
ئۈستەل يۈزىدىن باشلاپ چوڭ ئۈستەلگە كېڭەيتىشتىن تەڭ كەڭلىكتىكى ئۈچ ئىستونغا ئېرىشىڭ . كۆچمە ئۈسكۈنىلەر ، تاختا كومپيۇتېرلار ۋە تۆۋەندە ، ئىستونلار ئاپتوماتىك ساقلىنىدۇ.
ئۈچ خىل ئوخشاش بولمىغان ئىستون
دەرسلەرنى ئىشلىتىش ئارقىلىق ، .row-cols-*
ئوخشاش ئىستون بىلەن ئاسانلا تور ھاسىل قىلالايسىز.
.col
of child
.row-cols-md-3
.col
of child
.row-cols-md-3
.col
of child
.row-cols-md-3
ئۈچ تەڭسىز تۈۋرۈك
ئۈستەل يۈزىدىن باشلىنىپ ، ھەر خىل كەڭلىكتىكى چوڭ ئۈستەللەرگە كىچىكلىتىڭ . ئېسىڭىزدە تۇتۇڭ ، كاتەكچە تۈۋرۈك يەككە گورىزونتال توسۇش ئۈچۈن ئون ئىككىگىچە قوشۇشى كېرەك. ئۇنىڭدىن باشقا ، كۆرۈنۈشلەر قانداق بولۇشىدىن قەتئىينەزەر ستونلار تىزىشقا باشلايدۇ.
ئىككى ئىستون
ئۈستەل يۈزىدىن باشلىنىپ چوڭ ئۈستەلگە كىچىكلىتىلگەن ئىككى ئىستونغا ئېرىشىڭ .
تولۇق كەڭلىكى ، يەككە ئىستون
تولۇق كەڭلىكتىكى ئېلېمېنتلار ئۈچۈن كاتەكچە دەرسلەر لازىم ئەمەس.
ئىككى ئۇۋىسى بار ئىككى ئىستون
ھۆججەتكە ئاساسەن ، ئۇۋا قىلىش ئاسان - ھازىرقى ئىستونغا بىر قۇر ستون قويۇڭ. بۇ سىزگە ئۈستەل يۈزىدىن باشلىنىپ چوڭ ئۈستەلگە كېڭەيتىشتىن ئىبارەت ئىككى ئىستون بېرىدۇ ، چوڭ ئىستون ئىچىدە يەنە ئىككى (كەڭلىك تەڭ).
كۆچمە ئۈسكۈنىلەرنىڭ چوڭ-كىچىكلىكى ، تاختا كومپيۇتېرلىرى ۋە ئاستى تەرىپىدە ، بۇ ئىستونلار ۋە ئۇلارنىڭ ئۇۋىسى بار.
ئارىلاشما: كۆچمە ۋە ئۈستەل يۈزى
Bootstrap v4 تور سىستېمىسىنىڭ بەش قاتلاملىق سىنىپى بار: xs (ئارتۇقچە كىچىك ، بۇ تۈردىكى infix ئىشلىتىلمەيدۇ) ، sm (كىچىك) ، md (ئوتتۇرا) ، lg (چوڭ) ۋە xl (قوشۇمچە چوڭ). سىز تېخىمۇ جانلىق ۋە جانلىق ئورۇنلاشتۇرۇش ئۈچۈن بۇ دەرسلەرنىڭ ھەر قانداق بىرىكمىسىنى دېگۈدەك ئىشلىتەلەيسىز.
ھەر بىر دەرىجىدىكى سىنىپلارنىڭ كۆلىمى كىچىكلەيدۇ ، يەنى md ، lg ۋە xl غا ئوخشاش كەڭلىكنى تەڭشەشنى پىلانلىسىڭىز ، پەقەت md نى بەلگىلىشىڭىز كېرەك.
ئارىلاشما: كۆچمە ، تاختا كومپيۇتېر ۋە ئۈستەل يۈزى
Gutters
دەرسلەر بىلەن .gx-*
گورىزونتال ئۆستەڭنى تەڭشىگىلى بولىدۇ.
.col
.gx-4
ئۆستەڭ
بىلەن
.col
.gx-4
ئۆستەڭ
بىلەن
.col
.gx-4
ئۆستەڭ
بىلەن
.col
.gx-4
ئۆستەڭ
بىلەن
.col
.gx-4
ئۆستەڭ
بىلەن
.col
.gx-4
ئۆستەڭ
بىلەن
دەرسلەرنى ئىشلىتىپ .gy-*
تىك ئۆستەڭنى كونترول قىلىڭ.
.col
.gy-4
ئۆستەڭ
بىلەن
.col
.gy-4
ئۆستەڭ
بىلەن
.col
.gy-4
ئۆستەڭ
بىلەن
.col
.gy-4
ئۆستەڭ
بىلەن
.col
.gy-4
ئۆستەڭ
بىلەن
.col
.gy-4
ئۆستەڭ
بىلەن
دەرسلەر بىلەن .g-*
ئىككى يۆنىلىشتىكى ئۆستەڭنى تەڭشىگىلى بولىدۇ.
.col
.g-3
ئۆستەڭ
بىلەن
.col
.g-3
ئۆستەڭ
بىلەن
.col
.g-3
ئۆستەڭ
بىلەن
.col
.g-3
ئۆستەڭ
بىلەن
.col
.g-3
ئۆستەڭ
بىلەن
.col
.g-3
ئۆستەڭ
بىلەن
كونتېينېر
Bootstrap v4.4 غا قوشۇلغان قوشۇمچە دەرسلەر مەلۇم بىر بۆسۈش ئېغىزىغىچە% 100 كەڭلىكتىكى قاچىلارغا يول قويىدۇ. v5 يېڭى xxl
بۆسۈش ھاسىل قىلدى.