Bootstrap 4 分页使用方法
发布日期 ： 2020-05-14 21:01:22 UTC
访问量： 9 次浏览
Bootstrap 4分页
分页是用来在网站中实现页面之间的导航。Bootstrap中使用的分页有一大块连接的链接，很难错过，而且容易扩展。
基本分页：
基本分页可以用以下类来指定。
.pagination类是用来指定列表组的分页。.page-item类用于指定组中的每个分页项目。.page-link类是用来指定分页项目中的链接。
示例:
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 4 | Pagination</title>
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width, initial-scale=1">
<link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js">
</script>
<script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">
</script>
</head>
<body>
<div class="container">
<h1>Bootstrap 4 | Basic Pagination</h1>
<!-- Declare the pagination class -->
<ul class="pagination">
<!-- Declare the item in the group -->
<li class="page-item">
<!-- Declare the link of the item -->
<a class="page-link" href="#">Previous</a>
</li>
<!-- Rest of the pagination items -->
<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>
输出:
禁用状态：
分页链接可以通过使用 .disabled 类来使它们看起来无法点击。这可用于禁用"上一页"或"下一页"按钮。.disabled 类在内部使用 pointer-events: none 来使链接不可点击，然而，由于这一规范并不总是被实施，最好是通过设置 tabindex 属性为 -1 来使其不可能被导航到。这个属性控制一个元素是否可以用 tab 键来导航。
示例:
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 4 | Pagination</title>
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width, initial-scale=1">
<link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js">
</script>
<script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">
</script>
</head>
<body>
<div class="container">
<h1>Bootstrap 4 | Pagination Disabled State</h1>
<!-- Declare the pagination class -->
<ul class="pagination">
<!-- Specify the disabled class to style this item disabled -->
<li class="page-item disabled">
<!-- Specify tabindex to make the link non navigatable -->
<a class="page-link" href="#" tabindex="-1">
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>
输出:
活动状态：
分页链接可以通过在分页项目上使用 .active 类来突出它们作为当前活动页面的风格。
示例:
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 4 | Pagination</title>
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width, initial-scale=1">
<link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js">
</script>
<script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">
</script>
</head>
<body>
<div class="container">
<h1>Bootstrap 4 | Pagination Active State</h1>
<!-- Declare the pagination class -->
<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>
<!-- Specify the active class to style this item active -->
<li class="page-item active">
<a class="page-link" href="#">3</a>
</li>
<li class="page-item">
<a class="page-link" href="#">Next</a>
</li>
</ul>
</div>
</body>
</html>
输出:
分页组的大小：
分页组可以通过使用额外的类使其变大或变小。输入组有3种可能的大小。
.pagination-sm类用于更小的尺寸。.pagination-lg类用于更大的尺寸。.pagination类是默认尺寸。
示例:
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 4 | Pagination</title>
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width, initial-scale=1">
<link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js">
</script>
<script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">
</script>
</head>
<body>
<div class="container">
<h1>Bootstrap 4 | Pagination Sizing</h1>
<b>Large Pagination</b>
<!-- Specify pagination-lg for large pagination group -->
<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>
<b>Small Pagination</b>
<!-- Specify pagination-sm for small pagination group -->
<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>
<b>Normal Pagination</b>
<!-- Normal size pagination -->
<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>
输出:
分页组的对齐方式：
分页组可以通过使用flexbox实用类，向右或向中间对齐。
.justify-content-center类是用来将组别向中心对齐的。.justify-content-end类用于将该组向右对齐。
示例:
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 4 | Pagination</title>
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width, initial-scale=1">
<link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js">
</script>
<script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">
</script>
</head>
<body>
<div class="container">
<h1>Bootstrap 4 | Pagination Alignment</h1>
<b>Align to the center</b>
<!-- Specify justify-content-center to align to the center -->
<ul class="pagination justify-content-center">
<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>
<b>Align to the right</b>
<!-- Specify justify-content-end to align to the right -->
<ul class="pagination justify-content-end">
<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>
输出:
本文链接 :Bootstrap 4 分页使用方法