ປ້າຍ

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

ໃນໜ້ານີ້

ຕົວຢ່າງ

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

ຫົວຂໍ້

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

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ກັບ foreground ກົງກັນຂ້າມ 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, badges ໃຊ້ຕົວແປ 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;