Bootstrap 5 หน้าแสดง
- หน้าก่อนหน้า BS5 โหลดเข้ามา
- หน้าต่อไป BS5 กลุ่มรายการ
ปฏิทินพื้นฐาน
ถ้าเว็บไซต์ของคุณมีหน้าจำนวนมาก คุณอาจต้องการเพิ่มปฏิทินบางอย่างสำหรับแต่ละหน้า。
ถ้าต้องการสร้างปฏิทินแบบพื้นฐาน โปรดใช้ .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>
การจัดลำดับแบ่งหน้า
ใช้คลาส utility ในการเปลี่ยนการจัดลำดับของแบ่งหน้า:
ตัวอย่าง
<!-- 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>
หมวดหมู่ (Breadcrumbs)
รูปแบบของการแบ่งหน้าอื่น ๆ คือ หมวดหมู่ (Breadcrumbs):
.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>
- หน้าก่อนหน้า BS5 โหลดเข้ามา
- หน้าต่อไป BS5 กลุ่มรายการ
