Bootstrap 5 ກະບຸກກຸ່ມ

ກຸ່ມບຸກ

Bootstrap 5 ອະນຸຍາດໃຫ້ທ່ານຈະຈັດກຸ່ມບຸກຫຼາຍລູກຄືນນຳມາໃນເຫດການຫົວໜ້າ(ໃນເວລາກາງເປັນໜຶ່ງຫົວໜ້າ):

ບໍ່ມີການນໍາໃຊ້ .btn-group ຄວາມ <div> ປະກອບສິ່ງເປັນປະກອບສິ່ງທີ່ສ້າງກຸ່ມບຸກ:

ຕົວຢ່າງ

<div class="btn-group">
  <button type="button" class="btn btn-primary">ຫົວຫລວງ</button>
  <button type="button" class="btn btn-primary">ດາວ</button>
  <button type="button" class="btn btn-primary">ວຽງນິຍົມ</button>
</div>

ທ້າທາຍຄັບຄາວເອງ

ຂໍ້ສັງເກດ:ບໍ່ຕ້ອງມີຂະໜາດບຸກສະຫຼົກຢູ່ໃນແຕ່ລະບຸກໃນກຸ່ມ .btn-group-lg ສະແຫວງການບຸກສະຫຼົກໃຫຍ່ຫຼືຈະ .btn-group-sm ສະແຫວງການບຸກສະຫຼົກນ້ອຍ:

ຕົວຢ່າງ

<div class="btn-group btn-group-lg">
  <button type="button" class="btn btn-primary">ຫົວຫລວງ</button>
  <button type="button" class="btn btn-primary">ດາວ</button>
  <button type="button" class="btn btn-primary">ວຽງນິຍົມ</button>
</div>

ທ້າທາຍຄັບຄາວເອງ

ກຸ່ມກັບສັດຍັດທີ່ຕາມກັນ

Bootstrap 5 ຍັງສະໜັບສະໜູນກຸ່ມກັບສັດຍັດທີ່ຕາມກັນ:

ກະນາດການໃຊ້ນາມ .btn-group-vertical ສ້າງກຸ່ມກັບສັດຍັດທີ່ຕາມກັນ:

ຕົວຢ່າງ

<div class="btn-group-vertical">
  <button type="button" class="btn btn-primary">ຫົວຫລວງ</button>
  <button type="button" class="btn btn-primary">ດາວ</button>
  <button type="button" class="btn btn-primary">ວຽງນິຍົມ</button>
</div>

ທ້າທາຍຄັບຄາວເອງ

ກຸ່ມກັບສັດຍັດສະແດງຕິດຕາມກັນ

ໂດຍຜົນຕໍ່ຕ້ອງທີ່ມີ, ກຸ່ມກັບສັດຍັດແມ່ນ "inline", ຖ້າມີຫລາຍກຸ່ມກັບສັດຍັດຈະສະແດງຕິດຕາມກັນ:

ຕົວຢ່າງ

<div class="btn-group">
  <button type="button" class="btn btn-primary">ຫົວຫລວງ</button>
  <button type="button" class="btn btn-primary">ດາວ</button>
  <button type="button" class="btn btn-primary">ວຽງນິຍົມ</button>
</div>
<div class="btn-group">
  <button type="button" class="btn btn-primary">ຈິຍ</button>
  <button type="button" class="btn btn-primary">ຫລວງ</button>
  <button type="button" class="btn btn-primary">ລີກສ</button>
</div>

ທ້າທາຍຄັບຄາວເອງ

ກຸ່ມກັບສັດຍັດບັນທຶກ ແລະ ສິ່ງອອກລົງ

ກຸ່ມກັບສັດຍັດບັນທຶກ, ສາມາດສ້າງມີສິ່ງອອກລົງ (ທ່ານຈະຮຽນຫລາຍຂໍ້ມູນໃນຫນຶ່ງວັນອື່ນໆ ກ່ຽວກັບສິ່ງອອກລົງ):

ຕົວຢ່າງ

<div class="btn-group">
  <button type="button" class="btn btn-primary">ຫົວຫລວງ</button>
  <button type="button" class="btn btn-primary">ດາວ</button>
  <div class="btn-group">
    <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">ວຽງນິຍົມ</button>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">ໂທລະສັບມືຖື</a>
      <a class="dropdown-item" href="#">ແບບໂທລະສັບຕົວປະກອບ</a>
    </div>
  </div>
</div>

ທ້າທາຍຄັບຄາວເອງ