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

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

នៅលើទំព័រនេះ។

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

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

កំណត់ចំណាំ

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

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

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

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

ឧបករណ៍ប្រើប្រាស់បង្ហាញត្រូវបានប្រកាសនៅក្នុង utilities API របស់យើងនៅក្នុង scss/_utilities.scss. ស្វែងយល់ពីរបៀបប្រើប្រាស់ Utilities 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
    ),