آموزش بوت استرپ : صفحه بندی
در این قسمت از آموزش ها میخواهیم با کلاس های مختلف صفحه بندی که بوت استرپ برای طراحی سایت در نظر گرفته است آشنا شویم. صفحه بندی ها در طراحی سایت میتوانند در قسمت های مختلفی مورد استفاده قرار گیرند. به عنوان مثال برای نمایش محصولات میتوانید از صفحه بندی استفاده کنید.
صفحه بندی در بوت استرپ:
جدول زیر خلاصه کلاسهای مورد استفاده بوت استرپ برای صفحه بندی را نمایش می دهد:
[ برای مشاهده لینک ، با نام کاربری خود وارد شوید یا ثبت نام کنید ]
صفحه بندی پیش فرض در بوت استرپ:
برای ایجاد یک صفحه بندی ساده در بوت استرپ کافی است یک لیست ایجاد کنید و آنها را داخل یک کلاس pagination قرار دهید. مثال :
تصویر این کد به صورت زیر است:کد:
<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>
[ برای مشاهده لینک ، با نام کاربری خود وارد شوید یا ثبت نام کنید ]
وضعیتهای صفحه بندی در بوت استرپ:
میتوانید یک دکمه را به عنوان فعال و بقیه دکمه ها را به عنوان غیر فعال انتخاب کنید. برای این کار از کلاس active و disabled استفاده کنید. مثال :
در این مثال شماره 2 غیر فعال است و اگر ماوس را روی آن ببریم به صورت غیر فعال و وورد ممنوع نمایش داده میشود.تصویر این کد به صورت زیر است:کد:
<li><a href="#">«</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="#">»</a></li>
</ul>
[ برای مشاهده لینک ، با نام کاربری خود وارد شوید یا ثبت نام کنید ]
اندازه صفحه بندی در بوت استرپ :
برای تغییر اندازه صفحه بندی در بوت استرپ میتوانید از کلاسهای pagination-lg ,pagination-sm استفاده کنید.مثال:
تصویر کدبالا به صورت زیر است:کد:
<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><br>
<ul class="pagination">
<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><br>
<ul class="pagination pagination-sm">
<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>
[ برای مشاهده لینک ، با نام کاربری خود وارد شوید یا ثبت نام کنید ]
صفحه بندی متنی در بوت استرپ:
اگر میخواهید در طراحی سایت خود از صفحه بندی متنی به صورت کلیدهای بعدی و قبلی استفاده کنید میتوانید از کلاس pager استفاده کنید. جدول زیر کلاسهای مختلف مورد استفاده برای ایجاد دکمه ها را نشان میدهد:
[ برای مشاهده لینک ، با نام کاربری خود وارد شوید یا ثبت نام کنید ]
صفحه بند متنی پیش فرض در بوت استرپ:
مثال زیر ایجاد یک صفحه بند متنی ساده را نمایش میدهد:
تصویردموی کد بالا به صورت زیراست:کد:
<li><a href="#">بعدی</a></li>
<li><a href="#">قبلی</a></li>
</ul>
[ برای مشاهده لینک ، با نام کاربری خود وارد شوید یا ثبت نام کنید ]
کمه های ترازبندی شده :
برای ایجاد این دکمه ها میتوانید ازکلاسهای previous و next استفاده کنید:
تصویر کد بالا به صورت زیر است:کد:
<li class="previous"><a href="#"> →جدیدتر </a></li>
<li class="next"><a href="#"> قدیمی تر ←</a></li>
</ul>
[ برای مشاهده لینک ، با نام کاربری خود وارد شوید یا ثبت نام کنید ]
وضعیت ها:
برای فعال یا غیر فعال کردن هریک از دکمه ها براحتی میتوانید از کلاس disabled استفاده کنید:
تصویر کد بالا به صورت زیر است:کد:
<li class="previous"><a href="#"> →جدیدتر </a></li>
<li class="next disabled"><a href="#"> قدیمی تر ←</a></li>
</ul>
[ برای مشاهده لینک ، با نام کاربری خود وارد شوید یا ثبت نام کنید ]
