แท็บมูลนิธิ
หากคุณมีมากหน้าเนื้อหาที่คุณจำเป็นต้องใช้ฟังก์ชั่นเพจจิ้ง
เพื่อสร้างคุณลักษณะพื้นฐานเพจจิ้งต้อง <ul> ในองค์ประกอบบวก .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>
ลอง»
หน้าปัจจุบัน
คุณสามารถ <li> เพิ่ม .current ระดับเพื่อทำเครื่องหมายหน้าปัจจุบัน:
ตัวอย่าง
<li class = "ปัจจุบัน"> <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>
ลอง»
ปิดการใช้งานแท็บ
หากคุณจำเป็นต้องตั้งค่าแท็บที่คุณไม่สามารถคลิกได้ต้อง .unavailable หมวดหมู่:
ตัวอย่าง
<li> <a href = "#"> 1 </ a> </ li>
<li> <a href = "#"> 2 </ a> </ li>
<li class = "พร้อมใช้งาน"> <a href = "#"> 3 </ a> </ li>
<li> <a href = "#"> 4 </ a> </ li>
<li> <a href = "#"> 5 </ a> </ li>
</ ul>
ลอง»
ทิศทางเพจจิ้ง
ในรหัสแรกและครั้งสุดท้าย> <li> เพิ่มองค์ประกอบ .arrow หน่วยงานระดับแทรก HTML สัญลักษณ์ « และ » เพื่อสร้างสัญลักษณ์ทิศทางเพจจิ้ง:
ตัวอย่าง
<li class = "ลูกศร"> <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 class = "ลูกศร"> <a href = "#"> & raquo; </ a> </ li>
</ ul>
เพจจิ้งเป็นศูนย์กลาง
เราสามารถเพิ่ม <ul> นอก <div> องค์ประกอบและ <div> เพิ่มใน .pagination-centered การเรียนที่จะใช้เพจจิ้งเป็นศูนย์กลาง:
ตัวอย่าง
<ระดับ Ul = "เลข">
<li class = "ลูกศร"> <a href = "#"> & laquo; </ a> </ li>
<li class = "ปัจจุบัน"> <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 class = "ลูกศร"> <a href = "#"> & raquo; </ a> </ li>
</ ul>
</ div>
ลอง»
สวดมนต์
โครงสร้าง Breadcrumbs ลูกศรใช้ในการแสดงหน้าปัจจุบัน
ใน <ul> ในองค์ประกอบที่เพิ่ม .breadcrumbs ระดับในการดำเนินการสวดมนต์ คุณสามารถเพิ่ม <li> บน .current หรือ .unavailable ชั้นตั้งหน้าปัจจุบันและผลกระทบไม่สามารถคลิกได้:
ตัวอย่าง
<li> <a href = "#"> หน้าแรก </ a> </ li>
<li> <a href = "#"> เอกชน </ a> </ li>
<ระดับ Li = "พร้อมใช้งาน"> <a href = "#"> รูปภาพ </ a> </ li>
<ระดับ Li = "ปัจจุบัน"> วันหยุด </ li>
</ ul>
ลอง»
นำทางย่อย
การสลับบนหน้าย่อยนำทางเป็นประโยชน์อย่างมาก
ใน <dl> องค์ประกอบที่จะมีการเพิ่ม .sub-nav ชั้นเรียนเพื่อสร้างย่อยนำทาง ใน <dt> ในองค์ประกอบที่จะเพิ่มชื่อสำหรับตัวเลือกที่เลือก <dd> เพิ่ม .active หมวดหมู่:
ตัวอย่าง
<Dt> ตัวกรอง: </ dt >
<Dd class = "ใช้งาน"> <a href = "#"> ทั้งหมด </ a> </ dd> ขึ้น
<dd> ขึ้น <a href = "#"> ใช้งาน </ a> </ dd> ขึ้น
<dd> ขึ้น <a href = "#"> รอ </ a> </ dd> ขึ้น
<dd> ขึ้น <a href = "#"> ระงับ </ a> </ dd> ขึ้น
</ ul>
ลอง»