السلام علیک یا اباعبداللّه الحسین

سبد خرید (0)

صفحه بندی واکنشگرا

صفحه بندی در W3.CSS

اگر سایت شما دارای صفحات زیادی باشد،شما میتوانید ،صفحه بندی مرتب شده ای برای هر صفحه داشته باشید:

صفحه بند پایه

برای ایجاد یک صفحه بندی پایه ،کلاس w3-pagination رابه یک عنصر <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="#">&laquo;</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="#">&raquo;</a></li>
</ul>
خودتان امتحان کنيد »

لینک فعال/جاری

از کلاسهای  w3-color برای مشخص کردن صفحه ای که کاربر در آن است ،استفاده میشود:

مثال

<ul class="w3-pagination">
  <li><a href="#">&laquo;</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="#">&raquo;</a></li>
</ul>
خودتان امتحان کنيد »

رنگ ها زمان حرکت موس

به صورت پیش فرض، زمانی که شما موس را روی لینکهای صفحه بندها میبرید،رنگ پس زمینه آنها خاکستری میشود.

از هرکدام از کلاس های w3-hover-color برای تغییر رنگ  ،زمان حرکت موس استفاده می شود:

مثال

<ul class="w3-pagination">
  <li><a href="#" class="w3-hover-purple">&laquo;</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">&raquo;</a></li>
</ul>
خودتان امتحان کنيد »

اندازه صفحه بندها

برای اندازه صفحه بندها از w3-tiny, w3-small, w3-large, w3-xlarge, w3-xxlargeوw3-xxxlarge استفاده میشود:

مثال

<ul class="w3-pagination w3-xlarge">
خودتان امتحان کنيد »

صفحه بند مرزدار

کلاس  w3-border را برای ایجاد یک صفحه بند مرزدار (حاشیه دار) بیافزایید:

مثال

<ul class="w3-pagination w3-border">
خودتان امتحان کنيد »

مرزهای گرد

کلاس w3-round را بعد از w3-border برای گرد کردن مرزها بیافزایید:

مثال

<ul class="w3-pagination w3-border w3-round">
خودتان امتحان کنيد »

صفحه بند وسط چین

برای وسط چین کردن یک صفحه بند،یک <div>  با class=w3-center اطراف <ul> قرار دهید:

مثال

<div class="w3-center">
  <ul class="w3-pagination w3-xlarge">
    ...
  </ul>
</div>
خودتان امتحان کنيد »

صفحه بندی های دیگر، مثال های خودتان امتحان کنید

Next/previous مثال

<ul class="w3-pagination w3-border w3-round">
  <li><a href="#">&#10094; Previous</a></li>
  <li><a href="#">Next &#10095;</a></li>
</ul>
خودتان امتحان کنيد »

منوی درون خطی مثال

<ul class="w3-pagination w3-light-grey">
  <li><a href="#" class="w3-dark-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>
خودتان امتحان کنيد »