ផ្លាកសញ្ញា

ឯកសារ និងឧទាហរណ៍សម្រាប់ផ្លាកសញ្ញា ការរាប់ចំនួនតូច និងធាតុផ្សំស្លាករបស់យើង។

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

ឧទាហរណ៍

មាត្រដ្ឋានផ្លាកសញ្ញា ដើម្បីផ្គូផ្គងទំហំនៃធាតុមេភ្លាមៗ ដោយប្រើទំហំពុម្ពអក្សរដែលទាក់ទង និង emឯកតា។ ចាប់ពី v5 ផ្លាកសញ្ញាលែងមានរចនាប័ទ្មផ្តោត ឬដាក់លើតំណសម្រាប់តំណទៀតហើយ។

ក្បាល

ឧទាហរណ៍ចំណងជើងថ្មី។

html

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

ប៊ូតុង

ផ្លាកសញ្ញាអាចត្រូវបានប្រើជាផ្នែកនៃតំណភ្ជាប់ ឬប៊ូតុងដើម្បីផ្តល់ការរាប់។

html

<button type="button" class="btn btn-primary">
  Notifications <span class="badge text-bg-secondary">4</span>
</button>

ចំណាំថាអាស្រ័យលើរបៀបដែលពួកវាត្រូវបានប្រើ ផ្លាកសញ្ញាអាចនឹងមានការភ័ន្តច្រឡំសម្រាប់អ្នកប្រើប្រាស់កម្មវិធីអានអេក្រង់ និងបច្ចេកវិទ្យាជំនួយស្រដៀងគ្នា។ ខណៈពេលដែលរចនាប័ទ្មនៃផ្លាកសញ្ញាផ្តល់នូវសញ្ញាដែលមើលឃើញអំពីគោលបំណងរបស់ពួកគេ អ្នកប្រើប្រាស់ទាំងនេះនឹងត្រូវបានបង្ហាញយ៉ាងសាមញ្ញជាមួយនឹងខ្លឹមសារនៃផ្លាកសញ្ញា។ អាស្រ័យលើស្ថានភាពជាក់លាក់ ផ្លាកសញ្ញាទាំងនេះអាចហាក់ដូចជាពាក្យបន្ថែមចៃដន្យ ឬលេខនៅចុងបញ្ចប់នៃប្រយោគ តំណ ឬប៊ូតុង។

លុះត្រាតែបរិបទច្បាស់លាស់ (ដូចឧទាហរណ៍ "ការជូនដំណឹង" ដែលជាកន្លែងដែលវាត្រូវបានគេយល់ថា "4" គឺជាចំនួននៃការជូនដំណឹង) សូមពិចារណារួមបញ្ចូលបរិបទបន្ថែមជាមួយនឹងបំណែកដែលមើលឃើញនៃអត្ថបទបន្ថែម។

ទីតាំង

ប្រើឧបករណ៍ប្រើប្រាស់ដើម្បីកែប្រែ a .badgeនិងកំណត់ទីតាំងវានៅជ្រុងនៃតំណ ឬប៊ូតុង។

html

<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ថ្នាក់ជាមួយនឹងឧបករណ៍ប្រើប្រាស់មួយចំនួនទៀតដោយមិនរាប់បញ្ចូលសូចនាករទូទៅ។

html

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

ពណ៌ផ្ទៃខាងក្រោយ

បានបន្ថែមនៅក្នុង v5.2.0

កំណត់ background-colorផ្ទៃខាងមុខផ្ទុយគ្នា colorជាមួយ អ្នកជំនួយ របស់យើង.text-bg-{color} ។ ពីមុនវាត្រូវបានទាមទារដើម្បីផ្គូផ្គងជម្រើសរបស់អ្នកដោយដៃ .text-{color}និង .bg-{color}ឧបករណ៍ប្រើប្រាស់សម្រាប់រចនាប័ទ្ម ដែលអ្នកនៅតែអាចប្រើប្រសិនបើអ្នកចង់បាន។

បឋមសិក្សា អនុវិទ្យាល័យ ជោគជ័យ គ្រោះថ្នាក់ ការព្រមាន ព័ត៌មាន ពន្លឺ ងងឹត

html

<span class="badge text-bg-primary">Primary</span>
<span class="badge text-bg-secondary">Secondary</span>
<span class="badge text-bg-success">Success</span>
<span class="badge text-bg-danger">Danger</span>
<span class="badge text-bg-warning">Warning</span>
<span class="badge text-bg-info">Info</span>
<span class="badge text-bg-light">Light</span>
<span class="badge text-bg-dark">Dark</span>

ការបង្ហាញអត្ថន័យទៅកាន់បច្ចេកវិទ្យាជំនួយ

ការប្រើពណ៌ដើម្បីបន្ថែមអត្ថន័យផ្តល់នូវការចង្អុលបង្ហាញដែលមើលឃើញតែប៉ុណ្ណោះ ដែលនឹងមិនត្រូវបានបញ្ជូនទៅកាន់អ្នកប្រើប្រាស់នៃបច្ចេកវិទ្យាជំនួយ ដូចជាកម្មវិធីអានអេក្រង់ជាដើម។ ត្រូវប្រាកដថាព័ត៌មានដែលតំណាងដោយពណ៌គឺច្បាស់ពីខ្លឹមសារខ្លួនវា (ឧ. អត្ថបទដែលមើលឃើញ) ឬត្រូវបានរួមបញ្ចូលតាមរយៈមធ្យោបាយជំនួស ដូចជាអត្ថបទបន្ថែមដែលលាក់ជាមួយ .visually-hiddenថ្នាក់។