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

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