Bootstrap 5 ບັນດາກົດລະບຽບ

ຮູບແບບລົດໄຟ

Bootstrap 5 ສະໜອງລົດໄຟທີ່ມີຮູບແບບຕ່າງຫຼາຍ：

ຕົວຢ່າງ

<button type="button" class="btn">ພື້ນຖານ</button>
<button type="button" class="btn btn-primary">ຫຼັກ</button>
<button type="button" class="btn btn-secondary">ລຸ່ມ</button>
<button type="button" class="btn btn-success">ສຳເລັດ</button>
<button type="button" class="btn btn-info">ຂໍ້ມູນ</button>
<button type="button" class="btn btn-warning">ການເຕືອນ</button>
<button type="button" class="btn btn-danger">ອັນຕະລາຍ</button>
<button type="button" class="btn btn-dark">ສີຫຼັງ</button>
<button type="button" class="btn btn-light">ສີເຫຼັກ</button>
<button type="button" class="btn btn-link">ລາຍການ</button>

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

ປະເພດລົດໄຟສາມາດນຳໃຊ້ <a>、<button> ຫຼື <input> ປະກອບສ່ວນ：

ຕົວຢ່າງ

<a href="#" class="btn btn-success">ລາຍການລົດໄຟ</a>
<button type="button" class="btn btn-success">ລົດໄຟ</button>
<input type="button" class="btn btn-success" value="ລົດໄຟການເຂົ້າ">
<input type="submit" class="btn btn-success" value="ລົດໄຟການສົ່ງ">
<input type="reset" class="btn btn-success" value="ລົດໄຟການກຳນົດ">

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

ເປັນຫຍັງພວກເຮົາຂຽນ # ໃນຂໍ້ມູນ href ຂອງທາງຈາກຂໍ້ຖ້ອຍ?

ເພາະພວກເຮົາບໍ່ມີເວັບໄຊທີ່ສາມາດເຊື່ອມຕໍ່ໄດ້ແລະພວກເຮົາບໍ່ຕ້ອງຮັບຂໍ້ຄວາມ "404" ພວກເຮົາຈະໃຊ້ # ຄືກັບຂໍ້ຖ້ອຍ. ໃນສະຖານະການສາຍງານຈະເປັນທາງອາທິດຂອງເວັບໄຊ "ຄົ້ນຫາ"

ຫົວວຽງກະບຽນ

Bootstrap 5 ຍັງໃຫ້ມີຫົວວຽງຂອງຂອບຂ້າງ/ກະບຽນສອງຫຼັງຈາກນັ້ນສິບແປດອັນ

ຖອນໄມ້ອາກາດຫົວວຽງຂອງພວກເຂົາຫຼັງຈາກນັ້ນຈະເຫັນຜົນກະທົບ "hover" ຕໍ່ຫຼັງ:

ຕົວຢ່າງ

<button type="button" class="btn btn-outline-primary">ຫົວວຽງຫຼັກ</button>
<button type="button" class="btn btn-outline-secondary">ລຸ່ມ</button>
<button type="button" class="btn btn-outline-success">ສຳເລັດ</button>
<button type="button" class="btn btn-outline-info">ຂໍ້ມູນ</button>
<button type="button" class="btn btn-outline-warning">ການເຕືອນ</button>
<button type="button" class="btn btn-outline-danger">ອັນຕະລາຍ</button>
<button type="button" class="btn btn-outline-dark">ສີຫຼັງ</button>
<button type="button" class="btn btn-outline-light text-dark">ສີເງົາ</button>

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

ຂະໜາດຫົວວຽງ

ສຳລັບຫົວວຽງໃຫຍ່ .btn-lg ປະເພດດັ່ງກ່າວໃນຫົວວຽງນ້ອຍ .btn-sm ປະເພດ:

ຕົວຢ່າງ

<button type="button" class="btn btn-primary btn-lg">ໃຫຍ່</button>
<button type="button" class="btn btn-primary">ຄົນປະຈຳ</button>
<button type="button" class="btn btn-primary btn-sm">ນ້ອຍ</button>

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

ຫົວວຽງຂັ້ນຖານ

ສຳລັບທີ່ຈະສ້າງຫົວວຽງຂັ້ນຖານທີ່ຂ້າມທະບຽນຜູ້ປົກຄອງສູງສົມບູນໃຫຍ່ຂອງພວກເຂົາອອກໃນຜູ້ປົກຄອງສູງສົມບູນໃຫຍ່ສູງສົມບູນໃຫຍ່ .d-grid ປະເພດ "helper":

ຕົວຢ່າງ

<div class="d-grid">
  <button type="button" class="btn btn-primary btn-block">ຫົວຂໍ້ຫົວຂໍ້ທີ່ກວມຂອງຕົວເລກທັງໝົດ</button>
</div>

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

ຖ້າທ່ານມີຫົວຂໍ້ບັນທຶກສະໜາມຫລາຍ, ທ່ານສາມາດນຳໃຊ້ .gap-* ຊັບສິນວ່າຈະຄວບຄຸມລັດຖະບານກັບຄວາມກະຈັງລະຫວ່າງພວກເຂົາ.

ຕົວຢ່າງ

<div class="d-grid gap-3">
  <button type="button" class="btn btn-primary btn-block">ຫົວຂໍ້ຫົວຂໍ້ທີ່ກວມຂອງຕົວເລກທັງໝົດ</button>
  <button type="button" class="btn btn-primary btn-block">ຫົວຂໍ້ຫົວຂໍ້ທີ່ກວມຂອງຕົວເລກທັງໝົດ</button>
  <button type="button" class="btn btn-primary btn-block">ຫົວຂໍ້ຫົວຂໍ້ທີ່ກວມຂອງຕົວເລກທັງໝົດ</button>
</div>

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

ຫົວຂໍ້ການສະແດງ/ຫຍຸດຫົວຂໍ້

ຫົວຂໍ້ບັນທຶກສາມາດຕັ້ງຢູ່ໃນສະພາບສະແດງວ່າຖືກກົດດັນ (ສະແດງວ່າຖືກກົດດັນ) ຫລື ຫຍຸດ (ບໍ່ສາມາດຖືກກົດດັນ):

ຊັບສິນ .active ຫົວຂໍ້ຈະສະແດງວ່າຖືກກົດດັນ, ແລະ disabled ປະສົມປະສານດັງທີ່ຫົວຂໍ້ບໍ່ສາມາດຖືກກົດດັນ. ສັງເກດວ່າ <a> ບໍ່ສາມາດນຳໃຊ້ປະສົມປະສານດັງ disabled, ແລະ ຕ້ອງມີການນຳໃຊ້ .disabled ຊັບສິນວ່າຈະສະແດງທາງສາຍຫົວຂໍ້.

ຕົວຢ່າງ

<button type="button" class="btn btn-primary active">ຫົວຂໍ້ຫລັກສະແດງວ່າຖືກກະຕຸ້ນ</button>
<button type="button" class="btn btn-primary" disabled>ຫົວຂໍ້ຫຍຸດຫົວຂໍ້ຫລັກ</button>
<a href="#" class="btn btn-primary disabled">ຫົວຂໍ້ທາງດ່ວນຫຍຸດ</a>

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

ຫົວຂໍ້ການເລື່ອງ

ທ່ານສາມາດເພີ່ມ "spinner" ຕໍ່ຫົວຂໍ້ບັນທຶກ, ທ່ານຈະສຶກສາຫລາຍຂໍ້ມູນຂອງພວກເຮົາທີ່ກ່ຽວກັບ BS5 Spinner:

ຕົວຢ່າງ

<button class="btn btn-primary">
  <span class="spinner-border spinner-border-sm"></span>
</button>
<button class="btn btn-primary">
  <span class="spinner-border spinner-border-sm"></span>
  ກຳລັງອອກມາ..
</button>
<button class="btn btn-primary" disabled>
  <span class="spinner-border spinner-border-sm"></span>
  ກຳລັງອອກມາ..
</button>
<button class="btn btn-primary" disabled>
  <span class="spinner-grow spinner-grow-sm"></span>
  ກຳລັງອອກມາ..
</button>

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