صفحه‌بندی

از ویکی‌کد، دانشنامهٔ برنامه‌نویسی
پرش به ناوبری پرش به جستجو
Main Page Tutorial
Bootstarp4-menu.png
موارد آموزشی
۱خانه
۲شروع
۳ظرف‌ها
۴شبکه‌بندی پایه
۵تایپوگرافی
۶رنگ‌ها
۷جدول‌ها
۸تصاویر
۹جامبوترون
۱۰هشدارها
۱۱کلیدها
۱۲گروه‌های کلید
۱۳نشان‌ها (Badges)
۱۴نوارهای پیشرفت
۱۵Spinnerها
۱۶صفحه‌بندی
۱۷گروه‌های لیست
۱۸کارت‌ها
۱۹منوهای کرکره‌ای
۲۰Collapse
۲۱Navها
۲۲Navbar
۲۳فرم‌ها
۲۴ورودی‌ها
۲۵گروه‌های ورودی
۲۶فرم‌های سفارشی
۲۷Carousel
۲۸Modal
۲۹راهنمای ابزار
۳۰Popover
۳۱Toast
۳۲Scrollspy
۳۳امکانات
۳۴Flex
۳۵آیکن‌ها
۳۶Media Objects
۳۷فیلترها
شبکه‌بندی
Theme
مرجع

صفحه بندی ساده

اگر وب‌سایتی با تعداد صفحه‌های زیاد دارید، شاید بخواهید نوعی صفحه بندی به هر صفحه اضافه کنید.[۱]

برای ایجاد صفحه بندی ساده، کلاس .pagination را به یک عنصر <ul> اضافه کنید. سپس .page-item را به هر عنصر <li> و کلاس .page-link را به هریک از لینک های <li> داخل آن اضافه کنید:

مثال

1 <ul class="pagination">
2   <li class="page-item"><a class="page-link" href="#">Previous</a></li>
3   <li class="page-item"><a class="page-link" href="#">1</a></li>
4   <li class="page-item"><a class="page-link" href="#">2</a></li>
5   <li class="page-item"><a class="page-link" href="#">3</a></li>
6   <li class="page-item"><a class="page-link" href="#">Next</a></li>
7 </ul>


مشاهدهٔ نتیجه


حالت فعال

کلاس .active برای «برجسته کردن» (به انگلیسی: Highlight) صفحه فعلی استفاده می‌شود:

مثال

1 <ul class="pagination">
2   <li class="page-item"><a class="page-link" href="#">Previous</a></li>
3   <li class="page-item"><a class="page-link" href="#">1</a></li>
4   <li class="page-item active"><a class="page-link" href="#">2</a></li>
5   <li class="page-item"><a class="page-link" href="#">3</a></li>
6   <li class="page-item"><a class="page-link" href="#">Next</a></li>
7 </ul>


مشاهدهٔ نتیجه


حالت غیرفعال

کلاس .disabled برای غیرقابل کلیک کردن لینک‌ها به کار می‌رود:

مثال

1 <ul class="pagination">
2   <li class="page-item disabled"><a class="page-link" href="#">Previous</a></li>
3   <li class="page-item"><a class="page-link" href="#">1</a></li>
4   <li class="page-item"><a class="page-link" href="#">2</a></li>
5   <li class="page-item"><a class="page-link" href="#">3</a></li>
6   <li class="page-item"><a class="page-link" href="#">Next</a></li>
7 </ul>


مشاهدهٔ نتیجه


اندازه صفحه بندی

بلوک‌های صفحه بندی را می‌توان به سایزهای بزرگتر یا کوچکتر تبدیل کرد:

کلاس .pagination-lg را برای بلوک‌های بزرگتر یا .pagination-sm را برای بلوک‌های کوچکتر اضافه کنید:

مثال

 1 <ul class="pagination pagination-lg">
 2   <li class="page-item"><a class="page-link" href="#">Previous</a></li>
 3   <li class="page-item"><a class="page-link" href="#">1</a></li>
 4   <li class="page-item"><a class="page-link" href="#">2</a></li>
 5   <li class="page-item"><a class="page-link" href="#">3</a></li>
 6   <li class="page-item"><a class="page-link" href="#">Next</a></li>
 7 </ul>
 8 
 9 <ul class="pagination pagination-sm">
10   <li class="page-item"><a class="page-link" href="#">Previous</a></li>
11   <li class="page-item"><a class="page-link" href="#">1</a></li>
12   <li class="page-item"><a class="page-link" href="#">2</a></li>
13   <li class="page-item"><a class="page-link" href="#">3</a></li>
14   <li class="page-item"><a class="page-link" href="#">Next</a></li>
15 </ul>


مشاهدهٔ نتیجه


محل قرارگیری (به انگلیسی: Alignment) صفحه بندی

می‌توان از کلاس‌های کاربردی (Utility Classes) برای تغییر محل قرار گیری صفحه بندی استفاده کرد:

مثال

 1 <!-- Default (left-aligned) -->
 2 <ul class="pagination" style="margin:20px 0">
 3   <li class="page-item">...</li>
 4 </ul>
 5 
 6 <!-- Center-aligned -->
 7 <ul class="pagination justify-content-center" style="margin:20px 0">
 8   <li class="page-item">...</li>
 9 </ul>
10 
11 <!-- Right-aligned -->
12 <ul class="pagination justify-content-end" style="margin:20px 0">
13   <li class="page-item">...</li>
14 </ul>


مشاهدهٔ نتیجه

نکته: در مورد کلاس‌های Helper/کاربرد بوت استرپ 4 در بخش BS4 Utilities بیشتر بخوانید.

Breadcrumbها

Breadcrumbها شکل دیگری از صفحه بندی هستند:

کلاس‌های .breadcrumb و .breadcrumb-item محل صفحهٔ فعلی را داخل سلسله مراتب راهبردی (به انگلیسی: Navigational Hirarchy) نشان می‌دهند:

مثال

1 <ul class="breadcrumb">
2   <li class="breadcrumb-item"><a href="#">Photos</a></li>
3   <li class="breadcrumb-item"><a href="#">Summer 2017</a></li>
4   <li class="breadcrumb-item"><a href="#">Italy</a></li>
5   <li class="breadcrumb-item active">Rome</li>
6 </ul>


مشاهدهٔ نتیجه



منابع آموزشی