صفحه بندی چیست؟
- پیوندهای صفحه بندی نشان می دهد که یک سری محتوای مرتبط در چندین صفحه وجود دارد
- تعداد زیادی از صفحات در برخی رابطه ها مانند نتایج جستجو یا صندوق ورودی به یکدیگر پیوند داده شده اند.
کلاس های صفحه بندی
- صفحه بندی
- .فعال
- .معلول
- .pagination-lg
- .pagination-sm
- .خرده نان
صفحه بندی اولیه
- اگر وب سایت خود را دارید که صفحات زیادی دارد، باید صفحه بندی را مرتب کنید
- در تگ <ul> از کلاس pagination استفاده کنید
نمونه برنامه برای صفحه بندی پایه
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width, initial scale=1">
- <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
- </head>
- <body>
- <div class="container">
- <div class="row">
- <h1 class="text-center page-header text-info">
- Bootstrap Pagination
- </h1>
- <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>
- </div>
- </div>
- <script type="text/javascript" src="js/bootstrap.min.js"></script>
- <script type="text/css" src="js/jquery"></script>
- </body>
- </html>
خروجی
![خروجی](http://pezhvak24.ir/dl/10kcor/cscd/article/bootstrap-pagination-and-pager/Images/1.png)
این خروجی برای صفحه بندی اولیه است
کار با آیکون ها
- به دنبال استفاده از نماد یا نماد به جای متن برای برخی از پیوندهای صفحه بندی
- مطمئن شوید که از صفحهخوان مناسب با ویژگیهای aria و ابزار .sr-only پشتیبانی میکنید.
نمونه برنامه کار با آیکون ها
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width, initial scale=1">
- <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
- </head>
- <body>
- <div class="container">
- <div class="row">
- <h1 class="text-center page-header text-info">
- Bootstrap Pagination
- </h1>
- <ul class = "pagination">
- <li><a href = "#">«</a></li>
- <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>
- <li><a href = "#">»</a></li>
- </ul>
- </div>
- </div>
- <script type="text/javascript" src="js/bootstrap.min.js"></script>
- <script type="text/css" src="js/jquery"></script>
- </body>
- </html>
خروجی
که خروجی کار با نمادها است
حالت فعال
- حالت فعال نشان می دهد که صفحه فعلی چیست
- کلاس فعال استفاده می شود
- به راحتی تشخیص دهید که در کدام صفحه هستیم
نمونه برنامه برای حالت فعال
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width, initial scale=1">
- <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
- </head>
- <body>
- <div class="container">
- <div class="row">
- <h1 class="text-center page-header text-info">
- Bootstrap Pagination
- </h1>
- <ul class = "pagination">
- <li><a href = "#">«</a></li>
- <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>
- <li><a href = "#">»</a></li>
- </ul>
- </div>
- </div>
- <script type="text/javascript" src="js/bootstrap.min.js"></script>
- <script type="text/css" src="js/jquery"></script>
- </body>
- </html>
خروجی
![خروجی](http://pezhvak24.ir/dl/10kcor/cscd/article/bootstrap-pagination-and-pager/Images/3.png)
این خروجی برای حالت فعال است
شخص در صفحه دوم کار می کرد
غیرفعال کردن حالت
- استفاده از غیرفعال کردن لینک cont قادر به غیرقابل کلیک کردن است
- .disable class در حال استفاده است
نمونه برنامه برای حالت غیر فعال کردن
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width, initial scale=1">
- <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
- </head>
- <body>
- <div class="container">
- <div class="row">
- <h1 class="text-center page-header text-info">
- Bootstrap Pagination
- </h1>
- <ul class = "pagination">
- <li><a href = "#">«</a></li>
- <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>
- <li><a href = "#">»</a></li>
- </ul>
- </div>
- </div>
- <script type="text/javascript" src="js/bootstrap.min.js"></script>
- <script type="text/css" src="js/jquery"></script>
- </body>
- </html>
خروجی
![خروجی](http://pezhvak24.ir/dl/10kcor/cscd/article/bootstrap-pagination-and-pager/Images/4.png)
این خروجی برای غیرفعال کردن لینک است