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

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

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

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

Per the documentation, nesting is easy—just put a row of columns within an existing column. This gives you two columns starting at desktops and scaling to large desktops, with another two (equal widths) within the larger column.

At mobile device sizes, tablets and down, these columns and their nested columns will stack.

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

Mixed: mobile and desktop

The Bootstrap v4 grid system has five tiers of classes: xs (extra small, this class infix is not used), sm (small), md (medium), lg (large), and xl (extra large). You can use nearly any combination of these classes to create more dynamic and flexible layouts.

Each tier of classes scales up, meaning if you plan on setting the same widths for md, lg and xl, you only need to specify 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