pagination در بوت‌استرپ | نحوه ایجاد صفحه‌بندی در وب‌سایت‌ها


نویسنده:
سه شنبه ۲۰ آبان ۱۳۹۹
pagination در بوت‌استرپ

اگر شما وب‌سایتی داشته باشید که دارای صفحات زیادی باشد، می‌توانید صفحات سایت خود را با استفاده از Pagination تقسیم‌بندی کنید. در این فصل از آموزش Bootstrap4 با Pagination در بوت‌استرپ آشنا خواهیم شد. بوت‌استرپ به ما کمک خواهد کرد که قالب و صفحه‌بندی مناسب برای وب‌سایتمان طراحی کنیم.

Pagination چیست؟

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

pagination در بوت‌استرپ

برای ساخت یک صفحه‌بندی پایه در بوت‌استرپ کافیست، کلاس .pagination را به تگ ul اضافه کنید. همچنین برای تگ‌های li از کلاس .page-item و در قسمت انتهایی برای هر لینک از کلاس .page-link در تگ a استفاده کنید. برای درک بهتر این موضوع به کد زیر توجه فرمایید:

صفحه‌بندی در حالت فعال

زمانی‌که از حالت فعال در صفحه‌بندی استفاده می‌‌شود، در واقع مشخص می‌کند کدام صفحه انتخاب شده است. بدین‌ترتیب کاربران دچار سردرگمی نمی‌شوند که در کدام صفحه از وب‌سایت حضور دارند. برای ساخت حالت فعال کافیست از کلاس .active برای نمایش صفحه مورد نظر استفاده کنید.

صفحه‌بندی در حالت فعال

صفحه‌بندی در حالت غیرفعال

فرض کنید کاربر در صفحه اول حضور داشته باشد. بدین‌ترتیب برای صفحه‌ی قبل از آن، نیاز است تا دکمه صفحه قبلی غیرفعال باشد. در حالت کلی با استفاده از حالت غیرفعال در صفحه‌بندی، دیگر نمی‌توان بر روی لینک موردنظر کلیک کرد.

pagination صفحه‌بندی در حالت غیرفعال

برای استفاده از این حالت کافی است قطعه کد .disabled را به کد موردنظرتان اضافه کنید.

ترازبندی (محل قرارگیری) در pagination

در طراحی‌هایی که برای قالب‌های وب‌سایت‌ها انجام می‌گیرد، گاهی‌اوقات نیاز دارید که صفحه‌بندی را در بعضی موارد سمت راست، سمت چپ و یا وسط قرار دهید. برای تراز کردن دکمه‌های صفحه‌بندی از justify-content-center و justify-content-end می‌توانید استفاده کنید.

ساخت Breadcrumbs در بوت‌استرپ

یکی دیگر از انواع صفحه‌بندی استفاده از بردکرامب می‌باشد. Breadcrumb برای نمایش مکان یک صفحه نسبت به صفحه اصلی استفاده می‌شود.

ساخت Breadcrumbs

برای اینکار کافیست در تگ ul از کلاس .breadcrumb استفاده کنید و در تگ li از کلاس .breadcrumb-item استفاده کنید.

دیدگاهتان را بنویسید

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *