W3.CSS حزمة تصفيح
إذا كان لديك موقع على شبكة الإنترنت مع الكثير من الصفحات، قد ترغب في إضافة نوع من ترقيم الصفحات على كل صفحة:
ترقيم الصفحات الأساسية
لإنشاء ترقيم الصفحات الأساسية، إضافة الطبقة 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-كسلارغي، W3-xxlarge أو W3-xxxlarge إلى حجم ترقيم الصفحات:
تحدها ترقيم الصفحات
إضافة الطبقة W3-الحدود لإنشاء ترقيم الصفحات ذات حدود:
مدورة حدود
إضافة الطبقة W3-الجولة المقبلة لW3-الحدود للحدود مدورة:
ترقيم الصفحات توسيط
لتوسيط ترقيم الصفحات، والتفاف على <div> العنصر مع الطبقة = "مركز W3" حول <UL>:
مثال
<div class="w3-center">
<ul class="w3-pagination
w3-xlarge">
...
</ul>
</div> انها محاولة لنفسك » أمثلة ترقيم الصفحات الأخرى
التالي مثال / السابق
<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> انها محاولة لنفسك »