دووری کردن

بووتستراپ کۆمەڵێک پۆلی سوودمەندی پەراوێزی وەڵامدانەوەی کورتکراوە و پادکردن لەخۆدەگرێت بۆ دەستکاریکردنی دەرکەوتنی توخمێک.

چۆن کاردەکات

وەڵامدەرەوە-دۆست marginیان paddingبەهاکان بۆ توخمێک یان ژێرکۆمەڵێک لە لایەنەکانی بە پۆلەکانی کورتکراوە دیاری بکە. پشتگیری بۆ تایبەتمەندییە تاکەکەسییەکان، هەموو تایبەتمەندییەکان، و تایبەتمەندییە ڕاست و ئاسۆییەکان لەخۆدەگرێت. پۆلەکان لە نەخشەی پێشوەختەی Sass دروست دەکرێن کە لە .25remتا 3rem.

نووسین

سوودمەندیەکانی دووری کە بۆ هەموو خاڵەکانی شکاندن دەگونجێت، لە xsبۆ xl، هیچ کورتکراوەیەکی خاڵی شکاندنیان تێدا نییە. ئەمەش لەبەر ئەوەیە کە ئەو پۆلانە لە min-width: 0سەرەوە و سەرەوە جێبەجێ دەکرێن، و بەم شێوەیە بە پرسیارێکی میدیاییەوە بەستراو نین. بەڵام خاڵە شکاندنەکانی دیکە کورتکراوەی خاڵەکانی شکاندن لەخۆدەگرن.

ناو پۆلەکان بە بەکارهێنانی فۆرمات {property}{sides}-{size}بۆ xsو {property}{sides}-{breakpoint}-{size}بۆ sm, md, lg, و xl.

لە کوێدا موڵک یەکێکە لە:

• 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
• blank - بۆ ئەو پۆلانەی کە a marginیان paddingلە هەر 4 لای توخمەکە دادەنێن

لە کوێ قەبارە یەکێکە لە:

• 0- بۆ ئەو پۆلانەی کە marginیان 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
• auto- بۆ ئەو پۆلانەی کە marginto auto دادەنێن

(دەتوانیت قەبارەی زیاتر زیاد بکەیت بە زیادکردنی نووسراوەکان بۆ $spacersگۆڕاوەی نەخشەی ساس.)

نموونە

لێرەدا چەند نموونەیەکی نوێنەرایەتی ئەم چینانە دەخەینەڕوو:

.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>