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-md-4
.col-md-4
.col-md-4

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

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

.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 v4 تور سىستېمىسىنىڭ بەش قاتلاملىق سىنىپى بار: xs (ئارتۇقچە كىچىك ، بۇ تۈردىكى infix ئىشلىتىلمەيدۇ) ، sm (كىچىك) ، md (ئوتتۇرا) ، lg (چوڭ) ۋە xl (قوشۇمچە چوڭ). سىز تېخىمۇ جانلىق ۋە جانلىق ئورۇنلاشتۇرۇش ئۈچۈن بۇ دەرسلەرنىڭ ھەر قانداق بىرىكمىسىنى دېگۈدەك ئىشلىتەلەيسىز.

ھەر بىر دەرىجىدىكى سىنىپلارنىڭ كۆلىمى كىچىكلەيدۇ ، يەنى md ، lg ۋە xl غا ئوخشاش كەڭلىكنى تەڭشەشنى پىلانلىسىڭىز ، پەقەت 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

كونتېينېر

Bootstrap v4.4 غا قوشۇلغان قوشۇمچە دەرسلەر مەلۇم بىر بۆسۈش ئېغىزىغىچە% 100 كەڭلىكتىكى قاچىلارغا يول قويىدۇ.

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