ផ្លាកសញ្ញា
ឯកសារ និងឧទាហរណ៍សម្រាប់ផ្លាកសញ្ញា ការរាប់ចំនួនតូច និងធាតុផ្សំស្លាករបស់យើង។
ឧទាហរណ៍
មាត្រដ្ឋានផ្លាកសញ្ញា ដើម្បីផ្គូផ្គងទំហំនៃធាតុមេភ្លាមៗ ដោយប្រើទំហំពុម្ពអក្សរដែលទាក់ទង និង 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 text-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>
ពណ៌ផ្ទៃខាងក្រោយ
បានបន្ថែមនៅក្នុង v5.2.0កំណត់ background-color
ផ្ទៃខាងមុខផ្ទុយគ្នា color
ជាមួយ អ្នកជំនួយ របស់យើង.text-bg-{color}
។ ពីមុនវាត្រូវបានទាមទារដើម្បីផ្គូផ្គងជម្រើសរបស់អ្នកដោយដៃ .text-{color}
និង .bg-{color}
ឧបករណ៍ប្រើប្រាស់សម្រាប់រចនាប័ទ្ម ដែលអ្នកនៅតែអាចប្រើប្រសិនបើអ្នកចង់បាន។
<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
ថ្នាក់។
ផ្លាកសញ្ញាថ្នាំគ្រាប់
ប្រើ .rounded-pill
ថ្នាក់ឧបករណ៍ប្រើប្រាស់ ដើម្បីធ្វើឱ្យផ្លាកសញ្ញាមានរាងមូលជាងមុនជាមួយនឹងទំហំធំជាង border-radius
។
<span class="badge rounded-pill text-bg-primary">Primary</span>
<span class="badge rounded-pill text-bg-secondary">Secondary</span>
<span class="badge rounded-pill text-bg-success">Success</span>
<span class="badge rounded-pill text-bg-danger">Danger</span>
<span class="badge rounded-pill text-bg-warning">Warning</span>
<span class="badge rounded-pill text-bg-info">Info</span>
<span class="badge rounded-pill text-bg-light">Light</span>
<span class="badge rounded-pill text-bg-dark">Dark</span>
CSS
អថេរ
បានបន្ថែមនៅក្នុង v5.2.0ជាផ្នែកមួយនៃវិធីសាស្រ្តអថេរ CSS ដែលកំពុងវិវឌ្ឍន៍របស់ Bootstrap ផ្លាកសញ្ញាឥឡូវនេះប្រើអថេរ CSS មូលដ្ឋាន .badge
សម្រាប់ការកែលម្អតាមពេលវេលាជាក់ស្តែង។ តម្លៃសម្រាប់អថេរ CSS ត្រូវបានកំណត់តាមរយៈ Sass ដូច្នេះការប្ដូរតាមបំណង Sass នៅតែត្រូវបានគាំទ្រផងដែរ។
--#{$prefix}badge-padding-x: #{$badge-padding-x};
--#{$prefix}badge-padding-y: #{$badge-padding-y};
@include rfs($badge-font-size, --#{$prefix}badge-font-size);
--#{$prefix}badge-font-weight: #{$badge-font-weight};
--#{$prefix}badge-color: #{$badge-color};
--#{$prefix}badge-border-radius: #{$badge-border-radius};
អថេរ Sass
$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;