about 9 years ago
Hello friends, Here is simple code of using Pagination. You can use this code to make your page more attractive and give a easy access by reaching on several pages from a single columns of links.
Pagination is a navigation tool that will help users to tap through a sries of pages one by one. It is an additional feature to use navigation option for browsing through single parts of a given pages.In newspaper pagination play important role for reading large article. It is much better option then traditional "<< previous and next >>" button.
Try this code for making wonderful templates or web pages.
Source Code:-
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <title>Pagination in Bootstrap</title>
- <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/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>
- <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>
- <li><a href="#">6</a></li>
- <li><a href="#">7</a></li>
- <li><a href="#">8</a></li>
- <li><a href="#">9</a></li>
- <li><a href="#">10</a></li>
- <li><a href="#">Next >></a></li>
- <br>
- <li>
- Go to page: <input type="text"> <button type="button">Go</button>
- </li>
- </ul>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Pagination in Bootstrap</title>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/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>
<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>
<li><a href="#">6</a></li>
<li><a href="#">7</a></li>
<li><a href="#">8</a></li>
<li><a href="#">9</a></li>
<li><a href="#">10</a></li>
<li><a href="#">Next >></a></li>
<br>
<li>
Go to page: <input type="text"> <button type="button">Go</button>
</li>
</ul>
output:-
0 Comment(s)