1. Home
  2. แท็บบูต

บทช่วยสอน แท็บบูต ที่ดีที่สุดในปี 2024 ในบทช่วยสอนนี้ คุณสามารถเรียนรู้ เพจจิ้ง (เลข),ตัวอย่าง,ตัวอย่าง,ตัวอย่าง,พลิก (Pager),ตัวอย่าง,ตัวอย่าง,ตัวอย่าง,ตัวอย่างต่อไปของการแบ่งหน้า,

แท็บบูต

บทนี้จะอธิบายคุณสมบัติที่ได้รับการสนับสนุนเงินทุนจากแท็บ เพจจิ้ง (เลข) เป็นรายการที่เรียงลำดับ Bootstrap รับการปฏิบัติเช่นองค์ประกอบอื่น ๆ เช่นอินเตอร์เฟซที่จัดการเพจ

เพจจิ้ง (เลข)

ตารางต่อไปนี้แสดงรายการเงินทุนให้ระดับการประมวลผลเพจ

Class描述示例代码
.pagination添加该 class 来在页面上显示分页。 
<ul class="pagination">
  <li><a href="#">&laquo;</a></li>
  <li><a href="#">1</a></li>
  ththth.
</ul>
.disabled, .active您可以自定义链接，通过使用.disabled来定义不可点击的链接，通过使用.active来指示当前的页面。 
<ul class="pagination">
  <li class="disabled"><a href="#">&laquo;</a></li>
  <li class="active"><a href="#">1<span class="sr-only">(current)</span></a></li>
  ththth.
</ul>
.pagination-lg, .pagination-sm使用这些 class 来获取不同大小的项。 
<ul class="pagination pagination-lg">th.</ul>
<ul class="pagination">th.</ul>
<ul class="pagination pagination-sm">th.</ul>

แท็บเริ่มต้น

ตัวอย่างต่อไปนี้แสดงให้เห็นถึงการใช้งาน.pagination ตารางชั้นกล่าวถึง:

ตัวอย่าง

<ul class = "เลข"> <li> <a href = "#"> & laquo ; </ 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 = "#"> & raquo ; </ a> </ li> </ ul>

ลอง»

ผลมีดังนี้

แท็บเริ่มต้น

สถานะเพจจิ้ง

ตัวอย่างต่อไปนี้แสดงให้เห็นถึงระดับ .disabled กล่าวข้างต้นตารางการใช้งาน .active:

ตัวอย่าง

<ul class = "เลข"> <li> <a href = "#"> & laquo ; </ a> </ li> <li class = "ใช้งาน"> <a href = "#"> 1 < / a> </ li> <li class = "คนพิการ"> <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 = "#"> & raquo ; </ a> </ li> </ ul>

ลอง»

ผลมีดังนี้

สถานะเพจจิ้ง

ขนาดหน้า

ตัวอย่างต่อไปนี้แสดงให้เห็นถึงโต๊ะชั้นที่กล่าวถึง.pagination- * การใช้งาน:

ตัวอย่าง

<ul class = "เลขเลข-LG" > <li> <a href = "#"> & laquo ; </ 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 = "#"> & raquo ; </ a> </ li> </ ul> ฟรี <ul class = "เลข"> <li> <a href = "#"> & laquo ; </ 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 = "#"> & raquo ; </ a> </ li> </ ul> ฟรี <ul class = "เลขเลข-SM" > <li> <a href = "#"> & laquo ; </ 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 = "#"> & raquo ; </ a> </ li> </ ul>

ลอง»

ผลมีดังนี้

ขนาดหน้า

พลิก (Pager)

หากคุณต้องการที่จะสร้างการเชื่อมโยงหน้าเรียบง่ายเพื่อให้ผู้ใช้นำทางผ่านหน้าเพื่อให้บรรลุ และการเชื่อมโยงเพจจิ้งเป็นรายการเรียงลำดับคือพลิก โดยค่าเริ่มต้นการเชื่อมโยงเป็นศูนย์กลาง ตารางต่อไปนี้แสดงรายการเงินทุนระดับการประมวลผลพลิก

Class描述示例代码
.pager添加该 class 来获得翻页链接。 
<ul class="pager">
  <li><a href="#">Previous</a></li>
  <li><a href="#">Next</a></li>
</ul>
.previous, .next使用 class.previous把链接向左对齐，使用.next把链接向右对齐。 
<ul class="pager">
  <li class="previous"><a href="#">&larr; Older</a></li>
  <li class="next"><a href="#">Newer &rarr;</a></li>
</ul>
.disabled添加该 class 来获得一个颜色变淡的外观。 
<ul class="pager">
  <li class="previous disabled"><a href="#">&larr; Older</a></li>
  <li class="next"><a href="#">Newer &rarr;</a></li>
</ul>

หน้าเริ่มต้น

ตัวอย่างต่อไปนี้แสดงให้เห็นถึงโต๊ะชั้นที่กล่าวถึงการใช้งาน.pager:

ตัวอย่าง

<ul class = "เพจเจอร์"> <li> <a href = "#"> ก่อนหน้า < / a> </ li> <li> <a href = "#"> ถัดไป < / a> </ li> </ ul>

ลอง»

ผลมีดังนี้

หน้าเริ่มต้น

การเชื่อมโยงสอดคล้อง

ตัวอย่างต่อไปนี้แสดงให้เห็นถึงระดับ .previous กล่าวข้างต้นตารางการใช้งาน .next:

ตัวอย่าง

<ul class = "เพจเจอร์"> <li class = "ก่อน"> <a href = "#"> & larr ; เก่า </ a> </ li> <li class = "ถัดไป"> <a href = "#"> บทความที่ใหม่กว่าและ rarr; </ a> </ li> </ ul>

ลอง»

ผลมีดังนี้

พลิกเชื่อมโยงสอดคล้อง

รัฐพลิก

ตัวอย่างต่อไปนี้แสดงให้เห็นถึงโต๊ะชั้นที่กล่าวถึงการใช้งาน.disabled:

ตัวอย่าง

<ul class = "เพจเจอร์"> <li class = "ก่อนหน้านี้คนพิการ"> < href = "#"> & larr ; เก่า </ a> </ li> <li class = "ถัดไป"> <a href = "#"> บทความที่ใหม่กว่าและ rarr; </ a> </ li> </ ul>

ลอง»

ผลมีดังนี้

รัฐพลิก

ตัวอย่างต่อไปของการแบ่งหน้า

หมวดหมู่ ลักษณะ ตัวอย่าง
.pager ลิงค์เลขที่เรียบง่าย, การเชื่อมโยงศูนย์กลาง ความพยายาม
.previous .pager รูปแบบก่อนหน้านี้ปุ่มซ้ายธรรม ความพยายาม
.next .pager สไตล์ปุ่ม Next จัดชิดขวา ความพยายาม
.disabled ปิดการใช้งานการเชื่อมโยง ความพยายาม
.pagination การเชื่อมโยงเพจจิ้ง ความพยายาม
.pagination-LG การเชื่อมโยงเพจจิ้งขนาดใหญ่ ความพยายาม
.pagination-SM ขนาดที่เล็กกว่าของการเชื่อมโยงเพจจิ้ง ความพยายาม
.disabled ปิดการใช้งานการเชื่อมโยง ความพยายาม
.active การเข้าถึงปัจจุบันรูปแบบการเชื่อมโยงหน้า ความพยายาม

บทแนะนำยอดนิยม

Contact US

แท็บบูต
10/30