Source

ផ្លាកសញ្ញា

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

ឧទាហរណ៍

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

ឧទាហរណ៍ចំណងជើង ថ្មី។
ឧទាហរណ៍ចំណងជើង ថ្មី។
ឧទាហរណ៍ចំណងជើង ថ្មី។
ឧទាហរណ៍ចំណងជើង ថ្មី។
ឧទាហរណ៍ចំណងជើង ថ្មី។
ឧទាហរណ៍ចំណងជើង ថ្មី។
<h1>Example heading <span class="badge badge-secondary">New</span></h1>
<h2>Example heading <span class="badge badge-secondary">New</span></h2>
<h3>Example heading <span class="badge badge-secondary">New</span></h3>
<h4>Example heading <span class="badge badge-secondary">New</span></h4>
<h5>Example heading <span class="badge badge-secondary">New</span></h5>
<h6>Example heading <span class="badge badge-secondary">New</span></h6>

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

<button type="button" class="btn btn-primary">
  Notifications <span class="badge badge-light">4</span>
</button>

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

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

<button type="button" class="btn btn-primary">
  Profile <span class="badge badge-light">9</span>
  <span class="sr-only">unread messages</span>
</button>

ការប្រែប្រួលតាមបរិបទ

បន្ថែមថ្នាក់កែប្រែណាមួយដែលបានរៀបរាប់ខាងក្រោម ដើម្បីផ្លាស់ប្តូររូបរាងរបស់ផ្លាកសញ្ញា។

បឋមសិក្សា អនុវិទ្យាល័យ ជោគជ័យ គ្រោះថ្នាក់ ការព្រមាន ព័ត៌មាន ពន្លឺ ងងឹត
<span class="badge badge-primary">Primary</span>
<span class="badge badge-secondary">Secondary</span>
<span class="badge badge-success">Success</span>
<span class="badge badge-danger">Danger</span>
<span class="badge badge-warning">Warning</span>
<span class="badge badge-info">Info</span>
<span class="badge badge-light">Light</span>
<span class="badge badge-dark">Dark</span>
ការ​បង្ហាញ​អត្ថន័យ​ទៅ​កាន់​បច្ចេកវិទ្យា​ជំនួយ

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

ផ្លាកសញ្ញាថ្នាំគ្រាប់

ប្រើ ​ថ្នាក់​កែប្រែ​ដើម្បី​ធ្វើ​ឱ្យ​ផ្លាកសញ្ញា​រាង​មូល​ជាងមុន (ជាមួយ​នឹង ​ផ្ដេក .badge-pill​ធំជាង និង​បន្ថែម )។ មានប្រយោជន៍ប្រសិនបើអ្នកនឹកផ្លាកសញ្ញាពី v3.border-radiuspadding

បឋមសិក្សា អនុវិទ្យាល័យ ជោគជ័យ គ្រោះថ្នាក់ ការព្រមាន ព័ត៌មាន ពន្លឺ ងងឹត
<span class="badge badge-pill badge-primary">Primary</span>
<span class="badge badge-pill badge-secondary">Secondary</span>
<span class="badge badge-pill badge-success">Success</span>
<span class="badge badge-pill badge-danger">Danger</span>
<span class="badge badge-pill badge-warning">Warning</span>
<span class="badge badge-pill badge-info">Info</span>
<span class="badge badge-pill badge-light">Light</span>
<span class="badge badge-pill badge-dark">Dark</span>

ការប្រើប្រាស់ថ្នាក់បរិបទ .badge-*នៅលើ <a>ធាតុមួយផ្តល់នូវស្លាកសញ្ញាដែលអាចធ្វើសកម្មភាពបានយ៉ាងឆាប់រហ័ស ជាមួយនឹង ស្ថានភាពដាក់លើ និងផ្តោត។

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