ສະແດງຊັບສິນ

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

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

ປ່ຽນມູນຄ່າຂອງ 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

ຄ່າການສະແດງສາມາດປ່ຽນແປງໄດ້ໂດຍການປ່ຽນ $displaysຕົວແປແລະການລວບລວມ SCSS.

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

ຕົວຢ່າງ

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`

ເຊື່ອງຢູ່ໃນ lg ແລະຫນ້າຈໍທີ່ກວ້າງກວ່າ

ເຊື່ອງຢູ່ໃນຫນ້າຈໍທີ່ນ້ອຍກວ່າ lg

<div class="d-lg-none">hide on lg and wider screens</div>
<div class="d-none d-lg-block">hide on screens smaller than lg</div>

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

ປ່ຽນ displayຄ່າຂອງອົງປະກອບໃນເວລາພິມດ້ວຍຫ້ອງຮຽນ utility 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

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

ໜ້າຈໍເທົ່ານັ້ນ (ເຊື່ອງຢູ່ໃນການພິມເທົ່ານັ້ນ)

ພິມເທົ່ານັ້ນ (ເຊື່ອງໃນໜ້າຈໍເທົ່ານັ້ນ)

ເຊື່ອງເຖິງຂະໜາດໃຫຍ່ໃນໜ້າຈໍ, ແຕ່ສະແດງຢູ່ໃນການພິມສະເໝີ

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