میلاد با سعادت رسول اکرم(ص) و امام صادق(ع) مبارک، (کد تخفیف 35%: MiladeRasol)

سبد خرید (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>
خودتان امتحان کنيد »