Bootstrap การแบ่งหน้า

การแบ่งหน้าพื้นฐาน

หากคุณมีเว็บไซต์ที่มีหน้าจำนวนมาก คุณอาจต้องการเพิ่มการแบ่งหน้าในแต่ละหน้า

การแบ่งหน้าพื้นฐานใน Bootstrap มีลักษณะดังนี้:

• 1
• 2
• 3
• 4
• 5

ในการสร้างการแบ่งหน้าพื้นฐาน ให้เพิ่ม.paginationคลาสให้กับ<ul>องค์ประกอบ:

สถานะใช้งาน

สถานะใช้งานแสดงว่าหน้าปัจจุบันคืออะไร:

• 1
• 2
• 3
• 4
• 5

เพิ่มคลาส.activeเพื่อให้ผู้ใช้รู้ว่าเขา/เธออยู่ที่หน้าใด:

สถานะคนพิการ

ไม่สามารถคลิกลิงก์ที่ปิดใช้งานได้:

• 1
• 2
• 3
• 4
• 5

เพิ่มคลาส.disabledหากลิงก์ถูกปิดใช้งานด้วยเหตุผลบางประการ:

การปรับขนาดเลขหน้า

บล็อกการแบ่งหน้าสามารถปรับขนาดให้ใหญ่ขึ้นหรือเล็กลงได้:

• 1
• 2
• 3
• 4
• 5

• 1
• 2
• 3
• 4
• 5

เพิ่มคลาส.pagination-lgสำหรับบล็อกขนาดใหญ่หรือบล็อก.pagination-smขนาดเล็ก:

เกล็ดขนมปัง

อีกรูปแบบหนึ่งสำหรับการแบ่งหน้าคือ breadcrumbs:

1. บ้าน
2. ส่วนตัว
3. รูปภาพ
4. วันหยุด

คลาส.breadcrumbระบุตำแหน่งของเพจปัจจุบันภายในลำดับชั้นการนำทาง:

<ul class="">
  <li><a href="#">1</a></li>
  <li><a href="#">2</a></li>
  <li><a href="#">3</a></li>
  <li><a href="#">4</a></li>
  <li><a href="#">5</a></li>
</ul>

การอ้างอิงการนำทาง Bootstrap ที่สมบูรณ์

สำหรับการอ้างอิงที่สมบูรณ์ของคลาสการนำทางทั้งหมด ไปที่ Bootstrap Navigation Referenceทั้งหมดของเรา