Pagination Links से आपको ये संकेत मिलता है कि Related Content की एक श्रृंखला कई Pages पर मौजूद है.
आमतौर पर Pagination का उपयोग वह पर होता जहां पर Content की Long Lists के लिए Multi Page Approach सामान्य प्रदर्शन को मैनेज करना होता है जैसे Search Results और Inboxes आदि.
Pagination का उपयोग आपकी Website के Web Page को एक Organized तरीके से छोटा करने के लिए भी किया जाता है.
.pagination
.active
.disabled
.pagination-lg
.pagination-sm
.breadcrumb
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Pagination Example</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Pagination</h2>
<p>The Pagination Example 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>
Bootstrap मे Active State का उपयोग Current Page को Specifies करने के लिए किया जाता है जो Active है. आपको इसके लिये .active class का उपयोग करना होता है.
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Active State</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Bootstrap Active State</h2>
<p>The Bootstrap Active State:</p>
<ul class="pagination">
<li class="active"><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>
Bootstrap मे Disabled State का उपयोग Link को Disable करने के लिए किया जाता है जिससे Link को Click नहीं किया जा सकता है. आपको इसके लिये .disable class का उपयोग करना होता है.
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Disabled State</title>
<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.2.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>Bootstrap Disabled State</h2>
<p>The Bootstrap Disabled State</p>
<ul class="pagination">
<li><a href="#">1</a></li>
<li class="disabled"><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>
Pager Previous और Next Buttons प्रदान करता है. Previous और Next Buttons को बनाने के लिए .pager class को एक <ul> Element मे Add करते है.
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Default Pager</title>
<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.2.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>Bootstrap Default Pager</h2>
<p>The Bootstrap Default Pager</p>
<ul class="pager">
<li><a href="#">Previous</a></li>
<li><a href="#">Next</a></li>
</ul>
</div>
</body>
</html>