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

[saeed410]

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

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

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

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


صفحه بندی پیش فرض در بوت استرپ:

برای ایجاد یک صفحه بندی ساده در بوت استرپ کافی است یک لیست ایجاد کنید و آنها را داخل یک کلاس 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>

تصویر این کد به صورت زیر است:

وضعیتهای صفحه بندی در بوت استرپ:

میتوانید یک دکمه را به عنوان فعال و بقیه دکمه ها را به عنوان غیر فعال انتخاب کنید. برای این کار از کلاس 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 غیر فعال است و اگر ماوس را روی آن ببریم به صورت غیر فعال و وورد ممنوع نمایش داده میشود.تصویر این کد به صورت زیر است:

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

برای تغییر اندازه صفحه بندی در بوت استرپ میتوانید از کلاسهای 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>

تصویر کدبالا به صورت زیر است:

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

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


صفحه بند متنی پیش فرض در بوت استرپ:

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

<ul class="pager">
<li><a href="#">بعدی</a></li>
<li><a href="#">قبلی</a></li>
</ul>

تصویردموی کد بالا به صورت زیراست:

کمه های ترازبندی شده :

برای ایجاد این دکمه ها میتوانید ازکلاسهای previous و next استفاده کنید:

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

تصویر کد بالا به صورت زیر است:

وضعیت ها:

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

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

تصویر کد بالا به صورت زیر است:


در گروه: کامپوننت های لایه بندی
منبع: طراحی سایت