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

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

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

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

در این بخش نحوه ایجاد صفحه بندی با استفاده از 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
اشتراک گذاری:
021-41658