W3.CSS Paginations
หากคุณมีเว็บไซต์ที่มีจำนวนมากของหน้าเว็บที่คุณอาจต้องการที่จะเพิ่มการจัดเรียงของบางอย่างที่จะแบ่งหน้าแต่ละหน้า:
พื้นฐานการแบ่งหน้า
เพื่อสร้างเลขพื้นฐานเพิ่มระดับ W3-เลขหน้าไปยัง <ul> องค์ประกอบ:
ตัวอย่าง
<ul class="w3-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> ลองตัวเอง» ลูกศรเลขหน้า
ใช้หน่วยงาน HTML หรือไอคอนจากห้องสมุดที่ไอคอนเพื่อเพิ่มลูกศรเลขหน้า:
ตัวอย่าง
<ul class="w3-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> ลองตัวเอง» ใช้ / เชื่อมโยงปัจจุบัน
ใช้หนึ่งในชั้นเรียนสี w3- เพื่อบ่งชี้ที่หน้าผู้ใช้อยู่ใน:
ตัวอย่าง
<ul class="w3-pagination">
<li><a href="#">«</a></li>
<li><a
class="w3-green" 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> ลองตัวเอง» เลื่อนสี
โดยค่าเริ่มต้นเมื่อคุณเลื่อนเมาส์ไปกว่าการเชื่อมโยงเลขที่พวกเขาได้รับสีพื้นหลังสีเทา ใช้ใด ๆ ของ W3-hover- เรียนสีเปลี่ยนสีเลื่อน:
ตัวอย่าง
<ul class="w3-pagination">
<li><a href="#"
class="w3-hover-purple">«</a></li>
<li><a href="#"
class="w3-hover-green">1</a></li>
<li><a href="#"
class="w3-hover-red">2</a></li>
<li><a href="#"
class="w3-hover-blue">3</a></li>
<li><a href="#"
class="w3-hover-black">4</a></li>
<li><a href="#"
class="w3-hover-orange">»</a></li>
</ul> ลองตัวเอง» การแบ่งหน้าการกำหนดขนาด
ใช้ W3 เล็ก ๆ , W3 ขนาดเล็ก W3 ขนาดใหญ่ W3-XLarge, W3-xxlarge หรือ W3-XXXLarge ขนาดเลขหน้านี้:
ขอบเลข
เพิ่มระดับ W3 พรมแดนเพื่อสร้างเลขที่มีพรมแดน:
โค้งมนพรมแดน
เพิ่มระดับ W3 รอบติดกับ W3 พรมแดนสำหรับเส้นขอบโค้งมน:
เลขศูนย์กลาง
ไปยังศูนย์เลขที่ห่อ <div> กับ class = "W3 ศูนย์" รอบ <ul>:
ตัวอย่างเลขอื่น ๆ
ตัวอย่างถัดไป / ก่อนหน้า
<ul class="w3-pagination w3-border w3-round">
<li><a href="#">❮
Previous</a></li>
<li><a href="#">Next
❯</a></li>
</ul> ลองตัวเอง» ตัวอย่างเมนู
<ul class="w3-pagination w3-border">
<li><a href="#"
class="w3-light-grey">Home</a></li>
<li><a href="#">Link
1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link
3</a></li>
</ul> ลองตัวเอง»