Source

បង្ហាញទ្រព្យសម្បត្តិ

បិទបើកតម្លៃបង្ហាញនៃសមាសធាតុ និងអ្វីៗជាច្រើនទៀតយ៉ាងរហ័ស និងប្រកបដោយការឆ្លើយតបជាមួយនឹងឧបករណ៍ប្រើប្រាស់បង្ហាញរបស់យើង។ រួមបញ្ចូលការគាំទ្រសម្រាប់តម្លៃទូទៅមួយចំនួន ក៏ដូចជាការបន្ថែមមួយចំនួនសម្រាប់ការគ្រប់គ្រងការបង្ហាញនៅពេលបោះពុម្ព។

របៀបដែលវាដំណើរការ

ផ្លាស់ប្តូរតម្លៃនៃ displayអចលនទ្រព្យ ជាមួយនឹងថ្នាក់ឧបករណ៍ប្រើប្រាស់ការបង្ហាញដែលឆ្លើយតបរបស់យើង។ យើងគាំទ្រដោយចេតនាតែសំណុំរងនៃតម្លៃដែលអាចធ្វើបានទាំងអស់សម្រាប់ display. ថ្នាក់អាចត្រូវបានរួមបញ្ចូលគ្នាសម្រាប់ផលប៉ះពាល់ផ្សេងៗតាមដែលអ្នកត្រូវការ។

កំណត់ចំណាំ

បង្ហាញថ្នាក់ឧបករណ៍ប្រើប្រាស់ដែលអនុវត្តចំពោះ ចំណុចឈប់ ទាំងអស់ ពី xsទៅ xlដោយគ្មានអក្សរកាត់ចំណុចឈប់នៅក្នុងពួកវា។ នេះគឺដោយសារតែថ្នាក់ទាំងនោះត្រូវបានអនុវត្តពី min-width: 0;ឡើងលើ ហើយដូច្នេះមិនត្រូវបានចងភ្ជាប់ដោយសំណួរប្រព័ន្ធផ្សព្វផ្សាយទេ។ ទោះជាយ៉ាងណាក៏ដោយ ចំណុចឈប់សម្រាកដែលនៅសល់ រួមបញ្ចូលអក្សរកាត់ចំណុចឈប់។

ដូច្នេះ ថ្នាក់​ត្រូវ​បាន​ដាក់​ឈ្មោះ​តាម​ទម្រង់៖

  • .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-noneclass ឬ .d-{sm,md,lg,xl}-noneclasses សម្រាប់បំរែបំរួលអេក្រង់ឆ្លើយតបណាមួយ។

ដើម្បីបង្ហាញធាតុមួយតែលើចន្លោះពេលនៃទំហំអេក្រង់ប៉ុណ្ណោះ អ្នកអាចផ្សំ .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>