W3.CSS sahifalash
Sahifalash (pagination) nima?
Sahifalash — katta hajmdagi ma’lumotlarni kichikroq, alohida sahifalarga bo‘lish jarayoni.
W3.CSS oddiy sahifalash boshqaruv elementlarini yaratish uchun panellar (bar) va tugmalardan foydalanadi.
Sahifalash klasslari
Sahifalash havolalarini guruhlash uchun w3-bar dan foydalaning.
Havolalarni tugmaga o‘xshatish uchun w3-button qo‘shing:
Misol
<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>
Tugmalar orasidagi bo‘shliqni olib tashlash uchun w3-bar-item qo‘shing:
Misol
<div class="w3-bar">
<a href="#" class="w3-bar-item w3-button">«</a>
<a href="#" class="w3-bar-item w3-button">1</a>
<a href="#" class="w3-bar-item w3-button">2</a>
<a href="#" class="w3-bar-item w3-button">3</a>
<a href="#" class="w3-bar-item w3-button">4</a>
<a href="#" class="w3-bar-item w3-button">5</a>
<a href="#" class="w3-bar-item w3-button">»</a>
</div>
Sahifalash strelkalari
Oldingi va keyingi strelkalarni qo‘shish uchun HTML belgilar (entity) yoki ikonkalardan foydalaning:
Misol
<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">»</a>
</div>
Faol sahifa
Joriy sahifani ajratib ko‘rsatish uchun w3-color klassini qo‘shing:
Misol
<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>
Hover ranglari
Hover rangini o‘zgartirish uchun w3-hover-color klassidan foydalaning:
Misol
<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>
Sahifalash o‘lchami
O‘lchamni o‘zgartirish uchun w3-small, w3-large va w3-xlarge kabi W3.CSS o‘lcham klasslaridan foydalaning:
Markazlashtirilgan sahifalash
Sahifalashni markazga joylashtirish uchun w3-bar ni w3-center elementi ichiga joylashtiring:
Misol
<div class="w3-center 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">»</a>
</div>
Chegarali sahifalash
Sahifalash atrofida chegara yaratish uchun w3-border qo‘shing:
Yumaloq chegaralar
Yumaloq chegaralar uchun w3-round ni w3-border bilan birga qo‘shing:
Oldingi va keyingi
w3-bar klassidan oldingi va keyingi sahifalarga o‘tish navigatsiyasi uchun ham foydalanish mumkin:
Misol
<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>
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!