بوشلۇق

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

قانداق ئىشلەيدۇ

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

ئىزاھات

xsبارلىق بۆسۈش نۇقتىلىرىغا ماس كېلىدىغان بوشلۇق ئەسلىھەلىرىدە xlئۇلاردا بۆسۈش قىسقارتىلمىسى يوق. چۈنكى ئۇ دەرسلەر يۇقىرى-تۆۋەن قوللىنىلىدۇ min-width: 0، شۇڭا تاراتقۇلارنىڭ سوئالى بىلەن باغلانمايدۇ. قالغان بۆسۈش نۇقتىلىرى بولسا بۆسۈش قىسقارتىلمىسىنى ئۆز ئىچىگە ئالىدۇ.

دەرسلەر ئۈچۈن ، ۋە ، ، ۋە {property}{sides}-{size}ئۈچۈن فورماتنى ئىشلىتىپ ئىسىم قويۇلغان .xs{property}{sides}-{breakpoint}-{size}smmdlgxl

مال -مۈلۈكنىڭ بىرى:

• m- تەڭشەلگەن دەرسلەر ئۈچۈنmargin
• p- تەڭشەلگەن دەرسلەر ئۈچۈنpadding

تەرەپلەر بولسا :

• t- بەلگىلەيدىغان margin-topياكىpadding-top
• b- بەلگىلەيدىغان margin-bottomياكىpadding-bottom
• l- بەلگىلەيدىغان margin-leftياكىpadding-left
• r- بەلگىلەيدىغان margin-rightياكىpadding-right
• x*-left- ھەر ئىككىسىنى بەلگىلەيدىغان دەرسلەر ئۈچۈن*-right
• y*-top- ھەر ئىككىسىنى بەلگىلەيدىغان دەرسلەر ئۈچۈن*-bottom
• قۇرۇق - ئېلېمېنتنىڭ 4 تەرىپىگە marginياكى ھەممىسىنى بەلگىلەيدىغان دەرسلەر ئۈچۈنpadding

چوڭلۇقى بىر بولسا:

• 0margin- ياكى paddingئۇنى تەڭشەيدىغان دەرسلەر ئۈچۈن0
• 1- (سۈكۈتتىكى ھالەتتە) marginياكى بەلگىلەيدىغان دەرسلەر paddingئۈچۈن$spacer * .25
• 2- (سۈكۈتتىكى ھالەتتە) marginياكى بەلگىلەيدىغان دەرسلەر paddingئۈچۈن$spacer * .5
• 3- (سۈكۈتتىكى ھالەتتە) marginياكى بەلگىلەيدىغان دەرسلەر paddingئۈچۈن$spacer
• 4- (سۈكۈتتىكى ھالەتتە) marginياكى بەلگىلەيدىغان دەرسلەر paddingئۈچۈن$spacer * 1.5
• 5- (سۈكۈتتىكى ھالەتتە) marginياكى بەلگىلەيدىغان دەرسلەر paddingئۈچۈن$spacer * 3
• automargin- ئاپتوماتىك بەلگىلەيدىغان دەرسلەر ئۈچۈن

$spacers( Sass خەرىتە ئۆزگەرگۈچى مىقدارغا تۈر قوشۇش ئارقىلىق تېخىمۇ چوڭ رازمېرلارنى قوشالايسىز .)

مىساللار

بۇ دەرسلەرنىڭ بىر قىسىم ۋەكىللىك مىساللىرى:

.mt-0 {
  margin-top: 0 !important;
}

.ml-1 {
  margin-left: ($spacer * .25) !important;
}

.px-2 {
  padding-left: ($spacer * .5) !important;
  padding-right: ($spacer * .5) !important;
}

.p-3 {
  padding: $spacer !important;
}

توغرىسىغا توغرىلاش

بۇنىڭدىن باشقا ، Bootstrap يەنە گورىزونتال گىرۋەكنى توغرىلاش ئارقىلىق .mx-autoتوغرىسىغا مەركەزلىك مۇقىم كەڭلىكتىكى توسۇلۇش دەرىجىسىدىكى مەزمۇننى يەنى مەزمۇن display: blockۋە بىر widthيۈرۈش مەزمۇننى ئۆز ئىچىگە ئالىدۇ auto.

<div class="mx-auto" style="width: 200px;">
  Centered element
</div>

سەلبىي پەرقى

CSS دە ، marginخاسلىق مەنپىي قىممەتنى ئىشلىتەلەيدۇ ( paddingقىلالمايدۇ). 14.2 دىن باشلاپ ، بىز يۇقىرىدا كۆرسىتىلگەن ھەر بىر نۆل بولمىغان پۈتۈن ساننىڭ (مەسىلەن ، ، 2، 3، 4، ) مەنپىي پايدا نىسبىتىنى قوشتۇق 5. بۇ ئەسۋابلار كاتەكچە تۈۋرۈك ئۆستەڭلىرىنى بۆسۈش ئېغىزىغا ماسلاشتۇرۇشقا ماس كېلىدۇ.

گرامماتىكىسى سۈكۈتتىكى ، مۇسبەت پايدا نىسبىتى بىلەن ئاساسەن ئوخشاش ، ئەمما nتەلەپ قىلىنغان چوڭلۇقتىن بۇرۇن قوشۇلىدۇ. بۇنىڭ ئەكسىچە بىر مىسال سىنىپى .mt-1:

.mt-n1 {
  margin-top: -0.25rem !important;
}

بۇ يەردە Bootstrap تورىنى ئوتتۇرا ( md) بۆسۈش ئېغىزى ۋە ئۇنىڭدىن يۇقىرى ئورۇنغا خاسلاشتۇرۇشنىڭ بىر مىسالى بار. بىز پاتقاقنى كۆپەيتتۇق ، .colئاندىن .px-md-5ئاتا .mx-md-n5-ئانىسىغا قارشى تۇردۇق .row.

<div class="row mx-md-n5">
  <div class="col py-3 px-md-5 border bg-light">Custom column padding</div>
  <div class="col py-3 px-md-5 border bg-light">Custom column padding</div>
</div>