การ แบ่งหน้า W3.CSS
การแบ่งหน้าพื้นฐาน
หากคุณมีเว็บไซต์ที่มีหลายหน้า คุณอาจต้องการใช้การแบ่งหน้า
ในการสร้างการแบ่งหน้าพื้นฐาน ให้ใช้ปุ่ม ( w3-button ) ในแถบ ( w3-bar )
ตัวอย่าง
<div class="w3-bar">
<a href="#" class="w3-button">1</a>
<a href="#" class="w3-button">2</a>
<a href="#"
class="w3-button">3</a>
<a href="#" class="w3-button">4</a>
<a href="#" class="w3-button">5</a>
</div>
หากต้องการลบช่องว่างระหว่างปุ่มให้เพิ่ม คลาส w3-bar-item :
ตัวอย่าง
<div class="w3-bar">
<a href="#" class="w3-button">«</a>
<a href="#" class="w3-button">1</a>
<a href="#" class="w3-button">2</a>
<a href="#" class="w3-button">3</a>
<a href="#" class="w3-button">4</a>
<a href="#" class="w3-button">5</a>
<a href="#" class="w3-button">»</a>
</div>
ลูกศรเลขหน้า
ใช้เอนทิตี HTML หรือไอคอนจากไลบรารีไอคอนเพื่อเพิ่มลูกศรแบ่งหน้า:
ตัวอย่าง
<div class="w3-bar">
<a href="#" class="w3-button">«</a>
<a href="#" class="w3-button">1</a>
<a href="#" class="w3-button">2</a>
<a href="#" class="w3-button">3</a>
<a href="#" class="w3-button">4</a>
<a href="#" class="w3-button">5</a>
<a href="#" class="w3-button">»</a>
</div>
ลิงค์ที่ใช้งาน/ปัจจุบัน
ใช้หนึ่งใน คลาส สี w3-เพื่อระบุว่าผู้ใช้อยู่ในหน้าใด:
ตัวอย่าง
<div class="w3-bar">
<a href="#" class="w3-button">«</a>
<a href="#" class="w3-button w3-green">1</a>
<a href="#" class="w3-button">2</a>
<a href="#" class="w3-button">3</a>
<a href="#" class="w3-button">4</a>
<a href="#" class="w3-button">»</a>
</div>
โฮเวอร์สี
ตามค่าเริ่มต้น เมื่อคุณเลื่อนเมาส์ไปที่ลิงก์การแบ่งหน้า ลิงก์เหล่านั้นจะได้สีพื้นหลังสีเทา ใช้ คลาส สี w3-hover-เพื่อเปลี่ยนสีโฮเวอร์:
ตัวอย่าง
<div class="w3-bar">
<a href="#"
class="w3-button w3-hover-purple">«</a>
<a
href="#" class="w3-button w3-hover-green">1</a>
<a href="#"
class="w3-button w3-hover-red">2</a>
<a href="#" class="w3-button
w3-hover-blue">3</a>
<a href="#"
class="w3-button w3-hover-black">4</a>
<a href="#"
class="w3-button w3-hover-orange">»</a>
</div>
การปรับขนาดเลขหน้า
ใช้w3-tiny , w3-small , w3-large , w3-xlarge , w3-xxlargeหรือ w3-xxxlargeเพื่อกำหนดขนาดเลขหน้า:
ตัวอย่าง
<div class="w3-bar
w3-xlarge">
การแบ่งหน้าตรงกลาง
หากต้องการจัดเลขหน้าให้อยู่ตรงกลาง ให้ใส่องค์ประกอบ "w3-bar" ไว้ในองค์ประกอบ "w3-center":
ตัวอย่าง
<div class="w3-center">
<div class="w3-bar">
<a href="#"
class="w3-bar-item w3-button">«</a>
<a href="#"
class="w3-button">1</a>
<a href="#" class="w3-button">2</a>
<a href="#" class="w3-button">3</a>
<a href="#"
class="w3-button">4</a>
<a href="#" class="w3-button">»</a>
</div>
</div>
การแบ่งหน้าแบบมีขอบ
เพิ่ม คลาส w3-borderเพื่อสร้างการแบ่งหน้าด้วยเส้นขอบ:
ตัวอย่าง
<div class="w3-bar
w3-border">
ขอบมน
เพิ่ม คลาส w3-roundถัดจาก w3-border สำหรับขอบโค้งมน:
ตัวอย่าง
<div class="w3-bar
w3-border w3-round">
ตัวอย่างการแบ่งหน้าอื่นๆ
คลาส w3-bar ยังใช้สร้างปุ่มถัดไป/ก่อนหน้าได้:
ตัวอย่างถัดไป/ก่อนหน้า
<div class="w3-bar w3-border w3-round">
<a href="#"
class="w3-button">❮ Previous</a>
<a href="#" class="w3-button
w3-right">Next ❯</a>
</div>
ตัวอย่างเมนูอินไลน์
<div class="w3-show-inline-block">
<div class="w3-bar w3-light-grey">
<a href="#" class="w3-bar-item w3-button w3-dark-grey">Home</a>
<a
href="#" class="w3-bar-item w3-button">Link 1</a>
<a href="#"
class="w3-bar-item w3-button">Link 2</a>
<a href="#"
class="w3-bar-item w3-button">Link 3</a>
</div>
</div>