in English

ໄລຍະຫ່າງ

Bootstrap ປະກອບມີລະດັບຄວາມກວ້າງຂອງຂອບການຕອບສະ ໜອງ ແບບຫຍໍ້, padding, ແລະຊັ້ນປະໂຫຍດຂອງຊ່ອງຫວ່າງເພື່ອດັດແປງຮູບລັກສະນະຂອງອົງປະກອບ.

ໃນໜ້ານີ້

ຂອບແລະ padding

ກຳນົດຄ່າ ທີ່ເປັນມິດກັບຕອບສະໜອງ marginຫຼື paddingຄ່າໃຫ້ກັບອົງປະກອບ ຫຼືສ່ວນຍ່ອຍຂອງດ້ານຂອງມັນດ້ວຍຊັ້ນຮຽນສັ້ນ. ປະກອບມີການສະຫນັບສະຫນູນຄຸນສົມບັດສ່ວນບຸກຄົນ, ຄຸນສົມບັດທັງຫມົດ, ແລະຄຸນສົມບັດຕັ້ງແລະແນວນອນ. ຫ້ອງຮຽນແມ່ນສ້າງຂຶ້ນຈາກແຜນທີ່ Sass ເລີ່ມຕົ້ນຕັ້ງແຕ່ .25remເຖິງ 3rem.

ໃຊ້ໂມດູນ CSS Grid layout? ພິຈາລະນາໃຊ້ ປະໂຫຍດຂອງຊ່ອງຫວ່າງ ແທນ.

ໝາຍເຫດ

Spacing utilities ທີ່ນໍາໃຊ້ກັບ breakpoints ທັງຫມົດ, from xsto xxl, ບໍ່ມີ breakpoint ຫຍໍ້ຢູ່ໃນພວກມັນ. ນີ້ແມ່ນຍ້ອນວ່າຫ້ອງຮຽນເຫຼົ່ານັ້ນຖືກນໍາໃຊ້ຈາກ min-width: 0ແລະຂຶ້ນ, ແລະດັ່ງນັ້ນຈຶ່ງບໍ່ໄດ້ຖືກຜູກມັດໂດຍການສອບຖາມສື່. ຈຸດຢຸດທີ່ຍັງເຫຼືອ, ແນວໃດກໍ່ຕາມ, ລວມມີຕົວຫຍໍ້ຂອງ breakpoint.

ຫ້ອງຮຽນຖືກຕັ້ງຊື່ໂດຍໃຊ້ຮູບແບບ ແລະ {property}{sides}-{size}ສໍາ ລັບ , , , , ແລະ .xs{property}{sides}-{breakpoint}-{size}smmdlgxlxxl

ບ່ອນທີ່ ຊັບສິນ ແມ່ນຫນຶ່ງໃນ:

m- ສໍາລັບຫ້ອງຮຽນທີ່ກໍານົດໄວ້margin
p- ສໍາລັບຫ້ອງຮຽນທີ່ກໍານົດໄວ້padding

ບ່ອນທີ່ ຂ້າງ ແມ່ນຫນຶ່ງໃນ:

t- ສໍາລັບຫ້ອງຮຽນທີ່ກໍານົດໄວ້ margin-topຫຼືpadding-top
b- ສໍາລັບຫ້ອງຮຽນທີ່ກໍານົດໄວ້ margin-bottomຫຼືpadding-bottom
s- (ເລີ່ມຕົ້ນ) ສໍາລັບຫ້ອງຮຽນທີ່ກໍານົດໄວ້ margin-leftຫຼື padding-leftໃນ LTR, margin-rightຫຼື padding-rightໃນ RTL
e- (ສິ້ນສຸດ) ສໍາລັບຫ້ອງຮຽນທີ່ກໍານົດໄວ້ margin-rightຫຼື padding-rightໃນ LTR, margin-leftຫຼື padding-leftໃນ RTL
x- ສໍາລັບຫ້ອງຮຽນທີ່ກໍານົດທັງສອງ *-leftແລະ*-right
y- ສໍາລັບຫ້ອງຮຽນທີ່ກໍານົດທັງສອງ *-topແລະ*-bottom
blank - ສໍາລັບຫ້ອງຮຽນທີ່ກໍານົດ a marginຫຼື paddingທັງຫມົດ 4 ດ້ານຂອງອົງປະກອບ

ບ່ອນທີ່ ຂະຫນາດ ແມ່ນຫນຶ່ງໃນ:

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

.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ແລະ widthຊຸດ - ໂດຍກໍານົດຂອບອອກຕາມລວງນອນເປັນ auto.

ອົງປະກອບກາງ

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

ຂອບທາງລົບ

ໃນ CSS, marginຄຸນສົມບັດສາມາດໃຊ້ຄ່າລົບ ( paddingບໍ່ສາມາດ). ຂອບທາງລົບເຫຼົ່ານີ້ຖືກ ປິດໃຊ້ງານໂດຍຄ່າເລີ່ມຕົ້ນ , ແຕ່ສາມາດເປີດໃຊ້ໄດ້ໃນ Sass ໂດຍການຕັ້ງຄ່າ $enable-negative-margins: true.

syntax ແມ່ນເກືອບຄືກັນກັບຄ່າເລີ່ມຕົ້ນ, ຜົນປະໂຫຍດຂອບທາງບວກ, ແຕ່ມີການເພີ່ມ nກ່ອນຂະຫນາດທີ່ຮ້ອງຂໍ. ນີ້ແມ່ນຫ້ອງຮຽນຕົວຢ່າງທີ່ກົງກັນຂ້າມກັບ .mt-1:

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

ຊ່ອງຫວ່າງ

ເມື່ອໃຊ້ display: grid, ທ່ານສາມາດໃຊ້ອຸ gapປະກອນຕ່າງໆຢູ່ໃນກ່ອງບັນຈຸຕາຂ່າຍໄຟຟ້າແມ່. ນີ້ສາມາດປະຫຍັດໄດ້ດ້ວຍການເພີ່ມຜົນປະໂຫຍດຂອບໃສ່ລາຍການຕາຂ່າຍໄຟຟ້າສ່ວນບຸກຄົນ (ເດັກນ້ອຍຂອງ display: gridຕູ້ຄອນເທນເນີ). Gap utilities ແມ່ນຕອບສະຫນອງໂດຍຄ່າເລີ່ມຕົ້ນ, ແລະຖືກສ້າງຂື້ນຜ່ານ API ຜົນປະໂຫຍດຂອງພວກເຮົາ, ອີງຕາມ $spacersແຜນທີ່ Sass.

ລາຍການຕາຂ່າຍ 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 ແລະຫຼັງຈາກນັ້ນສ້າງຂຶ້ນດ້ວຍ Utilities API ຂອງພວກເຮົາ.

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

Utilities API

ຊ່ອງຫວ່າງ utilities ໄດ້ຖືກປະກາດຢູ່ໃນ utilities 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
    ),