Source

Bo'shliq

Bootstrap elementning ko'rinishini o'zgartirish uchun stenogrammaga sezgir chegara va to'ldirish yordamchi sinflarining keng doirasini o'z ichiga oladi.

U qanday ishlaydi

Elementga yoki uning tomonlari toʻplamiga stenogramma sinflari bilan javob beradigan qulay marginyoki qiymatlarni belgilang. paddingShaxsiy xususiyatlar, barcha xususiyatlar va vertikal va gorizontal xususiyatlarni qo'llab-quvvatlashni o'z ichiga oladi. .25remSinflar birlamchi Sass xaritasidan dan gacha boʻlgan masofada qurilgan 3rem.

Belgilash

xsBarcha to'xtash nuqtalari uchun qo'llaniladigan oraliq yordamchi dasturlarda xlto'xtash nuqtasi qisqartmasi yo'q. Buning sababi shundaki, bu sinflar yuqoridan min-width: 0va yuqoridan qo'llaniladi va shuning uchun media so'rovi bilan bog'lanmaydi. Qolgan to'xtash nuqtalari esa to'xtash nuqtasi qisqartmasini o'z ichiga oladi.

Sinflar , , , va {property}{sides}-{size}uchun formati yordamida nomlanadi .xs{property}{sides}-{breakpoint}-{size}smmdlgxl

Bu erda mulk quyidagilardan biri hisoblanadi:

  • m- belgilangan sinflar uchunmargin
  • p- belgilangan sinflar uchunpadding

Bu tomonlardan biri:

  • t- belgilangan sinflar uchun margin-topyokipadding-top
  • b- belgilangan sinflar uchun margin-bottomyokipadding-bottom
  • l- belgilangan sinflar uchun margin-leftyokipadding-left
  • r- belgilangan sinflar uchun margin-rightyokipadding-right
  • x*-left- ikkalasini ham o'rnatadigan sinflar uchun*-right
  • y*-top- ikkalasini ham o'rnatadigan sinflar uchun*-bottom
  • bo'sh - elementning barcha 4 tomonida a marginyoki o'rnatilgan sinflar uchunpadding

Bu erda o'lcham quyidagilardan biri:

  • 0- ni yo'q qiladigan marginyoki paddinguni o'rnatish orqali sinflar uchun0
  • 1- (sukut bo'yicha) marginyoki ni o'rnatgan sinflar paddinguchun$spacer * .25
  • 2- (sukut bo'yicha) marginyoki ni o'rnatgan sinflar paddinguchun$spacer * .5
  • 3- (sukut bo'yicha) marginyoki ni o'rnatgan sinflar paddinguchun$spacer
  • 4- (sukut bo'yicha) marginyoki ni o'rnatgan sinflar paddinguchun$spacer * 1.5
  • 5- (sukut bo'yicha) marginyoki ni o'rnatgan sinflar paddinguchun$spacer * 3
  • automargin- auto ni o'rnatgan sinflar uchun

$spacers( Sass xaritasi oʻzgaruvchisiga yozuvlar qoʻshish orqali koʻproq oʻlchamlarni qoʻshishingiz mumkin .)

Misollar

Mana bu sinflarning ba'zi namunaviy namunalari:

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

Gorizontal markazlashtirish

Bundan tashqari, Bootstrap shuningdek, gorizontal chegaralarni o'rnatish orqali .mx-autoqattiq kenglikdagi blok darajasidagi tarkibni, ya'ni mavjud tarkib display: blockva width​​to'plamni gorizontal markazlashtirish uchun sinfni o'z ichiga oladi auto.

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