ປ້າຍ

ເອກະສານແລະຕົວຢ່າງສໍາລັບ badges, ຈໍານວນຂະຫນາດນ້ອຍຂອງພວກເຮົາແລະອົງປະກອບການຕິດສະຫຼາກ.

ໃນໜ້ານີ້

ຕົວຢ່າງ

ຂະໜາດຂອງປ້າຍເພື່ອໃຫ້ກົງກັບຂະໜາດຂອງອົງປະກອບຫຼັກໃນທັນທີໂດຍການນຳໃຊ້ຂະໜາດຕົວອັກສອນທີ່ກ່ຽວຂ້ອງ ແລະ emຫົວໜ່ວຍ. ຕັ້ງແຕ່ v5, badges ບໍ່ມີຮູບແບບໂຟກັສ ຫຼື hover styles ສໍາລັບການເຊື່ອມຕໍ່.

ຫົວຂໍ້

ຫົວຂໍ້ຕົວຢ່າງໃຫມ່

<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 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>

ສີພື້ນຫຼັງ

ໃຊ້ຫ້ອງຮຽນຜົນປະໂຫຍດພື້ນຖານຂອງພວກເຮົາເພື່ອປ່ຽນຮູບລັກສະນະຂອງປ້າຍຢ່າງໄວວາ. ກະລຸນາຮັບຊາບວ່າເມື່ອໃຊ້ຄ່າເລີ່ມຕົ້ນຂອງ Bootstrap .bg-light, ເຈົ້າອາດຈະຕ້ອງການເຄື່ອງໃຊ້ສີຂໍ້ຄວາມເຊັ່ນ: .text-darkສໍາລັບການຈັດຮູບແບບທີ່ເຫມາະສົມ. ນີ້ແມ່ນຍ້ອນວ່າອຸປະກອນພື້ນຖານບໍ່ໄດ້ກໍານົດຫຍັງແຕ່ background-color.

ປະຖົມ ມັດທະຍົມ ຄວາມສໍາເລັດ ອັນຕະລາຍ ຄຳເຕືອນ ຂໍ້ມູນ ແສງສະຫວ່າງ ມືດ

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

ບົ່ງບອກຄວາມໝາຍກັບເທັກໂນໂລຍີຊ່ວຍເຫຼືອ

ການນໍາໃຊ້ສີເພື່ອເພີ່ມຄວາມຫມາຍພຽງແຕ່ສະຫນອງການສະແດງໃຫ້ເຫັນ, ທີ່ຈະບໍ່ໄດ້ຮັບການນໍາໃຊ້ເຕັກໂນໂລຊີການຊ່ວຍເຫຼືອ - ເຊັ່ນ: ຕົວອ່ານຫນ້າຈໍ. ໃຫ້ແນ່ໃຈວ່າຂໍ້ມູນທີ່ສະແດງໂດຍສີແມ່ນເຫັນໄດ້ຊັດເຈນຈາກເນື້ອຫາຂອງມັນເອງ (ເຊັ່ນ: ຂໍ້ຄວາມທີ່ເຫັນໄດ້), ຫຼືຖືກລວມຜ່ານວິທີການທາງເລືອກ, ເຊັ່ນ: ຂໍ້ຄວາມເພີ່ມເຕີມທີ່ເຊື່ອງໄວ້ກັບ .visually-hiddenຊັ້ນ.

ປ້າຍຢາ

ໃຊ້ .rounded-pillຫ້ອງຮຽນຜົນປະໂຫຍດເພື່ອເຮັດໃຫ້ປ້າຍເປັນຮູບກົມທີ່ມີຂະຫນາດໃຫຍ່ກວ່າ border-radius.

ປະຖົມ ມັດທະຍົມ ຄວາມສໍາເລັດ ອັນຕະລາຍ ຄຳເຕືອນ ຂໍ້ມູນ ແສງສະຫວ່າງ ມືດ

<span class="badge rounded-pill bg-primary">Primary</span>
<span class="badge rounded-pill bg-secondary">Secondary</span>
<span class="badge rounded-pill bg-success">Success</span>
<span class="badge rounded-pill bg-danger">Danger</span>
<span class="badge rounded-pill bg-warning text-dark">Warning</span>
<span class="badge rounded-pill bg-info text-dark">Info</span>
<span class="badge rounded-pill bg-light text-dark">Light</span>
<span class="badge rounded-pill bg-dark">Dark</span>

ຊາສ

ຕົວແປ

$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;