در خدمت شما هستیم با آموزش Bootstrap 4 جلسه چهاردهم (Pagination)
آموزش Bootstrap 4 جلسه چهاردهم (Pagination) از سری آموزش های تک قسمتی است.
pagination چیست؟
اگر بخواهیم برای آن دسته از دوستانی که نمیدانند pagination چیست آن را توضیح دهیم باید بگوییم صفحات شما تعدادی محتوا دارند به عنوان مثال ۱۰ مطلب اما سایت شما بالای ۱۰۰ مطلب دارد برای سنگین نشدن و طولانی نشدن صفحه ،صفحات را شماره بندی میکنند و در هر صفحه تعدادی مطلب را نشان میدهند به این شمارنده صفحات pagination میگویند.
چگونه شمارنده صفحات بسازیم؟
قبل از ساخت شمارنده صفحات ابتدا ما باید اجزای تشکیل دهنده آن را بشناسیم . شمارنده صفحات تشکیل شده از یک تگ ul است که تگ های li که شماره های صفحه هستند در آن قرار دارند. این ساختار html شمارنده صفحات است اما برای استایل دهی بوت استرپ کلاس های آماده ای را برای pagination ها ساخته است برای استفاده از کلاس های بوت استرپ باید کلاس pagination را به تگ ul خود بدهید و به li ها کلاس page-item را بدهید اگر قصد دارید در li های خود از تگ a استفاده کنید باید کلاس page-link را نیز به تگ های a بدهید برای واضح شدن موضوع میتوانید از کد زیر کمک بگیرید:
<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>
فعال کرده صفحه در حال اجرا
برای اینکه کاربر بفهمد در چه صفحه ای حضور دارد باید صفحه ای که در آن حضور دارد شماره اش با باقی صفحات متفاوت باشد برای این مورد بوت استرپ یک کلاس آماده ساخته است که میتوانید از آن استفاده کنید کافیست کلاس active را به li بدهید که میخواهید عدد آن فعال باشد به این صورت میتوانید صفحه ای که کاربر در آن حضور دارد را نسبت به باقی صفحات متمایز کنید برای واضح شدن موضوع میتوانید از کد زیر کمک بگیرید:
<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 active"><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>
غیرفعال کردن صفحه
فرض کنید کاربر در صفحه اول است پس برای او دکمه previous نباید کار کند چرا که صفحه ای قبل از صفحه اول وجود ندارد پس عملا در این حالت باید دکمه previous غیر فعال باشد یا برعکس فکر کنید کاربر در آخرین صفحه سایت باشد پس دکمه next باید برای کاربر غیر فعال باشد در این صورت شما میتوانید با کلاس آماده disabled که توسط بوت استرپ ایجاد شده است امکان کلیک را از هر li بگیرید و آن را غیرفعال کنید . برای واضح شدن موضوع میتوانید از کد زیر کمک بگیرید:
<ul class="pagination"> <li class="page-item disabled"><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>
اندازه شمارنده صفحات
شاید شما به اندازه ای به غیر از حالت پیشفرض pagination نیاز داشته باشید این اندازه که پیشفرض است مقدار سایز متوسط است به کمک کلاس های بوت استرپ میتوانید سایز بزگتر یا حتی کوچکتر بسازید اگر قصد دارید شمارنده صفحه ای در سایز بزرگتر داشته باشید کافیست کلاس pagination-lg را به تگ ul خود بدهید توجه کنید از آنجایی که همه المان ها باید باهم هم سایز باشند ما این کلاس را به تگ ul میدهیم که روی تمام li های داخل آن اعمال شود و اگر قصد ساخت شمارنده صفحه با سایز کوچکتر دارید از کلاس pagination-sm در تگ ul استفاده کنید برای واضح شدن موضوع از کد زیر کمک بگیرید:
<ul class="pagination pagination-lg"> <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> <ul class="pagination pagination-sm"> <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>
موقعیت pagination
در حالت عادی بنا به زبان پیشفرض انگلیسی شمارنده صفحه در سمت چپ صفحه قرار میگیرد اما بوت استرپ ۲ کلاس دیگر نیز دارد که به واسطه آن ها شما میتوانید موقعیت شمارنده صفحه را تغییر دهید ما این دو کلاس را برای شما لیست میکنیم و جایگاه هرکدام را میگوییم:
- justify-content-center : به کمک این کلاس میتوانید شمارنده را در مرکز صفحه قرار دهید.
- justify-content-end : به کمک این کلاس میتوانید شمارنده را به راست صفحه منتقل کنید.
برای واضح شدن موضوع میتوانید از کد زیر کمک بگیرید:
<ul class="pagination justify-content-center">
<li class="page-item"><a class="page-link" href="javascript:void(0);">Previous</a></li>
<li class="page-item"><a class="page-link" href="javascript:void(0);">1</a></li>
<li class="page-item"><a class="page-link" href="javascript:void(0);">2</a></li>
<li class="page-item"><a class="page-link" href="javascript:void(0);">Next</a></li>
</ul>
<ul class="pagination justify-content-end">
<li class="page-item"><a class="page-link" href="javascript:void(0);">Previous</a></li>
<li class="page-item"><a class="page-link" href="javascript:void(0);">1</a></li>
<li class="page-item"><a class="page-link" href="javascript:void(0);">2</a></li>
<li class="page-item"><a class="page-link" href="javascript:void(0);">Next</a></li>
</ul>
Breadcrumbs
به عنوان آخرین مبحث میخواهیم درباره Breadcrumbs که معادل فارسی آن نان ریزه یا خرده نان است صحبت کنیم اینکه چرا این اسم را روی این قابلیت گذاشته اند بر میگردد به یک داستان قدیمی که شخصی برای گم نشدن به واسطه خزده نان مسیر را علامت گذاری کرده است دقیقا کاربرد این قابلیت همین است شما را در سایت هدایت میکنید و موقعیت فعلی شما را در سایت میگوید همچنین میگوید دسته بندی و مرحله قبلی چه بوده است اگر مراحل را به عقب برگردید به صفحه اصلی سایت میرسید. برای ساختن این قابلیت کافیست از ul و li استفاده کنید و کلاس breadcrumb را به تگ ul خود بدهید و به li های داخل آن کلاس breadcrumb-item را بدهید تا بتوانید یک breadcrumb بسازید برای واضح شدن موضوع از کد زیر کمک بگیرید:
<ul class="breadcrumb"> <li class="breadcrumb-item"><a href="#">Photos</a></li> <li class="breadcrumb-item"><a href="#">Summer 2017</a></li> <li class="breadcrumb-item"><a href="#">Italy</a></li> <li class="breadcrumb-item active">Rome</li> </ul>
همچنین برای راحتی شما کل مباحث آموزش را در کد زیر جای داده ایم:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Pagination</h2>
<p>To create a basic pagination, add the .pagination class to an ul element. Then add the .page-item to each li element and a .page-link class to each link inside li:</p>
<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>
</div>
----------------------------------------------------------------------------
<div class="container">
<h2>Pagination - Active State</h2>
<p>Add class .active to let the user know which page he/she is on:</p>
<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>
</div>
----------------------------------------------------------------------------
<div class="container">
<h2>Pagination - Disabled State</h2>
<p>Add class .disabled if a page for some reason is disabled:</p>
<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 disabled"><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>
</div>
----------------------------------------------------------------------------
<div class="container">
<h2>Pagination - Sizing</h2>
<p>Add class .pagination-lg for larger blocks or .pagination-sm for smaller blocks.</p>
<p>Large:</p>
<ul class="pagination pagination-lg">
<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>
<p>Default:</p>
<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>
<p>Small:</p>
<ul class="pagination pagination-sm">
<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>
</div>
----------------------------------------------------------------------------
<div class="container">
<h2>Pagination</h2>
<p>Use utilitiy classes to change the alignment of the pagination:</p>
<ul class="pagination">
<li class="page-item"><a class="page-link" href="javascript:void(0);">Previous</a></li>
<li class="page-item"><a class="page-link" href="javascript:void(0);">1</a></li>
<li class="page-item"><a class="page-link" href="javascript:void(0);">2</a></li>
<li class="page-item"><a class="page-link" href="javascript:void(0);">Next</a></li>
</ul>
<ul class="pagination justify-content-center">
<li class="page-item"><a class="page-link" href="javascript:void(0);">Previous</a></li>
<li class="page-item"><a class="page-link" href="javascript:void(0);">1</a></li>
<li class="page-item"><a class="page-link" href="javascript:void(0);">2</a></li>
<li class="page-item"><a class="page-link" href="javascript:void(0);">Next</a></li>
</ul>
<ul class="pagination justify-content-end">
<li class="page-item"><a class="page-link" href="javascript:void(0);">Previous</a></li>
<li class="page-item"><a class="page-link" href="javascript:void(0);">1</a></li>
<li class="page-item"><a class="page-link" href="javascript:void(0);">2</a></li>
<li class="page-item"><a class="page-link" href="javascript:void(0);">Next</a></li>
</ul>
</div>
----------------------------------------------------------------------------
<div class="container">
<h2>Breadcrumbs</h2>
<p>The .breadcrumb class indicates the current page's location within a navigational hierarchy:</p>
<ul class="breadcrumb">
<li class="breadcrumb-item"><a href="#">Photos</a></li>
<li class="breadcrumb-item"><a href="#">Summer 2017</a></li>
<li class="breadcrumb-item"><a href="#">Italy</a></li>
<li class="breadcrumb-item active">Rome</li>
</ul>
</div>
<br>
</body>
</html>
می توانید دیگر قسمت ها را در لینک زیر ببینید:
آموزش Bootstrap 4 جلسه سیزدهم (Spinner)
آموزش Bootstrap 4 جلسه پانزدهم (List Groups)
شما می توانید این آموزش را به صورت آنلاین از ویدیو زیر ببینید:
همچنین در صورت علاقه می توانید این آموزش را از باکس دانلود موجود در زیر همین پست دانلود نمایید.