Bootstrap grid مىساللىرى

Bootstrap تورى سىستېمىسى ئىچىدىكى قۇرۇلۇش بىلەن تونۇشۇش ئۈچۈن ئاساسىي تور ئورۇنلاشتۇرۇشى.

بۇ مىساللاردا .themed-grid-colسىنىپ ئىستونغا بىر قىسىم باشتېمىلارنى قوشۇش ئۈچۈن قوشۇلدى. بۇ Bootstrap دا سۈكۈتتىكى دەرسلىك ئەمەس.

بەش كاتەكچە

Bootstrap تور سىستېمىسىغا بەش قاتلام بار ، بىز قوللايدىغان ھەر بىر ئۈسكۈنىنىڭ بىرى. ھەر بىر دەرىجە ئەڭ تۆۋەن كۆرۈش ئۆلچىمىدىن باشلىنىدۇ ۋە ئېشىپ كەتمىسە ئاپتوماتىك ھالدا چوڭ ئۈسكۈنىلەرگە ماس كېلىدۇ.

.col-4
.col-4
.col-4
.col-sm-4
.col-sm-4
.col-sm-4
.col-md-4
.col-md-4
.col-md-4
.col-lg-4
.col-lg-4
.col-lg-4
.col-xl-4
.col-xl-4
.col-xl-4
.col-xxl-4
.col-xxl-4
.col-xxl-4

ئۈچ تەڭگە

ئۈستەل يۈزىدىن باشلاپ چوڭ ئۈستەلگە كېڭەيتىشتىن تەڭ كەڭلىكتىكى ئۈچ ئىستونغا ئېرىشىڭ . كۆچمە ئۈسكۈنىلەر ، تاختا كومپيۇتېرلار ۋە تۆۋەندە ، ئىستونلار ئاپتوماتىك ساقلىنىدۇ.

.col-md-4
.col-md-4
.col-md-4

ئۈچ خىل ئوخشاش بولمىغان ئىستون

دەرسلەرنى ئىشلىتىش ئارقىلىق ، .row-cols-*ئوخشاش ئىستون بىلەن ئاسانلا تور ھاسىل قىلالايسىز.

.colof child .row-cols-md-3
.colof child .row-cols-md-3
.colof child .row-cols-md-3

ئۈچ تەڭسىز تۈۋرۈك

ئۈستەل يۈزىدىن باشلىنىپ ، ھەر خىل كەڭلىكتىكى چوڭ ئۈستەللەرگە كىچىكلىتىڭ . ئېسىڭىزدە تۇتۇڭ ، كاتەكچە تۈۋرۈك يەككە گورىزونتال توسۇش ئۈچۈن ئون ئىككىگىچە قوشۇشى كېرەك. ئۇنىڭدىن باشقا ، كۆرۈنۈشلەر قانداق بولۇشىدىن قەتئىينەزەر ستونلار تىزىشقا باشلايدۇ.

.col-md-3
.col-md-6
.col-md-3

ئىككى ئىستون

ئۈستەل يۈزىدىن باشلىنىپ چوڭ ئۈستەلگە كىچىكلىتىلگەن ئىككى ئىستونغا ئېرىشىڭ .

.col-md-8
.col-md-4

تولۇق كەڭلىكى ، يەككە ئىستون

تولۇق كەڭلىكتىكى ئېلېمېنتلار ئۈچۈن كاتەكچە دەرسلەر لازىم ئەمەس.

ئىككى ئۇۋىسى بار ئىككى ئىستون

ھۆججەتكە ئاساسەن ، ئۇۋا قىلىش ئاسان - ھازىرقى ئىستونغا بىر قۇر ستون قويۇڭ. بۇ سىزگە ئۈستەل يۈزىدىن باشلىنىپ چوڭ ئۈستەلگە كېڭەيتىشتىن ئىبارەت ئىككى ئىستون بېرىدۇ ، چوڭ ئىستون ئىچىدە يەنە ئىككى (كەڭلىك تەڭ).

كۆچمە ئۈسكۈنىلەرنىڭ چوڭ-كىچىكلىكى ، تاختا كومپيۇتېرلىرى ۋە ئاستى تەرىپىدە ، بۇ ئىستونلار ۋە ئۇلارنىڭ ئۇۋىسى بار.

.col-md-8
.col-md-6
.col-md-6
.col-md-4

ئارىلاشما: كۆچمە ۋە ئۈستەل يۈزى

Bootstrap v5 تور سىستېمىسىنىڭ ئالتە قاتلاملىق سىنىپى بار: xs (قوشۇمچە كىچىك ، بۇ تۈردىكى infix ئىشلىتىلمەيدۇ) ، sm (كىچىك) ، md (ئوتتۇرا) ، lg (چوڭ) ، xl (x- چوڭ) ۋە xxl (xx) -large). سىز تېخىمۇ جانلىق ۋە جانلىق ئورۇنلاشتۇرۇش ئۈچۈن بۇ دەرسلەرنىڭ ھەر قانداق بىرىكمىسىنى دېگۈدەك ئىشلىتەلەيسىز.

ھەر بىر دەرىجىدىكى سىنىپلار تارايدى ، يەنى md ، lg ، xl ۋە xxl غا ئوخشاش كەڭلىكنى تەڭشەشنى پىلانلىسىڭىز ، پەقەت md نى بەلگىلىشىڭىز كېرەك.

.col-md-8
.col-6 .col-md-4
.col-6 .col-md-4
.col-6 .col-md-4
.col-6 .col-md-4
.col-6
.col-6

ئارىلاشما: كۆچمە ، تاختا كومپيۇتېر ۋە ئۈستەل يۈزى

.col-sm-6 .col-lg-8
.col-6 .col-lg-4
.col-6 .col-sm-4
.col-6 .col-sm-4
.col-6 .col-sm-4

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بۆسۈش ھاسىل قىلدى.

.container
.container-sm
.container-md
.container-lg
.container-xl
.container-xxl
.container-fluid