Bootstrap 5 ການສັງເກດຫົວ

ຫົວຂໍ້

ຫົວຂໍ້ (Badges) ມີຫົວຂໍ້ຕິດຕາມຂໍ້ມູນ:

ໃນ <span> ໃນປະເພດ .badge ປະເພດ ແລະ ປະເພດຕົວເກືອບ ( .bg-secondary）ເພື່ອສ້າງຫົວຂໍ້ຫຼອກຫຼັງ. ບໍ່ວ່າຈະມີຫົວເປັນພາຍໃຕ້ສະຫຼັກແຫ່ງ (ຖ້າມີ):

ຕົວຢ່າງ

<h1>ຄຳວັດຈຳນວນ <span class="badge bg-secondary">ບັນທຶກ</span></h1>
<h2>ຄຳວັດຈຳນວນ <span class="badge bg-secondary">ບັນທຶກ</span></h2>
<h3>ຄຳວັດຈຳນວນ <span class="badge bg-secondary">ບັນທຶກ</span></h3>
<h4>ຄຳວັດຈຳນວນ <span class="badge bg-secondary">ບັນທຶກ</span></h4>
<h5>ຄຳວັດຈຳນວນ <span class="badge bg-secondary">ບັນທຶກ</span></h5>
<h6>ຄຳວັດຈຳນວນ <span class="badge bg-secondary">ບັນທຶກ</span></h6>

ທົດລອງດ້ວຍຕົວເອງ

ຫົວຂໍ້ຕົວເກືອບ

ກະລຸນາໃຊ້ປະເພດບັນດາຄຳໃນຕົວເກືອບ (.bg-*) ປ່ຽນສະຫຼັກສີຂອງຫົວຂໍ້:

ຕົວຢ່າງ

<span class="badge bg-primary">ຫຼັກ</span>
<span class="badge bg-secondary">ລຸ່ມ</span>
<span class="badge bg-success">ສຳເລັດ</span>
<span class="badge bg-danger">ຄວາມອັນຕະລາຍ</span>
<span class="badge bg-warning">ການເເວະ</span>
<span class="badge bg-info">ຂໍ້ມູນ</span>
<span class="badge bg-light">ສີເພີງ</span>
<span class="badge bg-dark">ສີຫຼັກ</span>

ທົດລອງດ້ວຍຕົວເອງ

ຫຼັກສັດສະໜອງຕົວລົງ

ນຳໃຊ້ .rounded-pill ນຳໃຊ້ນັກວັດທະນະທຳເພີ່ມຄວາມຫຼຸດລົງຂອງຫຼັກສັດ:

ຕົວຢ່າງ

<span class="badge rounded-pill bg-primary">ສະຖິນະຫຼັກ</span>
<span class="badge rounded-pill bg-secondary">ສະຖິນະອັນຕະລາຍ</span>
<span class="badge rounded-pill bg-success">ສຳເລັດ</span>
<span class="badge rounded-pill bg-danger">ຄວາມອັນຕະລາຍ</span>
<span class="badge rounded-pill bg-warning">ການເເວະ</span>
<span class="badge rounded-pill bg-info">ຂໍ້ມູນ</span>
<span class="badge rounded-pill bg-light">ສີເພີງ</span>
<span class="badge rounded-pill bg-dark">ສີຫຼັກ</span>

ທົດລອງດ້ວຍຕົວເອງ

ຫຼັກສັດກັບກາກ

ຕົວຢ່າງການໃຊ້ຫຼັກສັດໃນຫຼັກສັດ:

ຕົວຢ່າງ

<button type="button" class="btn btn-primary">
  ຂໍ້ຄວາມ <span class="badge bg-danger">4</span>
</button>

ທົດລອງດ້ວຍຕົວເອງ