Bootstrap4 分页
分页是通过将内容划分为单独的页面来组织内容的过程。
分页在几乎每个web应用程序中都经常以某种或其他形式使用，例如，搜索引擎使用分页在搜索结果页面上显示有限数量的结果，或在博客或论坛上为每个页面显示有限数量的文章。
网页开发过程，如果碰到内容过多，一般都会做分页处理。
Bootstrap 4 可以很简单的实现分页效果。
要创建一个基本的分页可以在 <ul> 元素上添加 .pagination 类。然后在 <li> 元素上添加 .page-item 类：:
<!DOCTYPEhtml><html><head><title>Bootstrap示例</title><metacharset="utf-8"><metaname="viewport"content="width=device-width,initial-scale=1"><linkrel="stylesheet"href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css"><scriptsrc="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script><scriptsrc="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script><scriptsrc="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script></head><body><divclass="container"><h2>分页</h2><p>要创建一个基本的分页可以在ul元素上添加.pagination类。然后在li元素上添加.page-item类：</p><ulclass="pagination"><liclass="page-item"><aclass="page-link"href="#">Previous</a></li><liclass="page-item"><aclass="page-link"href="#">1</a></li><liclass="page-item"><aclass="page-link"href="#">2</a></li><liclass="page-item"><aclass="page-link"href="#">3</a></li><liclass="page-item"><aclass="page-link"href="#">Next</a></li></ul></div></body></html>测试看看 ‹/›
当前页页码状态
当前页可以使用 .active 类来高亮显示：
<!DOCTYPEhtml><html><head><title>Bootstrap示例</title><metacharset="utf-8"><metaname="viewport"content="width=device-width,initial-scale=1"><linkrel="stylesheet"href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css"><scriptsrc="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script><scriptsrc="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script><scriptsrc="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script></head><body><divclass="container"><h2>当前页页码状态</h2><p>当前页可以使用.active类来高亮显示：</p><ulclass="pagination"><liclass="page-item"><aclass="page-link"href="#">Previous</a></li><liclass="page-item"><aclass="page-link"href="#">1</a></li><liclass="page-itemactive"><aclass="page-link"href="#">2</a></li><liclass="page-item"><aclass="page-link"href="#">3</a></li><liclass="page-item"><aclass="page-link"href="#">Next</a></li></ul></div></body></html>测试看看 ‹/›
不可点击的分页链接
.disabled 类可以设置分页链接不可点击:
<!DOCTYPEhtml><html><head><title>Bootstrap示例</title><metacharset="utf-8"><metaname="viewport"content="width=device-width,initial-scale=1"><linkrel="stylesheet"href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css"><scriptsrc="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script><scriptsrc="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script><scriptsrc="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script></head><body><divclass="container"><h2>不可点击的分页链接</h2><p>.disabled类可以设置分页链接不可点击:</p><ulclass="pagination"><liclass="page-itemdisabled"><aclass="page-link"href="#">Previous</a></li><liclass="page-item"><aclass="page-link"href="#">1</a></li><liclass="page-item"><aclass="page-link"href="#">2</a></li><liclass="page-item"><aclass="page-link"href="#">3</a></li><liclass="page-item"><aclass="page-link"href="#">Next</a></li></ul></div></body></html>测试看看 ‹/›
分页显示大小
可以将分页条目设置为不同的大小。
.pagination-lg 类设置大字体的分页条目，.pagination-sm 类设置小字体的分页条目:
<!DOCTYPEhtml><html><head><title>Bootstrap示例</title><metacharset="utf-8"><metaname="viewport"content="width=device-width,initial-scale=1"><linkrel="stylesheet"href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css"><scriptsrc="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script><scriptsrc="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script><scriptsrc="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script></head><body><divclass="container"><h2>分页显示大小</h2><p>.pagination-lg类设置大字体的分页条目，.pagination-sm类设置小字体的分页条目:</p><ulclass="paginationpagination-lg"><liclass="page-item"><aclass="page-link"href="#">Previous</a></li><liclass="page-item"><aclass="page-link"href="#">1</a></li><liclass="page-item"><aclass="page-link"href="#">2</a></li><liclass="page-item"><aclass="page-link"href="#">3</a></li><liclass="page-item"><aclass="page-link"href="#">Next</a></li></ul><ulclass="paginationpagination-sm"><liclass="page-item"><aclass="page-link"href="#">Previous</a></li><liclass="page-item"><aclass="page-link"href="#">1</a></li><liclass="page-item"><aclass="page-link"href="#">2</a></li><liclass="page-item"><aclass="page-link"href="#">3</a></li><liclass="page-item"><aclass="page-link"href="#">Next</a></li></ul></div></body></html>测试看看 ‹/›
面包屑导航
.breadcrumb 和 .breadcrumb-item 类用于设置面包屑导航：
<!DOCTYPEhtml><html><head><title>Bootstrap示例</title><metacharset="utf-8"><metaname="viewport"content="width=device-width,initial-scale=1"><linkrel="stylesheet"href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css"><scriptsrc="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script><scriptsrc="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script><scriptsrc="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script></head><body><divclass="container"><h2>面包屑导航</h2><p>.breadcrumb和.breadcrumb-item类用于设置面包屑导航：</p><ulclass="breadcrumb"><liclass="breadcrumb-item"><ahref="#">Photos</a></li><liclass="breadcrumb-item"><ahref="#">Summer2017</a></li><liclass="breadcrumb-item"><ahref="#">Italy</a></li><liclass="breadcrumb-itemactive">Rome</li></ul></div></body></html>测试看看 ‹/›
编辑于2024-06-08 05:26