Bootstrap 4 การแบ่งหน้า
การแบ่งหน้าพื้นฐาน
หากคุณมีเว็บไซต์ที่มีหน้าจำนวนมาก คุณอาจต้องการเพิ่มการแบ่งหน้าในแต่ละหน้า
ในการสร้างการแบ่งหน้าพื้นฐาน ให้เพิ่ม.pagination
คลาสไปยัง<ul>
องค์ประกอบ จากนั้นเพิ่ม.page-item
ไปยังแต่ละ<li>
องค์ประกอบและ.page-link
คลาสให้กับแต่ละลิงก์ภายใน<li>
:
ตัวอย่าง
<ul class="pagination">
<li class="page-item"><a class="page-link"
href="#">Previous</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="#">Next</a></li>
</ul>
สถานะใช้งาน
คลาส.active
ใช้เพื่อ "เน้น" หน้าปัจจุบัน:
ตัวอย่าง
<ul class="pagination">
<li class="page-item"><a class="page-link"
href="#">Previous</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="#">Next</a></li>
</ul>
สถานะคนพิการ
คลาส.disabled
นี้ใช้สำหรับลิงก์ที่ไม่สามารถคลิกได้:
ตัวอย่าง
<ul class="pagination">
<li class="page-item
disabled"><a class="page-link" href="#">Previous</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="#">Next</a></li>
</ul>
การปรับขนาดเลขหน้า
บล็อกการแบ่งหน้าสามารถปรับขนาดให้ใหญ่ขึ้นหรือเล็กลงได้:
เพิ่มคลาส.pagination-lg
สำหรับบล็อกขนาดใหญ่หรือบล็อก.pagination-sm
ขนาดเล็ก:
ตัวอย่าง
<ul class="pagination
pagination-lg">
<li class="page-item"><a class="page-link"
href="#">Previous</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="#">Next</a></li>
</ul>
<ul class="pagination pagination-sm">
<li class="page-item"><a class="page-link"
href="#">Previous</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="#">Next</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>
เคล็ดลับ:อ่านเพิ่มเติมเกี่ยวกับคลาส Bootstrap 4 Utility/Helper ในบทยูทิลิตี้ BS4ของ เรา
เกล็ดขนมปัง
อีกรูปแบบหนึ่งสำหรับการแบ่งหน้าคือ breadcrumbs:
คลาส.breadcrumb
และ.breadcrumb-item
ระบุตำแหน่งของเพจปัจจุบันภายในลำดับชั้นการนำทาง:
ตัวอย่าง
<ul class="breadcrumb">
<li class="breadcrumb-item"><a
href="#">Photos</a></li>
<li
class="breadcrumb-item"><a href="#">Summer 2017</a></li>
<li
class="breadcrumb-item"><a href="#">Italy</a></li>
<li class="breadcrumb-item
active">Rome</li>
</ul>