Bootstrap Pagination
Pagination is a technique to organize a large content into several part , later show part one by one. "pagination" class is used to do pagination.
Example
Output :
Pagination with Disabled and Active States
Two class is used for this purpose.
Output :
Sizes of Pagination
you can change the size of pagination by "pagination-lg","pagination-sm","pagination"
Output :
Breadcrumbs
Another form for pagination is breadcrumbs
That comes under the single well format
Example
Pagination is a technique to organize a large content into several part , later show part one by one. "pagination" class is used to do pagination.
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="pagination">
<li><a
href="#">«</a></li>
<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>
<li><a
href="#">»</a></li>
</ul>
</div>
</body>
</html>
Pagination with Disabled and Active States
Two class is used for this purpose.
- disabled
- active
<!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="pagination">
<li
class="disabled"><a
href="#">«</a></li>
<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>
<li><a
href="#">»</a></li>
</ul>
</div>
</body>
</html>
Sizes of Pagination
you can change the size of pagination by "pagination-lg","pagination-sm","pagination"
- pagination-lg
- pagination-sm
- pagination
<!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="pagination
pagination-lg">
<li
><a
href="#">«</a></li>
<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>
<li><a
href="#">»</a></li>
</ul>
<br
/>
<ul
class="pagination
pagination-sm">
<li
><a
href="#">«</a></li>
<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>
<li><a
href="#">»</a></li>
</ul>
<br
/>
<ul
class="pagination">
<li
><a
href="#">«</a></li>
<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>
<li><a
href="#">»</a></li>
</ul>
</div>
</body>
</html>
Breadcrumbs
Another form for pagination is breadcrumbs
That comes under the single well format
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="breadcrumb">
<li><a
href="#">C:</a></li>
<li><a
href="#">My
Computer</a></li>
<li><a
href="#">Desktop</a></li>
<li><a
href="#">My
Document</li>
</ul>
<div class="container">
<div class="container">
</body>
</html>
No comments:
Post a Comment