در خدمت شما هستیم با آموزش Bootstrap جلسه هفدهم (Pager)
آموزش Bootstrap جلسه هفدهم (Pager) از سری آموزش های تک قسمتی است
سلام برنامه در این جلسه مبحث جلسه قبل یعنی صفحه بندی را کامل میکند
در جلسه قبل شماره صفحه ها را ایجاد کردیم و در این جلسه دکمه ها را ایجاد می کنیم
منظور از دکمه ها گزینه های صفحه بعدی و صفحه قبلی است
این دکمه ها با نام های next و previous شناخته می شوند
pager چیست؟
بگذارید ابتدا برای آن دسته از دوستانی که نمیدانند Pager چیست توضیحی بدهیم:
به پیمایش بین صفحات قبلی و بعدی سایت pager گفته میشود.
توجه داشته باشید pager را با جا به جایی بین صفحات سایت اشتباه نگیرید.
برای آنکه متوجه بشوید مثالی عمومی تر میزنیم:
فرض کتابی میخوانید و از صفحه ۱۰ به صفحه ۱۱ میروید و یا برعکس از صفحه ۱۱ به ۱۰ بر میگردید به این عمل pager میگویند
اما اگر از صفحه ۱۰ کتابی به صفحه ۱۱ کتابی دیگر بروید این عمل مشابه جا به جایی بین صفحات سایت است.
حال که با مفهوم pager اشنا شدید به سراغ معرفی دستور pager در بوت استرپ میرویم.
دستور pager
همانطور که بالا گفته شد به کمک کلاس های Pager که به آن ها می پردازیم میتوانید صفحات قبلی و بعدی سایت را ببینید.
کلاس های pager که ۲ کلاس هستند را برای شما معرفی میکنیم:
- next : به کمک این کلاس میتوانید دکمه صفحه بعدی را ایجاد کنید
- previous : به کمک این کلاس میتوانید صفحه قبلی را ایجاد کنید
برای آنکه بهتر متوجه شوید میتوانید مثال زیر را دنبال کنید
<!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/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Pager</h2>
<p>The .previous and .next classes align each link to the sides of the page:</p>
<ul class="pager">
<li class="previous"><a href="#">Previous</a></li>
<li class="next"><a href="#">Next</a></li>
</ul>
</div>
</body>
</html>
همانطور که میبینید تنها با ۲ کلاس ساده توانستیم دکمه های قبلی و بعدی صفحات را بسازیم.
می توانید دیگر قسمت ها را در لینک زیر ببینید
آموزش Bootstrap جلسه شانزدهم(pagenation)
آموزش Bootstrap جلسه هجدهم(List Groups)
شما می توانید این آموزش را به صورت آنلاین از ویدیو زیر ببینید
و یا آن را در آپارات مشاهده کنید:
آموزش Bootstrap 4 جلسه بیست و دوم (Inputs Group)
آموزش Bootstrap جلسه پایانی (Design Template)
آموزش Bootstrap جلسه سی و پنجم (Simple Template)
آموزش Bootstrap جلسه سی و چهارم (Affix)