Share on facebook
Share on twitter
Share on linkedin
Share on email
Share on whatsapp
Share on telegram
Share on print
قسمت چهاردهم bootstrap : نحوه ی صفحه بندی در بوت استرپ ۴

نویسنده:

مرتضی افضلی

Statistics-rafiki

تعداد بازدید:

325

Calendar-amico (2)

تاریخ انتشار:

30 , آذر , 1398

Work time-rafiki

زمان تقریبی مطالعه :

5 دقیقه

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

بوت استرپ ۴ نیز در این زمینه به ما کمک میکند تا به بهترین شکل ، در حالت ریپسانسیو نیز قالب سایت و صفحه بندی طراحی کنیم.

پیشنهاد میشود پیش از ورود به این قسمت از اموزش ، سایر قسمت های دوره ی بوت استرپ ۴ را مطالعه کنید. اما اگر قسمت های پیشین را مطالعه نکردید هیچ جای نگرانی نیست و سعی میکنیم در این قسمت تا حدامکان به قسمت های پیشین اشاره داشته باشیم.

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

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

حالت فعال

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

برای درک بهتر قطعه کد زیر را اجرا کنید.

حالت غیرفعال

برای درک بهتر این موضوع فرض کنید کاربر در صفحه ی اول حضور دارد ، خب قاعدتا صفحه ی قبل از یک وجود ندارد برای همین نیاز است تا دکمه ی صفحه ی قبلی غیر فعال باشد ، برای استفاده از این حالت کافی است قطعه کد .disabled را به اضافه کنید.

برای درک بهتر این موضوع به قطعه کد زیر توجه فرمایید.

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

سایز بندی المان ها برای دستگاه های مختلف استفاده میشود ، برای درک بهتر این موضوع کافی است کلاس .pagination-lg را برای بزرگتر شدن از حالت معمول و کلاس .pagination-sm را برای کوچکتر شدن از حالت معمول اضافه کنید. به مثال زیر توجه کنید:

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

در طراحی هایی که انجام میدهید بسته به نوع مخاطب نیاز دارید صفحه بندی را در بعضی موارد سمت راست ، در بعضی موارد سمت چپ و در بعضی موارد وسط قرار دهید ، برای درک بهتر این موضوع قطعه کد زیر را اجرا فرمایید:

ساخت بردکرامب (Breadcrumbs) در بوت استرپ ۴

یکی دیگر از انواع صفحه بندی استفاده از بردکرامب است ، برای اینکار کافی است در تگ ul از کلاس .breadcrumb استفاده کنید و در تگ li از کلاس .breadcrumb-item استفاده کنید . برای درک بهتر این موضوع به مثال زیر توجه کنید:

ویدیوی قسمت چهاردهم

پیشنهاد میشود برای مطالعه موارد بیشتر به سایت getbootstrap مراجعه فرمایید.

موفق باشید

مرتضی افضلی

مرتضی افضلی

این روزها دیگر نیاز نیست کلی هزینه‌ی اجاره‌ی مغازه بدهید. با دنیای کسب‌وکار اینترنتی و دیجیتال مارکتینگ می‌توانیم کسب درامد داشته باشیم و من در مجموعه‌ی کدپز در این راه همراه شما هستم.

تا کنون 56 نفر در کدپز ثبت نام کرده اند.

2 پاسخ به "قسمت چهاردهم bootstrap : نحوه ی صفحه بندی در بوت استرپ ۴"

  1. سلام ببخشید الان از صفحه بندی که استفاده میکنیم بعد لینک بهش میدم بعد باید صفحه ایجاد کنیم یا همون از تگ divاستفاده کنیم و بهش idبدیم

    • سلام
      بسته به نوع استفاده شما از صفحه بندی داره ، در برخی موارد صلاح بر ایجاد صفحات جدید با لینک جدید ، در برخی شرایط صلاح بر مخفی سازی صفحات و استفاده از id برای نمایان سازی محتوای صفحات است .
      مثلا صفحه ی مقالات سایت ها بهتر است از لینک جدید استفاده شوند ، اما قسمت نظرات مقالات بهتر است با استفاده از جی کوئری کامنت ها مخفی شوند و با کلیک بر روی صفحه بندی آی دی صفحه نمایان شود و محتوای صفحه نمایان شود

ارسال یک پیام

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