صفحه بندی Pagination در بوت استرپ

[saeed410]

آموزش بوت استرپ : صفحه بندی در این قسمت از آموزش ها میخواهیم با کلاس های مختلف صفحه بندی که بوت استرپ برای طراحی سایت در نظر گرفته است آشنا شویم. صفحه بندی ها در طراحی سایت میتوانند در قسمت های مختلفی مورد استفاده قرار گیرند. به عنوان مثال برای نمایش محصولات میتوانید از صفحه بندی استفاده کنید.

صفحه بندی در بوت استرپ: جدول زیر خلاصه کلاسهای مورد استفاده بوت استرپ برای صفحه بندی را نمایش می دهد:
http://sypna.ir/Portals/0/EducationPageFiles/BootStrap/Pagination/bootstrap-pagination-class.JPG

صفحه بندی پیش فرض در بوت استرپ: برای ایجاد یک صفحه بندی ساده در بوت استرپ کافی است یک لیست ایجاد کنید و آنها را داخل یک کلاس pagination قرار دهید. مثال :


<ul class="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>

تصویر این کد به صورت زیر است:
http://sypna.ir/Portals/0/EducationPageFiles/BootStrap/Pagination/bootstrap-Default-pagination-class.JPG
وضعیتهای صفحه بندی در بوت استرپ: میتوانید یک دکمه را به عنوان فعال و بقیه دکمه ها را به عنوان غیر فعال انتخاب کنید. برای این کار از کلاس active و disabled استفاده کنید. مثال :


<ul class="pagination">
<li><a href="#">&laquo;</a></li>
<li class="active"><a href="#">1</a></li>
<li class="disabled"><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>
در این مثال شماره 2 غیر فعال است و اگر ماوس را روی آن ببریم به صورت غیر فعال و وورد ممنوع نمایش داده میشود.تصویر این کد به صورت زیر است:
http://sypna.ir/Portals/0/EducationPageFiles/BootStrap/Pagination/bootstrap-States-pagination-class.JPG
اندازه صفحه بندی در بوت استرپ : برای تغییر اندازه صفحه بندی در بوت استرپ میتوانید از کلاسهای pagination-lg ,pagination-sm استفاده کنید.مثال:


<ul class="pagination pagination-lg">
<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><br>
<ul class="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><br>
<ul class="pagination pagination-sm">
<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>

تصویر کدبالا به صورت زیر است:
http://sypna.ir/Portals/0/EducationPageFiles/BootStrap/Pagination/bootstrap-sizing-pagination-class.JPG
صفحه بندی متنی در بوت استرپ: اگر میخواهید در طراحی سایت خود از صفحه بندی متنی به صورت کلیدهای بعدی و قبلی استفاده کنید میتوانید از کلاس pager استفاده کنید. جدول زیر کلاسهای مختلف مورد استفاده برای ایجاد دکمه ها را نشان میدهد:
http://sypna.ir/Portals/0/EducationPageFiles/BootStrap/Pagination/bootstrap-pager-class.JPG

صفحه بند متنی پیش فرض در بوت استرپ: مثال زیر ایجاد یک صفحه بند متنی ساده را نمایش میدهد:


<ul class="pager">
<li><a href="#">بعدی</a></li>
<li><a href="#">قبلی</a></li>
</ul>
تصویردموی کد بالا به صورت زیراست:
http://sypna.ir/Portals/0/EducationPageFiles/BootStrap/Pagination/bootstrap-Default-pager-class.JPG
کمه های ترازبندی شده : برای ایجاد این دکمه ها میتوانید ازکلاسهای previous و next استفاده کنید:


<ul class="pager">
<li class="previous"><a href="#"> &rarr;جدیدتر </a></li>
<li class="next"><a href="#"> قدیمی تر &larr;</a></li>
</ul>


تصویر کد بالا به صورت زیر است:
http://sypna.ir/Portals/0/EducationPageFiles/BootStrap/Pagination/bootstrap-Aligned-pager-class.JPG
وضعیت ها: برای فعال یا غیر فعال کردن هریک از دکمه ها براحتی میتوانید از کلاس disabled استفاده کنید:


<ul class="pager">
<li class="previous"><a href="#"> &rarr;جدیدتر </a></li>
<li class="next disabled"><a href="#"> قدیمی تر &larr;</a></li>
</ul>

تصویر کد بالا به صورت زیر است:
http://sypna.ir/Portals/0/EducationPageFiles/BootStrap/Pagination/bootstrap-States-pager-class.JPG

در گروه: کامپوننت های لایه بندی (http://sypna.ir/AllArticles/articleType/CategoryView/categoryId/9/%DA%A9%D8%A7%D9%85%D9%BE%D9%88%D9%86%D9%86%D8%AA-%D9%87%D8%A7%DB%8C-%D9%84%D8%A7%DB%8C%D9%87-%D8%A8%D9%86%D8%AF%DB%8C)
منبع: طراحی سایت (http://Sypna.ir)