ផ្លាកសញ្ញា
ឯកសារ និងឧទាហរណ៍សម្រាប់ផ្លាកសញ្ញា ការរាប់ចំនួនតូច និងធាតុផ្សំស្លាករបស់យើង។
ឧទាហរណ៍
មាត្រដ្ឋានផ្លាកសញ្ញា ដើម្បីផ្គូផ្គងទំហំនៃធាតុមេភ្លាមៗ ដោយប្រើទំហំពុម្ពអក្សរដែលទាក់ទង និង em
ឯកតា។ ចាប់ពី v5 ផ្លាកសញ្ញាលែងមានរចនាប័ទ្មផ្តោត ឬដាក់លើតំណសម្រាប់តំណទៀតហើយ។
ក្បាល
ឧទាហរណ៍ចំណងជើងថ្មី។
ឧទាហរណ៍ចំណងជើងថ្មី។
ឧទាហរណ៍ចំណងជើងថ្មី។
ឧទាហរណ៍ចំណងជើងថ្មី។
ឧទាហរណ៍ចំណងជើងថ្មី។
ឧទាហរណ៍ចំណងជើងថ្មី។
<h1>Example heading <span class="badge bg-secondary">New</span></h1>
<h2>Example heading <span class="badge bg-secondary">New</span></h2>
<h3>Example heading <span class="badge bg-secondary">New</span></h3>
<h4>Example heading <span class="badge bg-secondary">New</span></h4>
<h5>Example heading <span class="badge bg-secondary">New</span></h5>
<h6>Example heading <span class="badge bg-secondary">New</span></h6>
ប៊ូតុង
ផ្លាកសញ្ញាអាចត្រូវបានប្រើជាផ្នែកនៃតំណភ្ជាប់ ឬប៊ូតុងដើម្បីផ្តល់ការរាប់។
<button type="button" class="btn btn-primary">
Notifications <span class="badge bg-secondary">4</span>
</button>
ចំណាំថាអាស្រ័យលើរបៀបដែលពួកវាត្រូវបានប្រើ ផ្លាកសញ្ញាអាចនឹងមានការភ័ន្តច្រឡំសម្រាប់អ្នកប្រើប្រាស់កម្មវិធីអានអេក្រង់ និងបច្ចេកវិទ្យាជំនួយស្រដៀងគ្នា។ ខណៈពេលដែលរចនាប័ទ្មនៃផ្លាកសញ្ញាផ្តល់នូវសញ្ញាដែលមើលឃើញអំពីគោលបំណងរបស់ពួកគេ អ្នកប្រើប្រាស់ទាំងនេះនឹងត្រូវបានបង្ហាញយ៉ាងសាមញ្ញជាមួយនឹងខ្លឹមសារនៃផ្លាកសញ្ញា។ អាស្រ័យលើស្ថានភាពជាក់លាក់ ផ្លាកសញ្ញាទាំងនេះអាចហាក់ដូចជាពាក្យបន្ថែមចៃដន្យ ឬលេខនៅចុងបញ្ចប់នៃប្រយោគ តំណ ឬប៊ូតុង។
លុះត្រាតែបរិបទច្បាស់លាស់ (ដូចឧទាហរណ៍ "ការជូនដំណឹង" ដែលជាកន្លែងដែលវាត្រូវបានគេយល់ថា "4" គឺជាចំនួននៃការជូនដំណឹង) សូមពិចារណារួមបញ្ចូលបរិបទបន្ថែមជាមួយនឹងបំណែកដែលមើលឃើញនៃអត្ថបទបន្ថែម។
ទីតាំង
ប្រើឧបករណ៍ប្រើប្រាស់ដើម្បីកែប្រែ a .badge
និងកំណត់ទីតាំងវានៅជ្រុងនៃតំណ ឬប៊ូតុង។
<button type="button" class="btn btn-primary position-relative">
Inbox
<span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger">
99+
<span class="visually-hidden">unread messages</span>
</span>
</button>
អ្នកក៏អាចជំនួស .badge
ថ្នាក់ជាមួយនឹងឧបករណ៍ប្រើប្រាស់មួយចំនួនទៀតដោយមិនរាប់បញ្ចូលសូចនាករទូទៅ។
<button type="button" class="btn btn-primary position-relative">
Profile
<span class="position-absolute top-0 start-100 translate-middle p-2 bg-danger border border-light rounded-circle">
<span class="visually-hidden">New alerts</span>
</span>
</button>
ពណ៌ផ្ទៃខាងក្រោយ
ប្រើថ្នាក់ឧបករណ៍ប្រើប្រាស់ផ្ទៃខាងក្រោយរបស់យើងដើម្បីផ្លាស់ប្តូររូបរាងរបស់ផ្លាកសញ្ញាយ៉ាងឆាប់រហ័ស។ សូមចំណាំថានៅពេលប្រើលំនាំដើមរបស់ Bootstrap .bg-light
អ្នកទំនងជាត្រូវការឧបករណ៍ប្រើប្រាស់ពណ៌អត្ថបទដូចជា .text-dark
សម្រាប់ការកំណត់រចនាប័ទ្មត្រឹមត្រូវ។ នេះគឺដោយសារតែឧបករណ៍ប្រើប្រាស់ផ្ទៃខាងក្រោយមិនកំណត់អ្វីទាំងអស់ ប៉ុន្តែ background-color
.
<span class="badge bg-primary">Primary</span>
<span class="badge bg-secondary">Secondary</span>
<span class="badge bg-success">Success</span>
<span class="badge bg-danger">Danger</span>
<span class="badge bg-warning text-dark">Warning</span>
<span class="badge bg-info text-dark">Info</span>
<span class="badge bg-light text-dark">Light</span>
<span class="badge bg-dark">Dark</span>
ការបង្ហាញអត្ថន័យទៅកាន់បច្ចេកវិទ្យាជំនួយ
ការប្រើពណ៌ដើម្បីបន្ថែមអត្ថន័យផ្តល់នូវការចង្អុលបង្ហាញដែលមើលឃើញតែប៉ុណ្ណោះ ដែលនឹងមិនត្រូវបានបញ្ជូនទៅកាន់អ្នកប្រើប្រាស់នៃបច្ចេកវិទ្យាជំនួយ ដូចជាកម្មវិធីអានអេក្រង់ជាដើម។ ត្រូវប្រាកដថាព័ត៌មានដែលតំណាងដោយពណ៌គឺច្បាស់ពីខ្លឹមសារខ្លួនវា (ឧ. អត្ថបទដែលមើលឃើញ) ឬត្រូវបានរួមបញ្ចូលតាមរយៈមធ្យោបាយជំនួស ដូចជាអត្ថបទបន្ថែមដែលលាក់ជាមួយ .visually-hidden
ថ្នាក់។
ផ្លាកសញ្ញាថ្នាំគ្រាប់
ប្រើ .rounded-pill
ថ្នាក់ឧបករណ៍ប្រើប្រាស់ ដើម្បីធ្វើឱ្យផ្លាកសញ្ញាមានរាងមូលជាងមុនជាមួយនឹងទំហំធំជាង border-radius
។
<span class="badge rounded-pill bg-primary">Primary</span>
<span class="badge rounded-pill bg-secondary">Secondary</span>
<span class="badge rounded-pill bg-success">Success</span>
<span class="badge rounded-pill bg-danger">Danger</span>
<span class="badge rounded-pill bg-warning text-dark">Warning</span>
<span class="badge rounded-pill bg-info text-dark">Info</span>
<span class="badge rounded-pill bg-light text-dark">Light</span>
<span class="badge rounded-pill bg-dark">Dark</span>
សាស
អថេរ
$badge-font-size: .75em;
$badge-font-weight: $font-weight-bold;
$badge-color: $white;
$badge-padding-y: .35em;
$badge-padding-x: .65em;
$badge-border-radius: $border-radius;