pagination در بوت‌استرپ | نحوه ایجاد صفحه‌بندی در وب‌سایت‌ها
اگر شما وب‌سایتی داشته باشید که دارای صفحات زیادی باشد، می‌توانید صفحات سایت خود را با استفاده از Pagination تقسیم‌بندی کنید. در این فصل از آموزش Bootstrap4 با Pagination در بوت‌استرپ آشنا خواهیم شد. بوت‌استرپ به ما کمک خواهد کرد که قالب و صفحه‌بندی مناسب برای وب‌سایتمان طراحی کنیم.
Pagination چیست؟
زمانی‌که همه‌ی مطالب یک وب‌سایت در یک صفحه قرار می‌گیرد، حجم و سرعت صفحه وب‌سایت کم‌تر میشود. از این‌رو برای بهبود این مشکل، می‌توانیم از صفحه‌بندی استفاده کنیم. یک Pagination یا صفحه‌بندی ساده به شکل زیر است:
برای ساخت یک صفحه‌بندی پایه در بوت‌استرپ کافیست، کلاس .pagination را به تگ ul اضافه کنید. همچنین برای تگ‌های li از کلاس .page-item و در قسمت انتهایی برای هر لینک از کلاس .page-link در تگ a استفاده کنید. برای درک بهتر این موضوع به کد زیر توجه فرمایید:
1 2 3 4 5 6 7 | <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 برای نمایش صفحه مورد نظر استفاده کنید.
1 2 3 4 5 6 | <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="#">Next</a></li> </ul> |
صفحه‌بندی در حالت غیرفعال
فرض کنید کاربر در صفحه اول حضور داشته باشد. بدین‌ترتیب برای صفحه‌ی قبل از آن، نیاز است تا دکمه صفحه قبلی غیرفعال باشد. در حالت کلی با استفاده از حالت غیرفعال در صفحه‌بندی، دیگر نمی‌توان بر روی لینک موردنظر کلیک کرد.
برای استفاده از این حالت کافی است قطعه کد .disabled را به کد موردنظرتان اضافه کنید.
1 2 3 4 5 6 7 | <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
در طراحی‌هایی که برای قالب‌های وب‌سایت‌ها انجام می‌گیرد، گاهی‌اوقات نیاز دارید که صفحه‌بندی را در بعضی موارد سمت راست، سمت چپ و یا وسط قرار دهید. برای تراز کردن دکمه‌های صفحه‌بندی از justify-content-center و justify-content-end می‌توانید استفاده کنید.
ساخت Breadcrumbs در بوت‌استرپ
یکی دیگر از انواع صفحه‌بندی استفاده از بردکرامب می‌باشد. Breadcrumb برای نمایش مکان یک صفحه نسبت به صفحه اصلی استفاده میشود.
برای اینکار کافیست در تگ ul از کلاس .breadcrumb استفاده کنید و در تگ li از کلاس .breadcrumb-item استفاده کنید.
1 2 3 4 5 6 | <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> |
دیدگاهتان را بنویسید
You must be logged in to post a comment.