Source

ໄລຍະຫ່າງ

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

ມັນເຮັດວຽກແນວໃດ

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

ໝາຍເຫດ

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

ຫ້ອງຮຽນຖືກຕັ້ງຊື່ໂດຍໃຊ້ຮູບແບບ ແລະ {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
  • 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;
}

.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, ພວກ​ເຮົາ​ໄດ້​ເພີ່ມ​ຜົນ​ປະ​ໂຫຍດ​ຂອບ​ທາງ​ລົບ​ສໍາ​ລັບ​ທຸກ​ຂະ​ຫນາດ​ຈໍາ​ນວນ​ເຕັມ​ທີ່​ບໍ່​ແມ່ນ​ສູນ​ທີ່​ລະ​ບຸ​ໄວ້​ຂ້າງ​ເທິງ (e.g., 1, 2, , 3, 4, 5). ຜົນປະໂຫຍດເຫຼົ່ານີ້ແມ່ນເຫມາະສົມສໍາລັບການປັບແຕ່ງ gutters ຖັນຕາຂ່າຍໄຟຟ້າໃນທົ່ວ breakpoints.

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

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

ນີ້ແມ່ນຕົວຢ່າງຂອງການປັບແຕ່ງ Bootstrap grid ຢູ່ທີ່ຈຸດແບ່ງຂະໜາດກາງ ( md) ແລະຂ້າງເທິງ. ພວກ​ເຮົາ​ໄດ້​ເພີ່ມ​ທະ​ວີ​ການ .colpadding ກັບ .px-md-5​ແລະ​ຫຼັງ​ຈາກ​ນັ້ນ counteracted ວ່າ​ມີ .mx-md-n5​ກ່ຽວ​ກັບ​ພໍ່​ແມ່ .row.

ແຜ່ນຖັນແບບກຳນົດເອງ
ແຜ່ນຖັນແບບກຳນົດເອງ
<div class="row mx-md-n5">
  <div class="col py-3 px-md-5 border bg-light">Custom column padding</div>
  <div class="col py-3 px-md-5 border bg-light">Custom column padding</div>
</div>