Зай зай

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>

Сөрөг маржин

CSS-д marginшинж чанарууд нь сөрөг утгыг ашиглаж paddingболно (үгүй). 4.2-оос эхлэн бид дээр дурдсан бүхэл тоо (жишээ нь, 1, 2, 3, 4, 5) бүрд сөрөг маржин хэрэглүүр нэмсэн. Эдгээр хэрэгслүүд нь таслах цэгийн шугаман баганын сувгийг тохируулахад тохиромжтой.

Синтакс нь өгөгдмөл, эерэг маржин хэрэгслүүдтэй бараг ижил боловч nхүссэн хэмжээнээс өмнө нэмсэн. Үүний эсрэг талын жишээ анги энд байна .mt-1:

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

mdДунд зэргийн ( ) завсарлага ба түүнээс дээш цэгт Bootstrap сүлжээг тохируулах жишээ энд байна. Бид дэвсгэрийг эцэг эх дээр .colнэмээд .px-md-5дараа нь үүнийг эсэргүүцсэн ..mx-md-n5.row

Тусгай баганын дүүргэлт

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