ປ້າຍ
ເອກະສານແລະຕົວຢ່າງສໍາລັບ badges, ຈໍານວນຂະຫນາດນ້ອຍຂອງພວກເຮົາແລະອົງປະກອບການຕິດສະຫຼາກ.
ຂະໜາດຂອງປ້າຍເພື່ອໃຫ້ກົງກັບຂະໜາດຂອງອົງປະກອບຫຼັກໃນທັນທີໂດຍການນຳໃຊ້ຂະໜາດຕົວອັກສອນທີ່ກ່ຽວຂ້ອງ ແລະ 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ຕົວແກ້ໄຂເພື່ອເຮັດໃຫ້ປ້າຍເປັນຮູບກົມກວ່າ (ມີຂະໜາດໃຫຍ່ກວ່າ border-radiusແລະແນວນອນເພີ່ມເຕີມ padding). ເປັນປະໂຫຍດຖ້າທ່ານພາດປ້າຍຈາກ v3.
<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>