در این بخش با مفهوم صفحه بندی در بوت استرپ (Pagination) آشنا می‌شویم. صفحه بندی یک مولفه کاربردی است که فهرستی از آیتم ها را در چند صفحه نمایش می‌دهد. این ویژگی امکان می‌دهد کاربران راحت‌تر در میان داده های زیاد جابجا شوند. داده ها به بخش های کوچکتر و قابل مدیریت تقسیم می‌شوند و کار با آن‌ها ساده تر می‌شود.
برای این که صفحه خوان ها و فناوری های کمکی این بخش را به درستی تشخیص دهند، باید آن را درون یک عنصر <nav> قرار دهید.
معمولا صفحات دارای چند بخش ناوبری هستند. به همین دلیل بهتر است برای عنصر <nav> یک برچسب توصیفی با ویژگی aria-label تنظیم کنید. این کار هدف بخش ناوبری را به وضوح مشخص می‌کند.
برای نمونه، اگر فروشگاه آنلاینی برای فروش کفش از صفحه بندی استفاده کند، میتوانید از برچسبی مانند این استفاده کنید:
aria-label=”Search shoes”
صفحه بندی ساده در بوت استرپ
برای ساخت یک صفحه بندی ساده، کلاس .pagination را به عنصر <ul> اضافه کنید. سپس برای هر عنصر <li>، کلاس های .page-item و .page-link را به لینک درون آن بدهید.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap - Pagination</title> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"> </script> </head> <body> <div class="container mt-4"> <nav aria-label="Navigation page"> <ul class="pagination"> <li class="page-item"><a class="page-link" href="#">Previous</a></li> <li class="page-item"><a class="page-link" href="#">1</a></li> <li class="page-item"><a class="page-link" href="#">2</a></li> <li class="page-item"><a class="page-link" href="#">3</a></li> <li class="page-item"><a class="page-link" href="#">Next</a></li> </ul> </nav> </div> </body> </html> |
کار با آیکون ها در صفحه بندی
در این بخش می‌بینیم که چگونه می‌توان به جای متن یک لینک صفحه بندی، از یک نماد (symbol) یا آیکون استفاده کرد.
برای این که صفحه خوان ها (screen readers) به درستی این آیکون ها را تشخیص دهند، باید از ویژگی های aria مناسب استفاده کنید. رعایت این نکته باعث می‌شود تجربه کاربری برای افراد دارای نیازهای ویژه نیز کامل و قابل دسترس باشد.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap - Pagination</title> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"> </script> </head> <body> <div class="container mt-4"> <nav aria-label="Navigation page"> <ul class="pagination"> <li class="page-item"> <a class="page-link" href="#" aria-label="Previous"> <span aria-hidden="true">«</span> </a> </li> <li class="page-item"><a class="page-link" href="#">1</a></li> <li class="page-item"><a class="page-link" href="#">2</a></li> <li class="page-item"><a class="page-link" href="#">3</a></li> <li class="page-item"> <a class="page-link" href="#" aria-label="Next"> <span aria-hidden="true">»</span> </a> </li> </ul> </nav> </div> </body> </html> |
وضعیت صفحه بندی: غیرفعال و فعال
لینک های صفحه بندی را میتوانید بسته به شرایط مختلف تغییر دهید. اگر لینکی قرار نیست قابل کلیک باشد، از کلاس .disabled استفاده کنید. برای نمایش صفحه ای که کاربر در حال حاضر آن را مشاهده می‌کند، از کلاس .active بهره ببرید.
همچنین کاربران می‌توانند برای لینک های غیرقابل کلیک، کلاس .disabled را به کار ببرند. این کار باعث می‌شود ظاهر لینک به صورت غیرفعال نمایش داده شود و کاربران متوجه شوند که امکان کلیک روی آن وجود ندارد.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap - Pagination</title> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"> </script> </head> <body> <div class="container mt-4"> <nav aria-label="Disabled link"> <ul class="pagination"> <li class="page-item disabled"> <a class="page-link">Previous</a> </li> <li class="page-item"><a class="page-link" href="#">1</a></li> <li class="page-item active" aria-current="page"> <a class="page-link" href="#">2</a> </li> <li class="page-item"><a class="page-link" href="#">3</a></li> <li class="page-item"> <a class="page-link" href="#">Next</a> </li> </ul> </nav> </div> </body> </html> |
کاربران می‌توانند از کلاس .active استفاده کنند تا صفحه فعلی را “برجسته” کنند. این کار به کاربران نشان می‌دهد در کدام صفحه از فهرست صفحه بندی قرار دارند.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap - Pagination</title> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"> </script> </head> <body> <div class="container mt-4"> <nav aria-label="Active link"> <ul class="pagination"> <li class="page-item"><a class="page-link" href="#">Previous</a></li> <li class="page-item"><a class="page-link" href="#">1</a></li> <li class="page-item"><a class="page-link" href="#">2</a></li> <li class="page-item active"><a class="page-link" href="#">3</a></li> <li class="page-item"><a class="page-link" href="#">Next</a></li> </ul> </nav> </div> </body> </html> |
تغییر اندازه صفحه بندی در بوت استرپ
کاربران می‌توانند اندازه صفحه بندی را به دلخواه تغییر دهند و از نسخه های بزرگ‌تر یا کوچکتر استفاده کنند.
کلاس های قابل استفاده برای اندازه های مختلف عبارتند از:
-
کلاس .pagination-lg برای صفحه بندی با اندازه بزرگ
-
کلاس .pagination-sm برای صفحه بندی با اندازه کوچک
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 |
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap - Pagination</title> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"> </script> </head> <body> <div class="container mt-4"> <nav aria-label="Sizing large"> <ul class="pagination pagination-lg"> <li class="page-item active" aria-current="page"> <span class="page-link">1</span> </li> <li class="page-item"><a class="page-link" href="#">2</a></li> <li class="page-item"><a class="page-link" href="#">3</a></li> <li class="page-item"><a class="page-link" href="#">4</a></li> </ul> </nav> <nav aria-label="Sizing small"> <ul class="pagination pagination-sm"> <li class="page-item active" aria-current="page"> <span class="page-link">1</span> </li> <li class="page-item"><a class="page-link" href="#">2</a></li> <li class="page-item"><a class="page-link" href="#">3</a></li> <li class="page-item"><a class="page-link" href="#">4</a></li> </ul> </nav> </div> </body> </html> |
تراز بندی صفحه بندی در بوت استرپ
با استفاده از گزینه های تراز بندی، میتوانید محل قرارگیری مولفه های صفحه بندی را در صفحه وب کنترل کنید.
به طور پیش فرض، صفحه بندی به صورت افقی در سمت چپ صفحه نمایش داده می‌شود. برای قرار دادن آن در مرکز صفحه، کافی است کلاس .justify-content-center را به کلاس پایه .pagination اضافه کنید.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap - Pagination</title> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"> </script> </head> <body> <div class="container mt-4"> <nav aria-label="Pagination center alignment"> <ul class="pagination justify-content-center"> <li class="page-item"><a href="#" class="page-link">Previous</a></li> <li class="page-item"><a href="#" class="page-link">1</a></li> <li class="page-item"><a href="#" class="page-link">2</a></li> <li class="page-item"><a href="#" class="page-link">3</a></li> <li class="page-item"><a href="#" class="page-link">4</a></li> <li class="page-item"><a href="#" class="page-link">Next</a></li> </ul> </nav> </div> </body> </html> |
تراز بندی با استفاده از ابزارهای Flex
برای تنظیم تراز بندی مولفه صفحه بندی، میتوانید از کلاس های مختلف موجود در بخش ابزارهای Flex استفاده کنید. با کمک این ابزارها، می‌توان صفحه بندی را به راحتی در سمت چپ، مرکز، راست یا سایر حالت های دلخواه قرار داد. این موضوع نیز یکی از بخش های مهم در آموزش بوت استرپ به شمار می‌رود.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap - Pagination</title> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"> </script> </head> <body> <div class="container mt-4"> <nav aria-label="Pagination right aligned using flex"> <ul class="pagination justify-content-end d-flex"> <li class="page-item"><a href="#" class="page-link">Previous</a></li> <li class="page-item"><a href="#" class="page-link">1</a></li> <li class="page-item"><a href="#" class="page-link">2</a></li> <li class="page-item"><a href="#" class="page-link">3</a></li> <li class="page-item"><a href="#" class="page-link">4</a></li> <li class="page-item"><a href="#" class="page-link">Next</a></li> </ul> </nav> </div> </body> </html> |
راستی! برای دریافت مطالب جدید در کانال تلگرام یا پیج اینستاگرام سورس باران عضو شوید.
- انتشار: ۱۷ خرداد ۱۴۰۴
دسته بندی موضوعات
- آموزش ارز دیجیتال
- آموزش برنامه نویسی
- آموزش متنی برنامه نویسی
- اطلاعیه و سایر مطالب
- پروژه برنامه نویسی
- دوره های تخصصی برنامه نویسی
- رپورتاژ
- فیلم های آموزشی
- ++C
- ADO.NET
- Adobe Flash
- Ajax
- AngularJS
- apache
- ARM
- Asp.Net
- ASP.NET MVC
- AVR
- Bootstrap
- CCNA
- CCNP
- CMD
- CSS
- Dreameaver
- EntityFramework
- HTML
- IOS
- jquery
- Linq
- Mysql
- Oracle
- PHP
- PHPMyAdmin
- Rational Rose
- silver light
- SQL Server
- Stimulsoft Reports
- Telerik
- UML
- VB.NET&VB6
- WPF
- Xml
- آموزش های پروژه محور
- اتوکد
- الگوریتم تقریبی
- امنیت
- اندروید
- اندروید استودیو
- بک ترک
- بیسیک فور اندروید
- پایتون
- جاوا
- جاوا اسکریپت
- جوملا
- دلفی
- دوره آموزش Go
- دوره های رایگان پیشنهادی
- زامارین
- سئو
- ساخت CMS
- سی شارپ
- شبکه و مجازی سازی
- طراحی الگوریتم
- طراحی بازی
- طراحی وب
- فتوشاپ
- فریم ورک codeigniter
- فلاتر
- کانستراکت
- کریستال ریپورت
- لاراول
- معماری کامپیوتر
- مهندسی اینترنت
- هوش مصنوعی
- یونیتی
- کتاب های آموزشی
- Android
- ASP.NET
- AVR
- LINQ
- php
- Workflow
- اچ تی ام ال
- بانک اطلاعاتی
- برنامه نویسی سوکت
- برنامه نویسی موبایل
- پاسکال
- پایان نامه
- پایتون
- جاوا
- جاوا اسکریپت
- جی کوئری
- داده کاوی
- دلفی
- رباتیک
- سئو
- سایر کتاب ها
- سخت افزار
- سی اس اس
- سی پلاس پلاس
- سی شارپ
- طراحی الگوریتم
- فتوشاپ
- مقاله
- مهندسی نرم افزار
- هک و امنیت
- هوش مصنوعی
- ویژوال بیسیک
- نرم افزار و ابزار برنامه نویسی
- وردپرس
