ساخت Pageing در Bootstrap

Paging زمانی صورت میگیرد که بخواهید برای مطالب خود صفحه بندی ایجاد کنید و در هر صفحه تعدادی محدود از آیتم ها را به کاربران نشان دهید .با استفاده از فریمورک Bootstrap می توانید Paging های زیبایی تولید کنید .

ابتدا می بایست کدهای زیر ار به قسمت head صفحه خود بیفزاید :

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

برای فعال و غیرفعال کردن هر صفحه از کلاس های مربوطه استفاده کنید :

<ul class="pagination">
    <li class="disabled"><a href="#">«</a></li>
    <li class="active"><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> 

نتیجه :

 Bootstrap-Pagination

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

<ul class="pager">
    <li class="previous"><a href="#">← Previous</a></li>
    <li class="next"><a href="#">Next →</a></li>
</ul>

نتیجه :

 Bootstrap-pager


توسط : عثمان رحیمی  7 ماه قبل ، یکشنبه 6 مهر 1393 ساعت 20:44  0  3383

نظر شما برای ما مهم است و به ما در بهبود سایت کمک میکند.


ارسال نظر
  • نام (اختیاری ) :
  • پست الکترونیک :
  • توضیحات :

مطالب مرتبط