រំលងទៅមាតិកាសំខាន់ រំលងទៅការរុករកឯកសារ
Check
in English

ផ្លាកសញ្ញា

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

ឧទាហរណ៍

មាត្រដ្ឋានផ្លាកសញ្ញា ដើម្បីផ្គូផ្គងទំហំនៃធាតុមេភ្លាមៗ ដោយប្រើទំហំពុម្ពអក្សរដែលទាក់ទង និង 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ថ្នាក់។

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

ប្រើ .rounded-pillថ្នាក់ឧបករណ៍ប្រើប្រាស់ ដើម្បីធ្វើឱ្យផ្លាកសញ្ញាមានរាងមូលជាងមុនជាមួយនឹងទំហំធំជាង border-radius

បឋមសិក្សា អនុវិទ្យាល័យ ជោគជ័យ គ្រោះថ្នាក់ ការព្រមាន ព័ត៌មាន ពន្លឺ ងងឹត
html
<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;