صفحه بندی واکنشگرا
صفحه بندی در W3.CSS
اگر سایت شما دارای صفحات زیادی باشد،شما میتوانید ،صفحه بندی مرتب شده ای برای هر صفحه داشته باشید:
صفحه بند پایه
برای ایجاد یک صفحه بندی پایه ،کلاس w3-pagination رابه یک عنصر <ul> بیافزایید:
مثال
<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 یا آیکون های یک کتابخانه آیکون برای افزودن پیکانهای صفحه بند استفاده میشود:
مثال
<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-color برای مشخص کردن صفحه ای که کاربر در آن است ،استفاده میشود:
مثال
<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-color برای تغییر رنگ ،زمان حرکت موس استفاده می شود:
مثال
<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-tiny, w3-small, w3-large, w3-xlarge, w3-xxlargeوw3-xxxlarge استفاده میشود:
صفحه بند مرزدار
کلاس w3-border را برای ایجاد یک صفحه بند مرزدار (حاشیه دار) بیافزایید:
مرزهای گرد
کلاس w3-round را بعد از w3-border برای گرد کردن مرزها بیافزایید:
صفحه بند وسط چین
برای وسط چین کردن یک صفحه بند،یک <div> با class=w3-center اطراف <ul> قرار دهید:
مثال
<ul class="w3-pagination w3-xlarge">
...
</ul>
</div>
صفحه بندی های دیگر، مثال های خودتان امتحان کنید
Next/previous مثال
<li><a href="#">❮ Previous</a></li>
<li><a href="#">Next ❯</a></li>
</ul>
منوی درون خطی مثال
<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>
- نوشته شده توسط زهرا داوودی
- بازدید: 3511
