Bootstrap - เลขหน้า
บทนี้จะกล่าวถึงคุณลักษณะการแบ่งหน้าที่ Bootstrap รองรับ การแบ่งหน้ารายการที่ไม่เรียงลำดับจะถูกจัดการโดย Bootstrap เหมือนกับองค์ประกอบอินเทอร์เฟซอื่น ๆ
เลขหน้า
ตารางต่อไปนี้แสดงรายการคลาสที่ Bootstrap จัดเตรียมไว้เพื่อจัดการกับการแบ่งหน้า
คลาส | คำอธิบาย | โค้ดตัวอย่าง |
---|---|---|
.pagination | เพิ่มคลาสนี้เพื่อรับเลขหน้าบนเพจของคุณ | |
.disabled, .active | คุณสามารถปรับแต่งลิงค์โดยใช้ .disabled สำหรับลิงก์ที่ไม่สามารถคลิกได้และ .active เพื่อระบุหน้าปัจจุบัน | |
.pagination-lg, .pagination-sm | ใช้คลาสเหล่านี้เพื่อรับไอเท็มขนาดต่างๆ | |
เลขหน้าเริ่มต้น
ตัวอย่างต่อไปนี้แสดงให้เห็นถึงการใช้คลาส .pagination กล่าวไว้ในตารางด้านบน -
<ul class = "pagination">
<li><a href = "#">«</a></li>
<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>
<li><a href = "#">»</a></li>
</ul>
รัฐ
ตัวอย่างต่อไปนี้แสดงให้เห็นถึงการใช้คลาส .disabled, .active กล่าวไว้ในตารางด้านบน -
<ul class = "pagination">
<li><a href = "#">«</a></li>
<li class = "active"><a href = "#">1</a></li>
<li class = "disabled"><a href = "#">2</a></li>
<li><a href = "#">3</a></li>
<li><a href = "#">4</a></li>
<li><a href = "#">5</a></li>
<li><a href = "#">»</a></li>
</ul>
การปรับขนาด
ตัวอย่างต่อไปนี้แสดงให้เห็นถึงการใช้คลาสสำหรับการปรับขนาด .pagination-* กล่าวไว้ในตารางด้านบน -
<ul class = "pagination pagination-lg">
<li><a href = "#">«</a></li>
<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>
<li><a href = "#">»</a></li>
</ul>
<br>
<ul class = "pagination">
<li><a href = "#">«</a></li>
<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>
<li><a href = "#">»</a></li>
</ul>
<br>
<ul class = "pagination pagination-sm">
<li><a href = "#">«</a></li>
<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>
<li><a href = "#">»</a></li>
</ul>
เพจเจอร์
หากคุณต้องการสร้างลิงก์การแบ่งหน้าแบบธรรมดาที่นอกเหนือไปจากข้อความเพจเจอร์ก็สามารถทำงานได้ดี เช่นเดียวกับลิงก์การแบ่งหน้าเพจเจอร์คือรายการที่ไม่เรียงลำดับ โดยค่าเริ่มต้นลิงก์จะอยู่กึ่งกลาง ตารางต่อไปนี้แสดงรายการคลาส Bootstrap สำหรับเพจเจอร์
คลาส | คำอธิบาย | โค้ดตัวอย่าง |
---|---|---|
.pager | เพิ่มคลาสนี้เพื่อรับลิงค์เพจเจอร์ | |
.ก่อนหน้าถัดไป | ใช้คลาส .previous ไปทางซ้ายและ .next เพื่อจัดแนวลิงก์ให้ถูกต้อง | |
. ปิดการใช้งาน | เพิ่มชั้นเรียนนี้เพื่อดูปิดเสียง | |
เพจเจอร์เริ่มต้น
ตัวอย่างต่อไปนี้แสดงให้เห็นถึงการใช้คลาส .pager กล่าวไว้ในตารางด้านบน -
<ul class = "pager">
<li><a href = "#">Previous</a></li>
<li><a href = "#">Next</a></li>
</ul>
ลิงค์ที่สอดคล้องกัน
ตัวอย่างต่อไปนี้แสดงให้เห็นถึงการใช้คลาสสำหรับการจัดแนว .previous, .next กล่าวไว้ในตารางด้านบน -
<ul class = "pager">
<li class = "previous"><a href = "#">← Older</a></li>
<li class = "next"><a href = "#">Newer →</a></li>
</ul>
รัฐ
ตัวอย่างต่อไปนี้แสดงให้เห็นถึงการใช้คลาส .disabled กล่าวไว้ในตารางด้านบน -
<ul class = "pager">
<li class = "previous disabled"><a href = "#">← Older</a></li>
<li class = "next"><a href = "#">Newer →</a></li>
</ul>