Home > Article > Web Front-end > How to use bootstrap pagination

How to use bootstrap pagination

爱喝马黛茶的安东尼Original: 2019-07-17 15:53:312025browse

Download bootstrap and unzip it to the local computer directory, and create a new test directory to store test files.

How to use bootstrap pagination

Create a new test pagination.html file.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>Bootstrap 分页测试</title>
<link rel="stylesheet" href="../css/bootstrap.min.css">  
<script src="../js/jquery-2.0.3.js"></script>
<script src="../js/bootstrap.min.js"></script>
</head>
<body>
<ul class="pagination">
<li><a href="#">&laquo;</a></li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li class="disabled"><a href="#">4</a></li>
<li class="active"><a href="#">5</a></li>
<li><a href="#">&raquo;</a></li>
</ul>
</body>
</html>

Related recommendations: "bootstrap Getting Started Tutorial"

Open the browser to test the page effect

How to use bootstrap pagination

Paging button It displays normally, but does not show which page it is on. Adding class="active" can highlight the page number.

How to use bootstrap pagination

#If you need to disable each page from being clickable, you can add the class="disabled" attribute.

How to use bootstrap pagination

When you click on a page number, you need to highlight that page.

$(&#39;.pagination li&#39;).on(&#39;click&#39;,function () {
      $(&#39;.pagination li&#39;).removeClass(&#39;active&#39;);
      $(this).addClass(&#39;active&#39;);
  });

Add click events to all paging li tags, remove all active displays each time, and then add active to the li that was just clicked, so that the page clicked can be highlighted. On that page.

How to use bootstrap pagination

If you want to adjust the size of the page number box, you can use bootstrap's own attributes

class="pagination pagination-sm" 小
class="pagination" 中
class="pagination pagination-lg" 大

How to use bootstrap pagination

The above is the detailed content of How to use bootstrap pagination. For more information, please follow other related articles on the PHP Chinese website!

bootstrap html class 事件 li

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：How to use bootstrap's drop-down multiple selection boxNext article：How to use bootstrap's drop-down multiple selection box

See more

How to use bootstrap pagination

Related articles