W3.CSS ترقيم الصفحات
ترقيم الصفحات الأساسي
إذا كان لديك موقع ويب به العديد من الصفحات ، فقد ترغب في استخدام نوع من ترقيم الصفحات.
لإنشاء ترقيم صفحات أساسي ، استخدم الأزرار ( زر w3 ) في شريط ( شريط 3 ).
مثال
<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>