in English

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>

Salbiy marja

CSS-da marginxususiyatlar salbiy qiymatlardan foydalanishi mumkin ( paddingmumkin). 4.2 dan boshlab biz yuqorida sanab o'tilgan har bir nolga teng bo'lmagan butun son o'lchami uchun manfiy marja yordam dasturlarini qo'shdik (masalan, 1, 2, 3, 4, 5). Ushbu yordamchi dasturlar to'xtash nuqtalari bo'ylab panjara ustunlari oluklarini sozlash uchun idealdir.

Sintaksis sukut bo'yicha, ijobiy chegara yordam dasturlari bilan deyarli bir xil, ammo nso'ralgan o'lchamdan oldin qo'shilishi bilan. Bunga qarama-qarshi bo'lgan misol sinfi .mt-1:

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

mdBu erda Bootstrap panjarasini o'rta ( ) to'xtash nuqtasida va undan yuqorida sozlash misoli keltirilgan. Biz .colto'ldirishni ota-ona .px-md-5bilan oshirdik va keyin bunga qarshi chiqdik ..mx-md-n5.row

Maxsus ustun to'ldirish
Maxsus ustun to'ldirish 
<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>