جلسه ۱۵ : Pager در Bootstrap 3

• جزئیات
• نوع محتواآموزش تصویری

مقدمه

با عرض سلام و وقت بخیر خدمت کاربران سایت پی وی لرن . و کاربرانی که  دوره کامل آموزش Bootstrap 3 را دنبال می کنند. در این آموزش که در تکمیل مباحث pagination در bootstrap 3 ارائه شده است، قصد داریم شما را با ابزاری که مکمل pagination است، آشنا کنیم. در اغلب وب سایت هایی که از نوار pagination برای صفحه بندی محتواهای طولانی وب سایت استفاده می کنند. ابزاری به نام pager را نیز، برای مرور صفحه قبلی و بعدی، به pagination اضافه می کنند. البته pager به تنهایی در صفحات کم (در حد دو تا سه صفحه) برای صفحه بندی آنها، کافی است. در ادامه ی آموزش، شما را بیشتر با مباحث pager در bootstrap 3 آشنا خواهیم کرد.

pager در bootstrap 3

pager چیست؟

از pager می توان به عنوان یک pagination در قالب صفحات وب، استفاده کرد.

pager در bootstrap 3 ، دکمه های پرکاربرد previous (قبلی) و next (بعدی) را ارائه می کند.

برای ایجاد دکمه های previous/next در هر بخش از وب سایت خود، کلاس .pager ار به یک عنصر <ul> اضافه کنید.

مثال:

نتیجه ی کد فوق:

در نمونه ی فوق، مشاهده می کنید که دکمه های  previous/next اضافه شده اند و قابل استفاده هستند.

همچنین می توانید ترازبندی دکمه های previous/next را برای منظم بودن آنها تعیین کنید. که در ادامه به آن، اشاره کرده ایم.

ترازبندی button های pager

از کلاسهای  .previous و.next  می توانید برای مشخص کردن ترازبندی راست و چپ  button ها در یک pager استفاده کنید.

مثال:

نتیجه ی کد فوق:

• Previous
• Next

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

 کلام آخر

pager در bootstrap 3 برای ایجاد دسترسی به صفحات قبلی و بعدی در محتواهایی که از دو تا سه صفحه تشکیل شده اند بسیار مناسب است، همچنین می توان این ابزار را به عنوان مکملی برای تکمیل pagination نیز، استفاده کرد.