Bootstrap Pager
Pager are user for navigating from one page to another.Generally "previous" and "next" keyword and buttons / link used for this purpose."pager" class is used for this purpose.
Example
<!DOCTYPE
html>
<html
lang="en">
<head>
<meta
charset="utf-8">
<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.3.1/jquery.min.js"></script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<meta
name="viewport"
content="width
= device-width, initial-scale = 1">
<body>
<div
class="container">
<ul
class="pager">
<li><a
href="#">←
Previous</a></li>
<li><a
href="#">Next
→</a></li>
</ul>
</div>
</body>
</html>
Output :
Pager Alignment
Pager are aligned center by default.But if you use .previous and .next class.The button with left and right aligned accordingly.
Example
<!DOCTYPE
html>
<html
lang="en">
<head>
<meta
charset="utf-8">
<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.3.1/jquery.min.js"></script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<meta
name="viewport"
content="width
= device-width, initial-scale = 1">
<body>
<div
class="container">
<ul
class="pager">
<li
class="previous"><a
href="#">←
Previous</a></li>
<li
class="next"><a
href="#">Next
→</a></li>
</ul>
</div>
</body>
</html>
Output :
Pager Active and deactive
You can active and deactive pager element by applying "
active" and "disabled" class.
Example
<!DOCTYPE
html>
<html
lang="en">
<head>
<meta
charset="utf-8">
<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.3.1/jquery.min.js"></script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<meta
name="viewport"
content="width
= device-width, initial-scale = 1">
<body>
<div
class="container">
<ul
class="pager">
<li
class="previous
disabled"><a
href="#">←
Previous</a></li>
<li
class="next"><a
href="#">Next
→</a></li>
</ul>
</div>
</body>
</html>
Output :
No comments:
Post a Comment