بوشلۇق

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>