ໄລຍະຫ່າງ
Bootstrap ປະກອບມີລະດັບຄວາມກວ້າງຂອງຂອບການຕອບສະ ໜອງ ແບບຫຍໍ້, padding, ແລະຊັ້ນປະໂຫຍດຂອງຊ່ອງຫວ່າງເພື່ອດັດແປງຮູບລັກສະນະຂອງອົງປະກອບ.
ຂອບແລະ padding
ກຳນົດຄ່າ ທີ່ເປັນມິດກັບຕອບສະໜອງ margin
ຫຼື padding
ຄ່າໃຫ້ກັບອົງປະກອບ ຫຼືສ່ວນຍ່ອຍຂອງດ້ານຂອງມັນດ້ວຍຊັ້ນຮຽນສັ້ນ. ປະກອບມີການສະຫນັບສະຫນູນຄຸນສົມບັດສ່ວນບຸກຄົນ, ຄຸນສົມບັດທັງຫມົດ, ແລະຄຸນສົມບັດຕັ້ງແລະແນວນອນ. ຫ້ອງຮຽນແມ່ນສ້າງຂຶ້ນຈາກແຜນທີ່ Sass ເລີ່ມຕົ້ນຕັ້ງແຕ່ .25rem
ເຖິງ 3rem
.
ໃຊ້ໂມດູນ CSS Grid layout? ພິຈາລະນານໍາໃຊ້ ປະໂຫຍດຂອງຊ່ອງຫວ່າງ .
ໝາຍເຫດ
Spacing utilities ທີ່ນໍາໃຊ້ກັບ breakpoints ທັງຫມົດ, from xs
to xxl
, ບໍ່ມີ breakpoint ຫຍໍ້ຢູ່ໃນພວກມັນ. ນີ້ແມ່ນຍ້ອນວ່າຫ້ອງຮຽນເຫຼົ່ານັ້ນຖືກນໍາໃຊ້ຈາກ min-width: 0
ແລະຂຶ້ນ, ແລະດັ່ງນັ້ນຈຶ່ງບໍ່ໄດ້ຖືກຜູກມັດໂດຍການສອບຖາມສື່. ຈຸດຢຸດທີ່ຍັງເຫຼືອ, ແນວໃດກໍ່ຕາມ, ລວມມີຕົວຫຍໍ້ຂອງ breakpoint.
ຫ້ອງຮຽນຖືກຕັ້ງຊື່ໂດຍໃຊ້ຮູບແບບ ແລະ {property}{sides}-{size}
ສໍາ ລັບ , , , , ແລະ .xs
{property}{sides}-{breakpoint}-{size}
sm
md
lg
xl
xxl
ບ່ອນທີ່ ຊັບສິນ ແມ່ນຫນຶ່ງໃນ:
m
- ສໍາລັບຫ້ອງຮຽນທີ່ກໍານົດໄວ້margin
p
- ສໍາລັບຫ້ອງຮຽນທີ່ກໍານົດໄວ້padding
ບ່ອນທີ່ ຂ້າງ ແມ່ນຫນຶ່ງໃນ:
t
- ສໍາລັບຫ້ອງຮຽນທີ່ກໍານົດໄວ້margin-top
ຫຼືpadding-top
b
- ສໍາລັບຫ້ອງຮຽນທີ່ກໍານົດໄວ້margin-bottom
ຫຼືpadding-bottom
s
- (ເລີ່ມຕົ້ນ) ສໍາລັບຫ້ອງຮຽນທີ່ກໍານົດໄວ້margin-left
ຫຼືpadding-left
ໃນ LTR,margin-right
ຫຼືpadding-right
ໃນ RTLe
- (ສິ້ນສຸດ) ສໍາລັບຫ້ອງຮຽນທີ່ກໍານົດໄວ້margin-right
ຫຼືpadding-right
ໃນ LTR,margin-left
ຫຼືpadding-left
ໃນ RTLx
- ສໍາລັບຫ້ອງຮຽນທີ່ກໍານົດທັງສອງ*-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 utilities ຂອງພວກເຮົາ, ອີງຕາມ $spacers
ແຜນທີ່ Sass.
<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,
);
$negative-spacers: if($enable-negative-margins, negativify-map($spacers), null);
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
),