Bootstrap 5 ກາງການແລກປ່ຽນ

ຖານະການບາງຄົນສະເພາະ

ຖານະການບາງຄົນຫລາຍຫລາຍຫົວໜ້າເວັບໄຊທີ່ອາດຈະຈະຕ້ອງໃຫ້ການບາງຄົນພາຍໃນແຕ່ລະຫົວໜ້າ:

ສຳລັບການສ້າງບາງຄົນສະເພາະ: .pagination ເພີ່ມປະເພດສຳລັບ <ul> ສັນວັດ .page-item ເພີ່ມໃຫ້ແຕ່ລະ <li> ສັນວັດ .page-link ເພີ່ມປະເພດສຳລັບ <li> ທາງພົວພັນໃນ

ຄວາມຈະເປັນບັນດາຄວາມໃນເຫດການນັ້ນທີ່ບໍ່ກ່ຽວກັບການນຳໃຊ້ຂອງພາກສ່ວນດັ່ງກ່າວ:

<ul class="pagination">
  <li class="page-item"><a class="page-link" href="#">ຫລັງກ່ອນ</a></li>
  <li class="page-item"><a class="page-link" href="#">1</a></li>
  <li class="page-item"><a class="page-link" href="#">2</a></li>
  <li class="page-item"><a class="page-link" href="#">3</a></li>
  <li class="page-item"><a class="page-link" href="#">ຫລັງການ</a></li>
</ul>

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

ສະຖານະດັບກະຕຸ້ນ

.active ປະເພດສຳລັບທາງພົວພັນທີ່ຄົນປະຈຳວັນ:

ຄວາມຈະເປັນບັນດາຄວາມໃນເຫດການນັ້ນທີ່ບໍ່ກ່ຽວກັບການນຳໃຊ້ຂອງພາກສ່ວນດັ່ງກ່າວ:

<ul class="pagination">
  <li class="page-item"><a class="page-link" href="#">ຫລັງກ່ອນ</a></li>
  <li class="page-item"><a class="page-link" href="#">1</a></li>
  <li class="page-item active"><a class="page-link" href="#">2</a></li>
  <li class="page-item"><a class="page-link" href="#">3</a></li>
  <li class="page-item"><a class="page-link" href="#">ຫລັງການ</a></li>
</ul>

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

ສະຖານະດັບລົບ

.disabled ປະເພດສຳລັບທາງພົວພັນທີ່ບໍ່ສາມາດລະງັບ:

ຄວາມຈະເປັນບັນດາຄວາມໃນເຫດການນັ້ນທີ່ບໍ່ກ່ຽວກັບການນຳໃຊ້ຂອງພາກສ່ວນດັ່ງກ່າວ:

<ul class="pagination">
  <li class="page-item disabled"><a class="page-link" href="#">ຫລັງກ່ອນ</a></li>
  <li class="page-item"><a class="page-link" href="#">1</a></li>
  <li class="page-item"><a class="page-link" href="#">2</a></li>
  <li class="page-item"><a class="page-link" href="#">3</a></li>
  <li class="page-item"><a class="page-link" href="#">ຫລັງການ</a></li>
</ul>

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

ຂະໜາດບາງຄົນ

ຖານະການດັດແປງຂອງສິ່ງຂອງບາງຄົນສາມາດດັດແປງໃຫ້ໃຫຍ່ຫລືນ້ອຍກວ່າ:

ເພີ່ມປະເພດສຳລັບສິ່ງໃຫຍ່ກວ່າ .pagination-lg ແລະເພີ່ມໃຫ້ສິ່ງນ້ອຍກວ່າ .pagination-sm ປະເພດ:

ຄວາມຈະເປັນບັນດາຄວາມໃນເຫດການນັ້ນທີ່ບໍ່ກ່ຽວກັບການນຳໃຊ້ຂອງພາກສ່ວນດັ່ງກ່າວ:

<ul class="pagination pagination-lg">
  <li class="page-item"><a class="page-link" href="#">ຫລັງກ່ອນ</a></li>
  <li class="page-item"><a class="page-link" href="#">1</a></li>
  <li class="page-item"><a class="page-link" href="#">2</a></li>
  <li class="page-item"><a class="page-link" href="#">3</a></li>
  <li class="page-item"><a class="page-link" href="#">ຫລັງການ</a></li>
</ul>
<ul class="pagination pagination-sm">
  <li class="page-item"><a class="page-link" href="#">ຫລັງກ່ອນ</a></li>
  <li class="page-item"><a class="page-link" href="#">1</a></li>
  <li class="page-item"><a class="page-link" href="#">2</a></li>
  <li class="page-item"><a class="page-link" href="#">3</a></li>
  <li class="page-item"><a class="page-link" href="#">ຫລັງການ</a></li>
</ul>

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

ການປະຕິບັດບັນດາຄວາມຂອງການແບ່ງສະໜອງ:

ຂໍ້ສະເໜີໃຫ້ເຮັດໃຫ້ການປະຕິບັດບັນດາຄວາມຂອງການແບ່ງສະໜອງ:

ຄວາມຈະເປັນບັນດາຄວາມໃນເຫດການນັ້ນທີ່ບໍ່ກ່ຽວກັບການນຳໃຊ້ຂອງພາກສ່ວນດັ່ງກ່າວ:

<!-- Default (left-aligned) -->
<ul class="pagination" style="margin:20px 0">
  <li class="page-item">...</li>
</ul>
<!-- Center-aligned -->
<ul class="pagination justify-content-center" style="margin:20px 0">
  <li class="page-item">...</li>
</ul>
<!-- Right-aligned -->
<ul class="pagination justify-content-end" style="margin:20px 0">
  <li class="page-item">...</li>
</ul>

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

ການແບ່ງສະໜອງບັນດາຄວາມແບບເພີ່ມເຕີມ:

ການແບ່ງສະໜອງບັນດາຄວາມແບບເພີ່ມເຕີມ:

ຮູບແບບຂອງການແບ່ງສະໜອງບັນດາຄວາມແບບເພີ່ມເຕີມແມ່ນ: .breadcrumb ແລະ .breadcrumb-item

ຄວາມຈະເປັນບັນດາຄວາມໃນເຫດການນັ້ນທີ່ບໍ່ກ່ຽວກັບການນຳໃຊ້ຂອງພາກສ່ວນດັ່ງກ່າວ:

<ul class="breadcrumb">
  <li class="breadcrumb-item"><a href="#">ຮູບພາບ</a></li>
  <li class="breadcrumb-item"><a href="#">ປີ 2019ລະດູອາທິດ</a></li>
  <li class="breadcrumb-item"><a href="#">ປະເທດຈີນ</a></li>
  <li class="breadcrumb-item active">ປັກກິ່ງ</li>
</ul>

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