พื้นฐานการแบ่งหน้า
หากคุณมีเว็บไซต์ที่มีจำนวนมากของหน้าเว็บที่คุณอาจต้องการที่จะเพิ่มการจัดเรียงของบางอย่างที่จะแบ่งหน้าแต่ละหน้า
เลขขั้นพื้นฐานใน Bootstrap ลักษณะเช่นนี้:
เพื่อสร้างเลขพื้นฐานเพิ่ม .pagination ระดับไปยัง <ul> องค์ประกอบ:
ตัวอย่าง
<ul class="pagination">
<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> ลองตัวเอง» สภาพที่ใช้งาน
สถานะการทำงานแสดงให้เห็นถึงสิ่งที่เป็นหน้าปัจจุบัน:
เพิ่มระดับ .active เพื่อให้ผู้ใช้ทราบว่าหน้าเขา / เธออยู่บน:
ตัวอย่าง
<ul class="pagination">
<li><a href="#">1</a></li>
<li class="active"><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
</ul> ลองตัวเอง» Disabled State
การเชื่อมโยงคนพิการไม่สามารถคลิก:
เพิ่มระดับ .disabled ถ้ามีการเชื่อมโยงด้วยเหตุผลบางอย่างถูกปิดใช้งาน:
ตัวอย่าง
<ul class="pagination">
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li class="disabled"><a href="#">4</a></li>
<li><a href="#">5</a></li>
</ul> ลองตัวเอง» Pagination Sizing
บล็อกเลขหน้านอกจากนี้ยังสามารถปรับขนาดให้มีขนาดใหญ่ขึ้นหรือมีขนาดเล็ก:
เพิ่มระดับ .pagination-lg บล็อกขนาดใหญ่หรือ .pagination-sm บล็อกขนาดเล็ก:
ตัวอย่าง
<ul class="pagination
pagination-lg">
<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>
<ul class="pagination pagination-sm">
<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> ลองตัวเอง» สวดมนต์
สำหรับรูปแบบการแบ่งหน้าอีกคือสวดมนต์:
.breadcrumb ระดับบ่งชี้ตำแหน่งที่ตั้งหน้าปัจจุบันภายในลำดับชั้นของการเดินเรือ:
ตัวอย่าง
<ul class="breadcrumb">
<li><a href="#">Home</a></li>
<li><a href="#">Private</a></li>
<li><a href="#">Pictures</a></li>
<li class="active">Vacation</li>
</ul> ลองตัวเอง» ทดสอบด้วยตัวเองด้วยการออกกำลังกาย!
การใช้สิทธิ 1 » ออกกำลังกาย 2 » ออกกำลังกาย 3 » 4 การออกกำลังกาย» ออกกำลังกาย 5 »
กรอก Bootstrap นำร่องอ้างอิง
สำหรับอ้างอิงที่สมบูรณ์ของการเรียนนำทางให้ไปที่เราสมบูรณ์ Bootstrap นำร่องอ้างอิง