বুটস্ট্রাপ পেজিনেশন - Bootstrap Pagination
বুটস্ট্রাপ বেসিক পেজিনেশন
যখন ওয়েবসাইটে অনেকগুলো পেজ থাকে, সেক্ষেত্রে পেজিনেশন ব্যবহার খুবি কার্যকর হয়।
বুটস্ট্রাপের বেসিক পেজিনেশন নিম্নরুপঃ
বুটস্ট্রাপ পেজিনেশন তৈরি করার জন্য <ul> এলিমেন্টের মধ্যে .pagination ক্লাস ব্যবহার করুনঃ
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Pagination 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.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>পেজিনেশন</h2>
<p>.pagination ক্লাসের মাধ্যমে পেজিনেশন লিংক তৈরি করা হয়:</p>
<ul class="pagination">
<li><a href="#">১</a></li>
<li><a href="#">২</a></li>
<li><a href="#">৩</a></li>
<li><a href="#">৪</a></li>
<li><a href="#">৫</a></li>
</ul>
</div>
</body>
</html>
ফলাফল
একটিভ স্টেট
ব্যবহারকারী বর্তমানে কোন পেজে আছেন তা বুঝানোর জন্য .active ক্লাস যুক্ত করুনঃ
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Pagination 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.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>পেজিনেশন - একটিভ স্টেট</h2>
<p>ব্যবহারকারী কোন পেজে আছেন তা বুঝানোর জন্য .active ক্লাস যুক্ত করুনঃ</p>
<ul class="pagination">
<li><a href="#">১</a></li>
<li><a href="#">২</a></li>
<li class="active"><a href="#">৩</a></li>
<li><a href="#">৪</a></li>
<li><a href="#">৫</a></li>
</ul>
</div>
</body>
</html>
ফলাফল
Disabled স্টেট
Disabled লিংককে ক্লিক করা যায় না।
যদি কোনো লিংককে disabled করতে চান তাহলে ঐ লিংকে .disabled ক্লাস ব্যবহার করুনঃ
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Pagination 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.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>পেজিনেশন - Disabled স্টেট</h2>
<p>যদি কোনো লিংককে disable করতে চায় তাহলে .disabled ক্লাস ব্যবহার করুনঃ</p>
<ul class="pagination">
<li><a href="#">১</a></li>
<li><a href="#">২</a></li>
<li class="disabled"><a href="#">৩</a></li>
<li><a href="#">৪</a></li>
<li><a href="#">৫</a></li>
</ul>
</div>
</body>
</html>
ফলাফল
পেজিনেশনের আকার
পেজিনেশন সহজে ছোট বড় করা যায়। বড় ব্লকের পেজিনেশনের জন্য .pagination ক্লাসের সাথে .pagination-lg ক্লাস এবং ছোট ব্লকের পেজিনেশনের জন্য .pagination-sm ক্লাস ব্যবহার করুনঃ
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Pagination 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.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>পেজিনেশন - আকার নির্ধারণ</h2>
<p>বড় ব্লকের জন্য পেজিনেশনের জন্য .pagination-lg ক্লাস এবং ছোট ব্লকের পেজিনেশনের জন্য
.pagination-sm ক্লাস ব্যবহার করুনঃ</p>
<ul class="pagination pagination-sm">
<li><a href="#">১</a></li>
<li><a href="#">২</a></li>
<li class="active"><a href="#">৩</a></li>
<li><a href="#">৪</a></li>
<li><a href="#">৫</a></li>
</ul>
<ul class="pagination pagination-lg">
<li><a href="#">১</a></li>
<li><a href="#">২</a></li>
<li class="disabled"><a href="#">৩</a></li>
<li><a href="#">৪</a></li>
<li><a href="#">৫</a></li>
</ul>
</div>
</body>
</html>
ফলাফল
ব্রেডকাম্ব
ব্রেডকাম্বের মাধ্যমেও পেজিনেশন তৈরি করা যায়। .breadcrumb ক্লাসের মাধ্যমে ন্যাভিগেশন আকারে বর্তমান পেজের অবস্থান জানা যায়। ব্রেডকাম্ব তৈরি করার জন্য <ul> এলিমেন্টের মধ্যে .breadcrumb ক্লাস ব্যবহার করুনঃ
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Pagination 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.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>বেডকাম্ব</h2>
<p>ন্যাভিগেশনের আকারে বর্তমান পেজের অবস্থান জানার জন্য ব্রেডকাম্ব ব্যবহার করা হয়।</p>
<ul class="breadcrumb">
<li><a href="#">Home</a></li>
<li><a href="#">Gallery</a></li>
<li><a href="#">Images</a></li>
<li class="active">Orientation</li>
</ul>
</div>
</body>
</html>
ফলাফল
একনজরে ব্রেডকাম্ব এবং পেজিনেশন সংক্রান্ত ক্লাসগুলো দেখে নেইঃ
| ক্লাস | বর্ণনা |
|---|---|
.breadcrumb |
একটি ব্রেডকাম্ব তৈরী করে। |
.pager |
সাধারণ পেজিনেশন লিঙ্ক (পূর্ববর্তী/পরবর্তী) তৈরি করে। |
.previous |
.pager দ্বারা তৈরিকৃত পেজিনেশন লিংকের "পূর্ববর্তী/Previous" বাটনটিকে পেজের বামপাশে এ্যালাইন করে। |
.next |
.pager দ্বারা তৈরিকৃত পেজিনেশন লিংকের "পরবর্তী/Next" বাটনটিকে পেজের ডানপাশে এ্যালাইন করে। |
.disabled |
একটি লিঙ্ককে আনক্লিক করে রাখার জন্য ব্যবহার করা হয়। |
.pagination |
পেজিনেশন লিংক তৈরি করে। |
.pagination-lg |
বড় আকারের পেজিনেশনের জন্য .pagination ক্লাসের সাথে একত্রে ব্যবহার করা হয়। |
.pagination-sm |
ছোট আকারের পেজিনেশনের জন্য .pagination ক্লাসের সাথে একত্রে ব্যবহার করা হয়।
|
.disabled |
একটি unclickable লিংককে বুঝায়। |
.active |
বর্তমান পেজকে একটিভ করার জন্য ব্যবহার করা হয়। |