Bootstrap grid مىساللىرى

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

بەش كاتەكچە

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

.col-4

.col-sm-4

.col-md-4

.col-lg-4

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

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

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

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

.col-12 .col-md-8

.col-6 .col-md-4

.col-6

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

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

.col-6 .col-lg-4

.col-6 .col-sm-4