首頁 >web前端 >Bootstrap教程 >bootstrap分頁怎麼實現的

bootstrap分頁怎麼實現的

(*-*)浩原創: 2019-07-19 09:54:172246瀏覽

任何一個網頁裡面, 我們都可以看到分頁, 不管是行動端, 還是pc端, 不管是下拉到下一頁, 還是按鈕下一頁, 都需要分頁支撐你的網站. 這樣首先, 可以提高你的網站的訪問效率. 另外頁面展現也更加好看, 要不然, 上百萬的上千萬的數據. 顯示估計一兩個小時也顯示不出來效果.

bootstrap分頁怎麼實現的

怎麼使用bootstrap實現分頁呢?（推薦學習：Bootstrap影片教學）

在bootstrap中分頁有兩種, 一種是正常的分頁, 第二種是翻頁. 就是有上一頁和下一頁的顯示效果.

分頁: 帶有頁面的效果, 這裡你裡面可以隨你的網站怎麼定義都可以,比方說. 裡面不是文字, 而是一些圖標,一樣可以. 只不過數字能夠更好的看效果. 使用樣式: .pagination

分頁（Pagination），是一種無序列表，Bootstrap 像處理其他介面元素一樣處理分頁。

帶有上一項和下一項的翻頁效果, 最簡單的方式. 樣式.pager

（ Pager）翻頁，如果您想要建立一個簡單的分頁連結為使用者提供導航，可透過翻頁來實現。與分頁連結一樣，翻頁也是無序列表。

兩種方法的實作, 都是需要使用ul標籤, 連結是使用a. 還有一些狀態, 比方說, 我選了某一項. 其中的某一項靜止使用.

分頁實例

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"> 
	<title>Bootstrap 实例 - 默认的分页</title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">  
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/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><a href="#">4</a></li>
	<li><a href="#">5</a></li>
	<li><a href="#">&raquo;</a></li>
</ul>

</body>
</html>

翻頁實例

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"> 
	<title>Bootstrap 实例 - 默认的翻页</title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">  
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<ul class="pager">
	<li><a href="#">Previous</a></li>
	<li><a href="#">Next</a></li>
</ul>

</body>
</html>

更多Bootstrap相關技術文章，請造訪Bootstrap教學欄位進行學習！

以上是bootstrap分頁怎麼實現的的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：bootstrap如何讓div居右下一篇：bootstrap如何讓div居右

看更多