Source

ສະແດງຊັບສິນ

ສະຫຼັບຄ່າການສະແດງຜົນຂອງອົງປະກອບ ແລະອື່ນໆອີກຢ່າງວ່ອງໄວ ແລະຕອບສະໜອງໄດ້ດ້ວຍອຸປະກອນການສະແດງຜົນຂອງພວກເຮົາ. ລວມມີການສະຫນັບສະຫນູນສໍາລັບບາງຄ່າທົ່ວໄປ, ເຊັ່ນດຽວກັນກັບບາງສ່ວນເພີ່ມເຕີມສໍາລັບການຄວບຄຸມການສະແດງໃນເວລາທີ່ພິມ.

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

ປ່ຽນມູນຄ່າຂອງ displayຊັບສິນ ດ້ວຍຫ້ອງຮຽນຜົນປະໂຫຍດການສະແດງຜົນຂອງພວກເຮົາ. ພວກເຮົາຕັ້ງໃຈສະຫນັບສະຫນູນພຽງແຕ່ຊຸດຍ່ອຍຂອງມູນຄ່າທີ່ເປັນໄປໄດ້ທັງຫມົດສໍາລັບ display. ຫ້ອງຮຽນສາມາດຖືກລວມເຂົ້າກັນສໍາລັບຜົນກະທົບຕ່າງໆຕາມທີ່ທ່ານຕ້ອງການ.

ໝາຍເຫດ

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

ດັ່ງນັ້ນ, ຫ້ອງຮຽນຖືກຕັ້ງຊື່ໂດຍໃຊ້ຮູບແບບ:

  • .d-{value}ສໍາລັບxs
  • .d-{breakpoint}-{value}ສໍາລັບ sm, md, lg, ແລະ xl.

ບ່ອນທີ່ ມູນຄ່າ ແມ່ນຫນຶ່ງໃນ:

  • none
  • inline
  • inline-block
  • block
  • table
  • table-cell
  • table-row
  • flex
  • inline-flex

ການສອບຖາມສື່ມີຜົນຕໍ່ຄວາມກວ້າງຂອງໜ້າຈໍດ້ວຍຈຸດແບ່ງທີ່ໃຫ້ ຫຼືໃຫຍ່ກວ່າ . ຕົວຢ່າງ, .d-lg-noneກໍານົດ display: none;ຢູ່ໃນທັງສອງ lgແລະ xlຫນ້າຈໍ.

ຕົວຢ່າງ

d-inline
d-inline
<div class="d-inline p-2 bg-primary text-white">d-inline</div>
<div class="d-inline p-2 bg-dark text-white">d-inline</div>
d-block d-block
<span class="d-block p-2 bg-primary text-white">d-block</span>
<span class="d-block p-2 bg-dark text-white">d-block</span>

ເຊື່ອງອົງປະກອບ

ສໍາລັບການພັດທະນາທີ່ເປັນມິດກັບມືຖືໄດ້ໄວຂຶ້ນ, ໃຫ້ໃຊ້ຫ້ອງຮຽນການສະແດງຜົນທີ່ຕອບສະໜອງສໍາລັບການສະແດງ ແລະເຊື່ອງອົງປະກອບຕາມອຸປະກອນ. ຫຼີກເວັ້ນການສ້າງສະບັບທີ່ແຕກຕ່າງກັນທັງຫມົດຂອງເວັບໄຊທ໌ດຽວກັນ, ແທນທີ່ຈະເຊື່ອງອົງປະກອບທີ່ຕອບສະຫນອງສໍາລັບແຕ່ລະຂະຫນາດຫນ້າຈໍ.

ເພື່ອເຊື່ອງອົງປະກອບພຽງແຕ່ໃຊ້ .d-noneຊັ້ນຮຽນຫຼືຫນຶ່ງໃນ .d-{sm,md,lg,xl}-noneຊັ້ນຮຽນສໍາລັບການປ່ຽນແປງຫນ້າຈໍທີ່ຕອບສະຫນອງ.

ເພື່ອສະແດງອົງປະກອບພຽງແຕ່ໃນໄລຍະຫ່າງຂອງຂະຫນາດຫນ້າຈໍທີ່ທ່ານສາມາດລວມ .d-*-noneຊັ້ນຫນຶ່ງກັບ .d-*-*ຊັ້ນ, ຕົວຢ່າງ .d-none .d-md-block .d-xl-noneຈະເຊື່ອງອົງປະກອບສໍາລັບຂະຫນາດຫນ້າຈໍທັງຫມົດຍົກເວັ້ນອຸປະກອນຂະຫນາດກາງແລະຂະຫນາດໃຫຍ່.

ຂະໜາດໜ້າຈໍ ຫ້ອງຮຽນ
ເຊື່ອງຢູ່ທັງໝົດ .d-none
ເຊື່ອງໄວ້ພຽງແຕ່ໃນ xs .d-none .d-sm-block
ເຊື່ອງໄວ້ພຽງແຕ່ໃນ sm .d-sm-none .d-md-block
ເຊື່ອງໄວ້ພຽງແຕ່ໃນ md .d-md-none .d-lg-block
ເຊື່ອງໄວ້ພຽງແຕ່ໃນ lg .d-lg-none .d-xl-block
ເຊື່ອງໄວ້ພຽງແຕ່ໃນ xl .d-xl-none
ເຫັນໄດ້ໃນທັງໝົດ .d-block
ເຫັນໄດ້ສະເພາະໃນ xs .d-block .d-sm-none
ເຫັນໄດ້ໃນ sm .d-none .d-sm-block .d-md-none
ເຫັນໄດ້ໃນ md .d-none .d-md-block .d-lg-none
ເຫັນໄດ້ໃນ lg .d-none .d-lg-block .d-xl-none
ເຫັນໄດ້ໃນ xl .d-none .d-xl-block
hide on screens wider than lg
ເຊື່ອງຢູ່ໃນຫນ້າຈໍທີ່ນ້ອຍກວ່າ lg
<div class="d-lg-none">hide on screens wider than lg</div>
<div class="d-none d-lg-block">hide on screens smaller than lg</div>

ສະແດງຢູ່ໃນພິມ

ປ່ຽນ displayຄ່າຂອງອົງປະກອບໃນເວລາທີ່ພິມດ້ວຍຫ້ອງຮຽນຜົນປະໂຫຍດການສະແດງຜົນການພິມຂອງພວກເຮົາ. ລວມມີການສະຫນັບສະຫນູນສໍາລັບ displayຄຸນຄ່າ ດຽວກັນກັບຜົນ .d-*ປະໂຫຍດທີ່ຕອບສະຫນອງຂອງພວກເຮົາ.

  • .d-print-none
  • .d-print-inline
  • .d-print-inline-block
  • .d-print-block
  • .d-print-table
  • .d-print-table-row
  • .d-print-table-cell
  • .d-print-flex
  • .d-print-inline-flex

ຫ້ອງຮຽນພິມແລະການສະແດງສາມາດຖືກລວມເຂົ້າກັນ.

ໜ້າຈໍເທົ່ານັ້ນ (ເຊື່ອງການພິມເທົ່ານັ້ນ)
Print Only (Hide on screen only)
ເຊື່ອງເຖິງຂະໜາດໃຫຍ່ໃນໜ້າຈໍ, ແຕ່ສະແດງຢູ່ໃນການພິມສະເໝີ
<div class="d-print-none">Screen Only (Hide on print only)</div>
<div class="d-none d-print-block">Print Only (Hide on screen only)</div>
<div class="d-none d-lg-block d-print-block">Hide up to large on screen, but always show on print</div>