Source

ປ້າຍ

ເອກະສານແລະຕົວຢ່າງສໍາລັບ 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>