قاعدتا هنگامی که که تمام مطالب را در یک صفحه قرار دهیم ، حجم لود صفحه بالا رفته و علاوه بر ان نیز کاربر سردرگم خواهد شد ، برای بهبود این رویه قطعا باید از صفحه بندی استفاده کنیم.
بوت استرپ 4 نیز در این زمینه به ما کمک میکند تا به بهترین شکل ، در حالت ریپسانسیو نیز قالب سایت و صفحه بندی طراحی کنیم.
پیشنهاد میشود پیش از ورود به این قسمت از اموزش ، سایر قسمت های دوره ی بوت استرپ 4 را مطالعه کنید. اما اگر قسمت های پیشین را مطالعه نکردید هیچ جای نگرانی نیست و سعی میکنیم در این قسمت تا حدامکان به قسمت های پیشین اشاره داشته باشیم.
صفحه بندی پایه
قطعا اگر شما سایتی با تعداد زیادی از صفحه دارید باید از صفحه بندی استفاده کنید ، برای ساخت یک صفحه بندی پایه در بوت استرپ کافی است کلاس .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 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 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 را به اضافه کنید.
برای درک بهتر این موضوع به قطعه کد زیر توجه فرمایید.
|
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-lg را برای بزرگتر شدن از حالت معمول و کلاس .pagination-sm را برای کوچکتر شدن از حالت معمول اضافه کنید. به مثال زیر توجه کنید:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<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> |
محل قرار گیری صفحه بندی
در طراحی هایی که انجام میدهید بسته به نوع مخاطب نیاز دارید صفحه بندی را در بعضی موارد سمت راست ، در بعضی موارد سمت چپ و در بعضی موارد وسط قرار دهید ، برای درک بهتر این موضوع قطعه کد زیر را اجرا فرمایید:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<!-- 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> |
ساخت بردکرامب (Breadcrumbs) در بوت استرپ 4
یکی دیگر از انواع صفحه بندی استفاده از بردکرامب است ، برای اینکار کافی است در تگ 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> |
ویدیوی قسمت چهاردهم
پیشنهاد میشود برای مطالعه موارد بیشتر به سایت getbootstrap مراجعه فرمایید.
موفق باشید
2 Comments
Join the discussion and tell us your opinion.
سلام ببخشید الان از صفحه بندی که استفاده میکنیم بعد لینک بهش میدم بعد باید صفحه ایجاد کنیم یا همون از تگ divاستفاده کنیم و بهش idبدیم
سلام
بسته به نوع استفاده شما از صفحه بندی داره ، در برخی موارد صلاح بر ایجاد صفحات جدید با لینک جدید ، در برخی شرایط صلاح بر مخفی سازی صفحات و استفاده از id برای نمایان سازی محتوای صفحات است .
مثلا صفحه ی مقالات سایت ها بهتر است از لینک جدید استفاده شوند ، اما قسمت نظرات مقالات بهتر است با استفاده از جی کوئری کامنت ها مخفی شوند و با کلیک بر روی صفحه بندی آی دی صفحه نمایان شود و محتوای صفحه نمایان شود