نمادها

شما اینجا هستید

آموزش Bootstrap 4 جلسه چهاردهم (Pagination)

در خدمت شما هستیم با آموزش Bootstrap 4 جلسه چهاردهم (Pagination)

آموزش Bootstrap 4 جلسه چهاردهم (Pagination) از سری آموزش های تک قسمتی است.

 

pagination چیست؟

اگر بخواهیم برای آن دسته از دوستانی که نمیدانند pagination چیست آن را توضیح دهیم باید بگوییم صفحات شما تعدادی محتوا دارند به عنوان مثال ۱۰ مطلب اما سایت شما بالای ۱۰۰ مطلب دارد برای سنگین نشدن و طولانی نشدن صفحه ،صفحات را شماره بندی میکنند و در هر صفحه تعدادی مطلب را نشان میدهند به این شمارنده صفحات pagination میگویند.

 

چگونه شمارنده صفحات بسازیم؟

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

 

فعال کرده صفحه در حال اجرا

برای اینکه کاربر بفهمد در چه صفحه ای حضور دارد باید صفحه ای که در آن حضور دارد شماره اش با باقی صفحات متفاوت باشد برای این مورد بوت استرپ یک کلاس آماده ساخته است که میتوانید از آن استفاده کنید کافیست کلاس active را به li بدهید که میخواهید عدد آن فعال باشد به این صورت میتوانید صفحه ای که کاربر در آن حضور دارد را نسبت به باقی صفحات متمایز کنید برای واضح شدن موضوع میتوانید از کد زیر کمک بگیرید:

 

غیرفعال کردن صفحه  

فرض کنید کاربر در صفحه اول است پس برای او دکمه previous نباید کار کند چرا که صفحه ای قبل از صفحه اول وجود ندارد پس عملا در این حالت باید دکمه previous غیر فعال باشد یا برعکس فکر کنید کاربر در آخرین صفحه سایت باشد پس دکمه next باید برای کاربر غیر فعال باشد در این صورت شما میتوانید با کلاس آماده disabled که توسط بوت استرپ ایجاد شده است امکان کلیک را از هر li بگیرید و آن را غیرفعال کنید . برای واضح شدن موضوع میتوانید از کد زیر کمک بگیرید:

 

اندازه شمارنده صفحات

شاید شما به اندازه ای به غیر از حالت پیشفرض pagination نیاز داشته باشید این اندازه که پیشفرض است مقدار سایز متوسط است به کمک کلاس های بوت استرپ میتوانید سایز بزگتر یا حتی کوچکتر بسازید اگر قصد دارید شمارنده صفحه ای در سایز بزرگتر داشته باشید کافیست کلاس pagination-lg را به تگ ul خود بدهید توجه کنید از آنجایی که همه المان ها باید باهم هم سایز باشند ما این کلاس را به تگ ul میدهیم که روی تمام li های داخل آن اعمال شود و اگر قصد ساخت شمارنده صفحه با سایز کوچکتر دارید از کلاس pagination-sm در تگ ul استفاده کنید برای واضح شدن موضوع از کد زیر کمک بگیرید:

 

موقعیت pagination

در حالت عادی بنا به زبان پیشفرض انگلیسی شمارنده صفحه در سمت چپ صفحه قرار میگیرد اما بوت استرپ ۲ کلاس دیگر نیز دارد که به واسطه آن ها شما میتوانید موقعیت شمارنده صفحه را تغییر دهید ما این دو کلاس را برای شما لیست میکنیم و جایگاه هرکدام را میگوییم:

  • justify-content-center : به کمک این کلاس میتوانید شمارنده را در مرکز صفحه قرار دهید.
  • justify-content-end : به کمک این کلاس میتوانید شمارنده را به راست صفحه منتقل کنید.

برای واضح شدن موضوع میتوانید از کد زیر کمک بگیرید:

 

Breadcrumbs

به عنوان آخرین مبحث میخواهیم درباره Breadcrumbs که معادل فارسی آن نان ریزه یا خرده نان است صحبت کنیم اینکه چرا این اسم را روی این قابلیت گذاشته اند بر میگردد به یک داستان قدیمی که شخصی برای گم نشدن به واسطه خزده نان مسیر را علامت گذاری کرده است دقیقا کاربرد این قابلیت همین است شما را در سایت هدایت میکنید و موقعیت فعلی شما را در سایت میگوید همچنین میگوید دسته بندی و مرحله قبلی چه بوده است اگر مراحل را به عقب برگردید به صفحه اصلی سایت میرسید. برای ساختن این قابلیت کافیست از ul و li استفاده کنید و کلاس breadcrumb را به تگ ul خود بدهید و به li های داخل آن کلاس breadcrumb-item را بدهید تا بتوانید یک breadcrumb بسازید برای واضح شدن موضوع از کد زیر کمک بگیرید:

 

همچنین برای راحتی شما کل مباحث آموزش را در کد زیر جای داده ایم:

 

می توانید دیگر قسمت ها را در لینک زیر ببینید:

آموزش Bootstrap 4 جلسه سیزدهم (Spinner)

آموزش Bootstrap 4 جلسه پانزدهم (List Groups)

 

شما می توانید این آموزش را به صورت آنلاین از ویدیو زیر ببینید:

 

همچنین در صورت علاقه می توانید این آموزش را از باکس دانلود موجود در زیر همین پست دانلود نمایید.

 

اگر این مطلب آموزنده بود به ما امتیاز دهید
1 ستاره2 ستاره3 ستاره4 ستاره5 ستاره (هنوز امتیازی داده نشده است)
Loading...

این یک فایل mp4 تصویری است که با پلیر های ویدیویی قابل اجرا می باشد

دانلود آموزش Bootstrap 4 جلسه چهاردهم (Pagination): نوع فایل:mp4 حجم فایل:34.06 مگابایت

هر پلیر اجرا کننده فایل ویدیویی

پاسخی بگذارید

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

*

code

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