صفحه‌بندی

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

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

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

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

مثال

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

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

حالت فعال

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

مثال

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

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

حالت غیرفعال

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

مثال

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

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

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

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

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

مثال

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

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

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

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

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

مثال

<!-- Default (left-aligned) -->
<ul class="pagination" style="margin:20px 0">
  <li class="page-item">...</li>
</ul>

<!-- Center-aligned -->
<ul class="pagination justify-content-center" style="margin:20px 0">
  <li class="page-item">...</li>
</ul>

<!-- Right-aligned -->
<ul class="pagination justify-content-end" style="margin:20px 0">
  <li class="page-item">...</li>
</ul>

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

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

Breadcrumbها

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

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

مثال

<ul class="breadcrumb">
  <li class="breadcrumb-item"><a href="#">Photos</a></li>
  <li class="breadcrumb-item"><a href="#">Summer 2017</a></li>
  <li class="breadcrumb-item"><a href="#">Italy</a></li>
  <li class="breadcrumb-item active">Rome</li>
</ul>

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

صفحهٔ بعد »

« صفحهٔ قبل