Зай зай
Bootstrap нь элементийн дүр төрхийг өөрчлөхийн тулд богино хугацааны хариу үйлдэл үзүүлэх өргөн хүрээний хязгаар болон дүүргэх хэрэгслийн ангиудыг агуулдаг.
Хэрхэн ажилладаг
Элемент эсвэл түүний талуудын дэд бүлэгт богино хугацааны ангиллаар хариу үйлдэл үзүүлэхэд ээлтэй 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
- хоосон - элементийн 4 тал дээр a
margin
эсвэл тогтоосон ангиудадpadding
Хэмжээ нь :
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
margin
- автоматаар тохируулсан ангиудад
$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
болон багцыг хэвтээ байдлаар төвлөрүүлэх классыг агуулдаг .width
auto
<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>