បង្ហាញទ្រព្យសម្បត្តិ
បិទបើកតម្លៃបង្ហាញនៃសមាសធាតុ និងអ្វីៗជាច្រើនទៀតយ៉ាងរហ័ស និងប្រកបដោយការឆ្លើយតបជាមួយនឹងឧបករណ៍ប្រើប្រាស់បង្ហាញរបស់យើង។ រួមបញ្ចូលការគាំទ្រសម្រាប់តម្លៃទូទៅមួយចំនួន ក៏ដូចជាការបន្ថែមមួយចំនួនសម្រាប់ការគ្រប់គ្រងការបង្ហាញនៅពេលបោះពុម្ព។
របៀបដែលវាដំណើរការ
ផ្លាស់ប្តូរតម្លៃនៃ 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
តម្លៃបង្ហាញអាចត្រូវបានផ្លាស់ប្តូរដោយការផ្លាស់ប្តូរ $displays
អថេរ និងចងក្រង SCSS ឡើងវិញ។
សំណួរប្រព័ន្ធផ្សព្វផ្សាយប៉ះពាល់ដល់ទទឹងអេក្រង់ជាមួយនឹងចំណុចឈប់ដែលបានផ្តល់ឱ្យ ឬធំជាងនេះ ។ ឧទាហរណ៍ .d-lg-none
កំណត់ display: none;
លើ អេក្រង់ lg
ទាំងពីរ ។xl
ឧទាហរណ៍
<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>
<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
class ឬ .d-{sm,md,lg,xl}-none
classes សម្រាប់បំរែបំរួលអេក្រង់ឆ្លើយតបណាមួយ។
ដើម្បីបង្ហាញធាតុមួយតែលើចន្លោះពេលនៃទំហំអេក្រង់ប៉ុណ្ណោះ អ្នកអាចផ្សំ .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 |
<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-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>