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

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

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

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

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

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

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

حالت فعال

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

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

حالت غیرفعال

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

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

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

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

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

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

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

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

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

موفق باشید

برچسب ها : اموزش بوت استرپ، اموزش صفحه بندی

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