ایجاد صفحه بندی (pagination) در Bootstrap

تاریخ انتشار: 16 دی 1394

تعداد بازدید: 19 نفر

در این بخش نحوه ایجاد صفحه بندی با استفاده از Bootstrap را خواهید آموخت.

صفحه بندی در Bootstrap :

صفحه بندی یا pagination در واقع فرآیند سازماندهی محتوا از طریق تقسیم کردن آن در صفحات جداگانه میباشد. صفحه بندی تقریباً در هر برنامه وب استفاده میشود برای مثال در موتورهای جستجو جهت نمایش تعداد مشخصی از نتایج جستجو در یک صفحه یا در یک وبلاگ یا تالار گفتگو (forum) برای نمایش تعداد مشخصی از پست ها در هر صفحه به کار برده میشود.

خروجی مثال بالا به شکل زیر خواهد بود :

صفحه بندی دارای حالت های فعال و غیرفعال :

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

خروجی مثال بالا به شکل زیر خواهد بود :

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

تغییر سایزهای صفحه بندی :

میتوانید سایزهای صفحه بندی را تغییر دهید تا ناحیه قابل کلیک را کوچک یا بزرگ نمایید.کلاس های تغییر سایز مانند pagination-lg. یا pagination-sm. را به کلاس پایه pagination. اضافه کنید تا سایز اعداد را بزرگتر یا کوچکتر نمایید.

خروجی مثال بالا به شکل زیر خواهد بود :

ایجاد pager در Bootstrap :

گاهی اوقات به جای صفحه بندی های پیچیده، تنها نیاز به لینک های قبلی (previous) و بعدی (next) جهت ارائه یک ناوبری ساده به کاربر دارید. این عمل با استفاده از کلاس pager. در بوت استرپ ممکن میباشد.

خروجی مثال بالا به شکل زیر خواهد بود :

تنظیم pager ها :

pager ها به طور پیش فرض به صورت افقی در وسط صفحه تنظیم شده اند اما میتوانید با استفاده از کلاس های previous. و next. ، لینک previous را در چپ و لینک next را در راست صفحه قرار دهید.

خروجی مثال بالا به شکل زیر خواهد بود :

همچنین میتوانید کلاس های صفحه بندی disbaled. و active. را برای pager هم استفاده نمایید.

خروجی مثال بالا به شکل زیر خواهد بود :

مطلب بعدی -> ایجاد برچسب ها و علائم در Bootstrap

اشتراک گذاری:

مشاهده نمونه های بیشتر

24 تیر 1403

ثبت مکان در گوگل مپ: آموزش ثبت رایگان مکان کسب و کارتان تنها در ۵ گام

20 تیر 1403

اینفوگرافیک چیست؟ انواع، کاربرد ها و مراحل ساخت Infographic

2 خرداد 1402

راهنمای جامع طراحی سایت فروشگاهی

این راهنما شما را با دانش و استراتژی های مورد نیاز طراحی سایت فروشگاهی استثنایی مجهز می کند. برای کشف قدرت طراحی در فروش آنلاین و ایجاد یک برند دیجیتال موفق آماده شوید.

31 اردیبهشت 1402

تایپوگرافی چیست و چگونه از آن در طراحی سایت استفاده کنیم؟

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

25 اردیبهشت 1402

طرح رنگ چیست و چگونه از آن در طراحی سایت استفاده کنیم؟

در این مقاله، ما به پیچیدگی‌های طرح‌های رنگی در طراحی وب‌ سایت، بررسی اصول تئوری رنگ‌ها، تأثیرات روان‌شناختی رنگ‌ها و ملاحظات عملی برای انتخاب پالت رنگ مناسب می‌پردازیم.

23 اردیبهشت 1402

همه چیز در مورد چیدمان و ناوبری در طراحی سایت

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