Зай зай

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 тал дээр a 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болон багцыг агуулдаг.widthauto

Төвлөрсөн элемент

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