مقدمه
با عرض سلام و وقت بخیر خدمت کاربران سایت پی وی لرن . و کاربرانی که دوره آموزش کامل bootstrap 3 را دنبال می کنند. اگر به نتایج جستجوی موتورهای جستجوگری نظیر گوگل ، یا محتواهای بسیار طولانی در برخی وب سایت ها توجه کرده باشید. ادامه ی نتایج جستجو یا محتوا به صفحه های بعدی منتقل شده و برای دسترسی به ادامه ی مطالب از یک نوار صفحه بندی یا pagination استفاده می شود. تکنیک pagination برای تقسیم بندی محتواهای بسیار طولانی در چندین صفحه در وب سایت شما، بسیار مناسب است. تکنیک pagination در Bootstrap 3 نیز در اندازه و حالتهای متنوعی ارائه شده است. برای آشنایی بیشتر با صفحه بندی در Bootstrap 3 و چگونگی استفاده از طرح ها و نمونه های مختلف آن، ادامه مباحث صفحه بندی (Pagination) در Bootstrap 3 را دنبال کنید.
اگر از محتواهای پر حجم در وب سایت خود استفاده می کنید. که حجم محتوا در چندین صفحه تقسیم می شود، می توانید از pagination در Bootstrap 3 برای دسترسی به صفحات مختلف محتوا، استفاده کنید.
طراحی ساده و پیش فرض pagination در Bootstrap 3 بصورت زیر است:
برای استفاده از نمونه ی ساده ی صفحه بندی در Bootstrap 3 ، کلاس .pagination را به عنصر <ul> اضافه کنید:
مثال :
| <ul class="pagination"> <li><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> <li><a href="#">4</a></li> <li><a href="#">5</a></li> </ul> |
با افزودن کلاس .active صفحه ای جاری که کاربر در حال بررسی است، مشخص خواهد شد:
مثال :
| <ul class="pagination"> <li><a href="#">1</a></li> <li class="active"><a href="#">2</a></li> <li><a href="#">3</a></li> <li><a href="#">4</a></li> <li><a href="#">5</a></li> </ul> |
با اضافه کردن وضعیت غیر فعال به یک لینک از pagination، روی آن نمی توانید کلیک کنید.
با افزودن کلاس .disabled می توانید لینک هایی که به هر دلیلی باید غیر فعال باشند را در pagination مشخص کنید:
مثال :
| <ul class="pagination"> <li><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> <li class="disabled"><a href="#">4</a></li> <li><a href="#">5</a></li> </ul> |
صفحه بندی در Bootstrap 3 در اندازه های کوچک و بزرگ ارائه می شود:
از کلاس .pagination-lg برای اندازه ی بزرگ و از کلاس .pagination-sm برای اندازه کوچک صفحه بندی استفاده کنید:
مثال :
| <ul class="pagination pagination-lg"> <li><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> <li><a href="#">4</a></li> <li><a href="#">5</a></li> </ul> <ul class="pagination pagination-sm"> <li><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> <li><a href="#">4</a></li> <li><a href="#">5</a></li> </ul> |
حالت های دیگری که برای صفحه بندی در Bootstrap 3 ، ارائه شده است، حالت breadcrumb است:
- Home
- Private
- Pictures
- Vacation
با افزودن کلاس .breadcrumb به عنصر <ul> در pagination ، از حالت breadcrumb استفاده کنید:
مثال :
| <ul class="breadcrumb"> <li><a href="#">Home</a></li> <li><a href="#">Private</a></li> <li><a href="#">Pictures</a></li> <li class="active">Vacation</li> </ul> |
کلام آخر
تکنیک pagination در Bootstrap 3 برای دسترسی کاربران به محتواهایی که ادامه ی آن، در چندین صفحه از وب سایت شما قرار گرفته است. بسیار مناسب است. امیدواریم که مباحث آموزش صفحه بندی (Pagination) در Bootstrap 3 نیز مورد توجه و استفاده شما قرار گرفته باشد.
فروشگاه
فیلم های آموزشی
کتاب های آموزشی
مقالات آموزشی
وردپرس
