بوشلۇق

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;
}

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

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