در خدمت شما هستیم با آموزش Bootstrap جلسه شانزدهم (pagenation)
آموزش Bootstrap جلسه شانزدهم (pagenation) از سری آموزش های تک قسمتی است
سلام برنامه در این جلسه درباره صفحه بندی توضیح می دهد
معمولا در صفحات سایت ۵ الی ۱۰ مطلب را در صفحه نمایش می دهند و الباقی به صفحات بعد می رود
امروز قصد داریم درباره این صفحه بندی ها و دکمه های نمایش آن صحبت کنیم
بوت استرپ برای صفحه بندی هم چاره ای اندیشیده است و کلاسی را به آن اختصاص داده است
این دکمه ها کاملا رسپانسیو هستند و محدودیتی در تعداد صفحات ندارند
کلاس Pagination
همانطور که بالاتر گفتیم کلاس pagination شما امکان شماره گذاری صفحاتتان را میدهد که نکته بسار مهمی در امر سئو نیز هست.
این شماره گذاری به کاربران شما امکان مشاهده مطالب قدیمی تر شما را نیز میدهد.
اگر بخواهیم مثالی از نحوه استفاده از این کلاس بزنیم مورد زیر مناسب است:
<!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>Pagination</h2>
<p>The .pagination class provides pagination links:</p>
<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>
</body>
</html>
در مثال بالا میبینید که ul و li هایی در داخل کلاس pagination قرار گرفته است و همین کلاس به تنهایی ظاهر آنها را تغییر داده است.
با اضافه کردن کلاس active به تگ های li میتوانید آن صفحه را به صورت فعال در بیاورید
اگر این موضوع را متوجه نشده اید میتوانید مثال زیر را دنبال کنید:
<!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>Pagination - Active State</h2>
<p>Add class .active to let the user know which page he/she is on:</p>
<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>
</div>
</body>
</html>
و در نهایت به کمک کلاس disabled میتوانید شماره صفحه و قابلیت کلید روی آن را غیرفعال کنید.
برای این موضوع میتوانید مثال زیر را پیگیری کنید:
<!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>Pagination - Disabled State</h2>
<p>Add class .disabled if a page for some reason is disabled:</p>
<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>
</div>
</body>
</html>
می توانید دیگر قسمت ها را در لینک زیر ببینید
آموزش Bootstrap جلسه پانزدهم(Progress Bars)
آموزش Bootstrap جلسه هفدهم(Pager)
شما می توانید این آموزش را به صورت آنلاین از ویدیو زیر ببینید:
و یا آن را در آپارات مشاهده کنید:
آموزش Bootstrap 4 جلسه بیست و دوم (Inputs Group)
آموزش Bootstrap جلسه پایانی (Design Template)
آموزش Bootstrap جلسه سی و پنجم (Simple Template)
آموزش Bootstrap جلسه سی و چهارم (Affix)
ممنون کی آموزش های بوت استرپ ۴ هم میذارید؟
ممنون از لطف و پیگیری شما آموزش های بوت استرپ ۴ در حال ساخت هستند