in English

Зай зай

Bootstrap нь элементийн дүр төрхийг өөрчлөхийн тулд богино хугацааны хариу үйлдэл үзүүлэх өргөн хүрээний маржин, дэвсгэр, завсрын хэрэглээний ангиудыг агуулдаг.

Энэ хуудсан дээр

Маржин ба дүүргэлт

Элемент эсвэл түүний талуудын дэд бүлэгт богино хугацааны ангиллаар хариу үйлдэл үзүүлэхэд ээлтэй marginэсвэл утгыг оноох. paddingХувь хүний шинж чанар, бүх шинж чанар, босоо болон хэвтээ шинж чанаруудын дэмжлэгийг багтаасан болно. Ангиуд нь өгөгдмөл Sass газрын зургаас эхлэн .25remхийгдсэн 3rem.

CSS Grid layout модулийг ашиглаж байна уу? Оронд нь завсрын хэрэгслийг ашиглах талаар бодож үзээрэй .

Тэмдэглэгээ

xs-аас хүртэлх бүх таслах цэгүүдэд хамаарах завсрын хэрэгслүүдэд xxlзавсарлагааны цэгийн товчлол байхгүй байна. Учир нь эдгээр ангиуд нь эхлээд min-width: 0ба түүнээс дээш хэрэглэгддэг тул медиа асуулгад холбогддоггүй. Харин үлдсэн таслах цэгүүд нь таслах цэгийн товчлолыг агуулдаг.

{property}{sides}-{size}Ангиудыг , , , , xsболон {property}{sides}-{breakpoint}-{size}гэсэн форматыг ашиглан нэрлэсэн .smmdlgxlxxl

Өмч нь дараахь зүйлсийн нэг бол:

m- тогтоосон ангиудадmargin
p- тогтоосон ангиудадpadding

Хаана талууд нь:

t- тогтоосон ангиудад margin-topэсвэлpadding-top
b- тогтоосон ангиудад margin-bottomэсвэлpadding-bottom
s- (эхлэх) нь LTR margin-leftэсвэл RTL - д тохируулагдсан ангиудадpadding-leftmargin-rightpadding-right
e- (төгсгөл) LTR margin-rightэсвэл RTL - д тохируулсан ангиудадpadding-rightmargin-leftpadding-left
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;
}

.ms-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болно (үгүй). Эдгээр сөрөг зайг анхдагчаар идэвхгүй болгосон боловч Sass-д тохиргоогоор идэвхжүүлж болно $enable-negative-margins: true.

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

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

Цоорхой

-ийг ашиглах display: gridүед та gapэх сүлжээний контейнер дээрх хэрэгслүүдийг ашиглаж болно. Энэ нь тусдаа сүлжээний зүйлд ( display: gridсавны хүүхдүүд) маржин хэрэгслүүдийг нэмэх шаардлагагүй болно. $spacersGap хэрэгслүүд нь анхдагч байдлаар хариу үйлдэл үзүүлдэг бөгөөд Sass газрын зураг дээр тулгуурлан манай хэрэгслүүдийн API-ээр үүсгэгддэг .

Сүлжээний зүйл 1

Сүлжээний зүйл 2

Сүлжээний зүйл 3

html

<div class="d-grid gap-3">
  <div class="p-2 bg-light border">Grid item 1</div>
  <div class="p-2 bg-light border">Grid item 2</div>
  <div class="p-2 bg-light border">Grid item 3</div>
</div>

Тусламж нь Bootstrap-ийн бүх сүлжээний таслах цэгүүдийн хариу үйлдэл үзүүлэх сонголтууд, мөн $spacersгазрын зургаас ( 0– 5) зургаан хэмжээсийг агуулдаг. .gap-auto-тэй үр дүнтэй адилхан тул хэрэглээний анги байхгүй .gap-0.

Сасс

Газрын зураг

Зайны хэрэгслүүдийг Sass газрын зургаар зарлаж, дараа нь манай хэрэгслүүдийн API-ээр үүсгэнэ.

$spacer: 1rem;
$spacers: (
  0: 0,
  1: $spacer * .25,
  2: $spacer * .5,
  3: $spacer,
  4: $spacer * 1.5,
  5: $spacer * 3,
);

Utilities API

Spacing хэрэгслүүдийг манай хэрэгслүүдийн API-д зарласан scss/_utilities.scss. API хэрэгслүүдийг хэрхэн ашиглах талаар суралц.

    "margin": (
      responsive: true,
      property: margin,
      class: m,
      values: map-merge($spacers, (auto: auto))
    ),
    "margin-x": (
      responsive: true,
      property: margin-right margin-left,
      class: mx,
      values: map-merge($spacers, (auto: auto))
    ),
    "margin-y": (
      responsive: true,
      property: margin-top margin-bottom,
      class: my,
      values: map-merge($spacers, (auto: auto))
    ),
    "margin-top": (
      responsive: true,
      property: margin-top,
      class: mt,
      values: map-merge($spacers, (auto: auto))
    ),
    "margin-end": (
      responsive: true,
      property: margin-right,
      class: me,
      values: map-merge($spacers, (auto: auto))
    ),
    "margin-bottom": (
      responsive: true,
      property: margin-bottom,
      class: mb,
      values: map-merge($spacers, (auto: auto))
    ),
    "margin-start": (
      responsive: true,
      property: margin-left,
      class: ms,
      values: map-merge($spacers, (auto: auto))
    ),
    // Negative margin utilities
    "negative-margin": (
      responsive: true,
      property: margin,
      class: m,
      values: $negative-spacers
    ),
    "negative-margin-x": (
      responsive: true,
      property: margin-right margin-left,
      class: mx,
      values: $negative-spacers
    ),
    "negative-margin-y": (
      responsive: true,
      property: margin-top margin-bottom,
      class: my,
      values: $negative-spacers
    ),
    "negative-margin-top": (
      responsive: true,
      property: margin-top,
      class: mt,
      values: $negative-spacers
    ),
    "negative-margin-end": (
      responsive: true,
      property: margin-right,
      class: me,
      values: $negative-spacers
    ),
    "negative-margin-bottom": (
      responsive: true,
      property: margin-bottom,
      class: mb,
      values: $negative-spacers
    ),
    "negative-margin-start": (
      responsive: true,
      property: margin-left,
      class: ms,
      values: $negative-spacers
    ),
    // Padding utilities
    "padding": (
      responsive: true,
      property: padding,
      class: p,
      values: $spacers
    ),
    "padding-x": (
      responsive: true,
      property: padding-right padding-left,
      class: px,
      values: $spacers
    ),
    "padding-y": (
      responsive: true,
      property: padding-top padding-bottom,
      class: py,
      values: $spacers
    ),
    "padding-top": (
      responsive: true,
      property: padding-top,
      class: pt,
      values: $spacers
    ),
    "padding-end": (
      responsive: true,
      property: padding-right,
      class: pe,
      values: $spacers
    ),
    "padding-bottom": (
      responsive: true,
      property: padding-bottom,
      class: pb,
      values: $spacers
    ),
    "padding-start": (
      responsive: true,
      property: padding-left,
      class: ps,
      values: $spacers
    ),
    // Gap utility
    "gap": (
      responsive: true,
      property: gap,
      class: gap,
      values: $spacers
    ),