Bootstrap grid مىساللىرى

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

ئۈچ تەڭگە

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

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

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

.col-xs-12 .col-md-8
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6
.col-xs-6

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

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

ستون تازىلاش

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

.col-xs-6 .col-sm-3
كۆرۈنۈشنى چوڭايتىڭ ياكى تېلېفوندا تەكشۈرۈپ بېقىڭ.
.col-xs-6 .col-sm-3
.col-xs-6 .col-sm-3
.col-xs-6 .col-sm-3

ئەسلىگە كەلتۈرۈش ، ئىتتىرىش ۋە تارتىش

ئالاھىدە بۆسۈش نۇقتىلىرىنى ئۆچۈرۈش ، ئىتتىرىش ۋە تارتىش.

.col-sm-5 .col-md-6
.col-sm-5 .col-sm-offset-2 .col-md-6 .col-md-offset-0
.col-sm-6 .col-md-5 .col-lg-6
.col-sm-6 .col-md-5 .col-md-offset-2 .col-lg-6 .col-lg-offset-0