ສະແດງຊັບສິນ

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

ໃນໜ້ານີ້

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

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

ໝາຍເຫດ

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

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

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

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

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

ມູນຄ່າການສະແດງສາມາດປ່ຽນແປງໄດ້ໂດຍການປ່ຽນ displayຄ່າທີ່ກໍານົດໄວ້ໃນ $utilitiesແລະລວບລວມ SCSS.

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

ຕົວຢ່າງ

d-inline

html

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

d-block d-block

html

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

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

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

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

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

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

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

html

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

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

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

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

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

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

html

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

ຊາສ

Utilities API

ການສະແດງຜົນປະໂຍດໄດ້ຖືກປະກາດຢູ່ໃນ API ຜົນປະໂຫຍດຂອງພວກເຮົາໃນ scss/_utilities.scss. ຮຽນຮູ້ວິທີການນໍາໃຊ້ API ຜົນປະໂຫຍດ.

    "display": (
      responsive: true,
      print: true,
      property: display,
      class: d,
      values: inline inline-block block grid table table-row table-cell flex inline-flex none
    ),