Bootstrap4 菜鳥(niǎo)教程
- Bootstrap4 教程
- Bootstrap4 安裝使用
- Bootstrap4 網(wǎng)格系統(tǒng)
- Bootstrap4 文字排版
- Bootstrap4 顏色
- Bootstrap4 表格
- Bootstrap4 圖像形狀
- Bootstrap4 Jumbotron
- Bootstrap4 信息提示框
- Bootstrap4 按鈕
- Bootstrap4 按鈕組
- Bootstrap4 徽章
- Bootstrap4 進(jìn)度條
- Bootstrap4 分頁(yè)
- Bootstrap4 列表組
- Bootstrap4 卡片
- Bootstrap4 下拉菜單
- Bootstrap4 折疊
- Bootstrap4 導(dǎo)航
- Bootstrap4 導(dǎo)航欄
- Bootstrap4 面包屑導(dǎo)航
- Bootstrap4 表單
- Bootstrap4 表單控件
- Bootstrap4 輸入框組
- Bootstrap4 自定義表單
- Bootstrap4 輪播
- Bootstrap4 模態(tài)框
- Bootstrap4 提示框
- Bootstrap4 彈出框
- Bootstrap4 滾動(dòng)監(jiān)聽(tīng)
- Bootstrap4 小工具
- Bootstrap4 Flex 布局
- Bootstrap4 多媒體對(duì)象
Bootstrap4 分頁(yè)
分頁(yè)是通過(guò)將內(nèi)容劃分為單獨(dú)的頁(yè)面來(lái)組織內(nèi)容的過(guò)程。
分頁(yè)在幾乎每個(gè)web應(yīng)用程序中都經(jīng)常以某種或其他形式使用，例如，搜索引擎使用分頁(yè)在搜索結(jié)果頁(yè)面上顯示有限數(shù)量的結(jié)果，或在博客或論壇上為每個(gè)頁(yè)面顯示有限數(shù)量的文章。
網(wǎng)頁(yè)開(kāi)發(fā)過(guò)程，如果碰到內(nèi)容過(guò)多，一般都會(huì)做分頁(yè)處理。
Bootstrap 4 可以很簡(jiǎn)單的實(shí)現(xiàn)分頁(yè)效果。
要?jiǎng)?chuàng)建一個(gè)基本的分頁(yè)可以在 <ul> 元素上添加 .pagination 類。然后在 <li> 元素上添加 .page-item 類：:
<!DOCTYPE html> <html> <head> <title>Bootstrap 示例</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css"> <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script> <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h2>分頁(yè)</h2> <p>要?jiǎng)?chuàng)建一個(gè)基本的分頁(yè)可以在 ul 元素上添加 .pagination 類。然后在 li 元素上添加 .page-item 類：</p> <ul class="pagination"> <li class="page-item"><a class="page-link" href="#">Previous</a></li> <li class="page-item"><a class="page-link" href="#">1</a></li> <li class="page-item"><a class="page-link" href="#">2</a></li> <li class="page-item"><a class="page-link" href="#">3</a></li> <li class="page-item"><a class="page-link" href="#">Next</a></li> </ul> </div> </body> </html>測(cè)試看看 ?/?
當(dāng)前頁(yè)頁(yè)碼狀態(tài)
當(dāng)前頁(yè)可以使用 .active 類來(lái)高亮顯示：
<!DOCTYPE html> <html> <head> <title>Bootstrap 示例</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css"> <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script> <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h2>當(dāng)前頁(yè)頁(yè)碼狀態(tài)</h2> <p>當(dāng)前頁(yè)可以使用 .active 類來(lái)高亮顯示：</p> <ul class="pagination"> <li class="page-item"><a class="page-link" href="#">Previous</a></li> <li class="page-item"><a class="page-link" href="#">1</a></li> <li class="page-item active"><a class="page-link" href="#">2</a></li> <li class="page-item"><a class="page-link" href="#">3</a></li> <li class="page-item"><a class="page-link" href="#">Next</a></li> </ul> </div> </body> </html>測(cè)試看看 ?/?
不可點(diǎn)擊的分頁(yè)鏈接
.disabled 類可以設(shè)置分頁(yè)鏈接不可點(diǎn)擊:
<!DOCTYPE html> <html> <head> <title>Bootstrap 示例</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css"> <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script> <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h2>不可點(diǎn)擊的分頁(yè)鏈接</h2> <p>.disabled 類可以設(shè)置分頁(yè)鏈接不可點(diǎn)擊:</p> <ul class="pagination"> <li class="page-item disabled"><a class="page-link" href="#">Previous</a></li> <li class="page-item"><a class="page-link" href="#">1</a></li> <li class="page-item"><a class="page-link" href="#">2</a></li> <li class="page-item"><a class="page-link" href="#">3</a></li> <li class="page-item"><a class="page-link" href="#">Next</a></li> </ul> </div> </body> </html>測(cè)試看看 ?/?
分頁(yè)顯示大小
可以將分頁(yè)條目設(shè)置為不同的大小。
.pagination-lg 類設(shè)置大字體的分頁(yè)條目，.pagination-sm 類設(shè)置小字體的分頁(yè)條目:
<!DOCTYPE html> <html> <head> <title>Bootstrap 示例</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css"> <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script> <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h2>分頁(yè)顯示大小</h2> <p>.pagination-lg 類設(shè)置大字體的分頁(yè)條目，.pagination-sm 類設(shè)置小字體的分頁(yè)條目:</p> <ul class="pagination pagination-lg"> <li class="page-item"><a class="page-link" href="#">Previous</a></li> <li class="page-item"><a class="page-link" href="#">1</a></li> <li class="page-item"><a class="page-link" href="#">2</a></li> <li class="page-item"><a class="page-link" href="#">3</a></li> <li class="page-item"><a class="page-link" href="#">Next</a></li> </ul> <ul class="pagination pagination-sm"> <li class="page-item"><a class="page-link" href="#">Previous</a></li> <li class="page-item"><a class="page-link" href="#">1</a></li> <li class="page-item"><a class="page-link" href="#">2</a></li> <li class="page-item"><a class="page-link" href="#">3</a></li> <li class="page-item"><a class="page-link" href="#">Next</a></li> </ul> </div> </body> </html>測(cè)試看看 ?/?
面包屑導(dǎo)航
.breadcrumb 和 .breadcrumb-item 類用于設(shè)置面包屑導(dǎo)航：
<!DOCTYPE html> <html> <head> <title>Bootstrap 示例</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css"> <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script> <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h2>面包屑導(dǎo)航</h2> <p>.breadcrumb 和 .breadcrumb-item 類用于設(shè)置面包屑導(dǎo)航：</p> <ul class="breadcrumb"> <li class="breadcrumb-item"><a href="#">Photos</a></li> <li class="breadcrumb-item"><a href="#">Summer 2017</a></li> <li class="breadcrumb-item"><a href="#">Italy</a></li> <li class="breadcrumb-item active">Rome</li> </ul> </div> </body> </html>測(cè)試看看 ?/?