Bootstrap4 基本教程

Bootstrap4 ページング

ページングは、内容を独立したページに分割して内容を構成するプロセスです。
ページングは、ほぼすべてのウェブアプリケーションである種の形式で使用されます。例えば、検索エンジンは検索結果ページで限られた数の結果を表示するためにページングを使用し、ブログやフォーラムでは各ページで限られた数の記事を表示するために使用されます。

ウェブ開発の過程で、内容が多すぎる場合、一般的にはページング処理を行います。

Bootstrap 4 ページング効果を実現するのは非常に簡単です。

基本的ページを作成するには、<ul>要素に　.paginationクラスを追加してください。次に、　<li>要素に .pageを追加してください。-item　class：:

示例

<!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>分页</h2>
　　<p>要创建一个基本的分页可以在　ul　元素上添加　.pagination　class。然后在　li　元素上添加　.page-item　class：</p>　　　　　　　　　　　　　　　　　　
　　<ul　class="pagination">
　　　　<li　class="page-item"><a　class="page-link"　href="#">前</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="#">次</a></li>
　　</ul>
</div>
</body>
</html>

テストを見てみる ‹/›

当前页页码状态

当前页可以使用 .active　class 来高亮显示：

示例

<!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>当前页页码状态</h2>
　　<p>当前页可以使用　.active　class 来高亮显示：</p>　　　　　　　　　　　　　　　　　　
　　<ul　class="pagination">
　　　　<li　class="page-item"><a　class="page-link"　href="#">前</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="#">次</a></li>
　　</ul>
</div>
</body>
</html>

テストを見てみる ‹/›

不可点击的分页链接

.disabled　class 可以设置分页链接不可点击:

示例

<!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>不可点击的分页链接</h2>
　　<p>.disabled　class 可以设置分页链接不可点击:</p>　　　　　　　　　　　　　　　　　　
　　<ul　class="pagination">
　　　　<li　class="page-item　disabled"><a　class="page-link"　href="#">前</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="#">次</a></li>
　　</ul>
</div>
</body>
</html>

テストを見てみる ‹/›

分页显示大小

可以将分页条目设置为不同的大小。

.pagination-lg 类设置大字体的分页条目，.pagination-sm 类设置小字体的分页条目:

示例

<!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>分页显示大小</h2>
　　<p>.pagination-lg　class 设置大字体的分页条目，.pagination-sm　class 设置小字体的分页条目:</p>　　　　　　　　　　　　　　　　　　
　　<ul　class="pagination　pagination-lg">
　　　　<li　class="page-item"><a　class="page-link"　href="#">前</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="#">次</a></li>
　　</ul>
　　　
　　<ul　class="pagination　pagination-sm">
　　　　<li　class="page-item"><a　class="page-link"　href="#">前</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="#">次</a></li>
　　</ul>
</div>
</body>
</html>

テストを見てみる ‹/›

面包屑导航

.breadcrumb 和 .breadcrumb-item class 用于设置面包屑导航：

示例

<!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>パンくずリストナビゲーション</h2>
　　<p>.breadcrumb　および　.breadcrumb-item　クラスを使用してパンくずリストナビゲーションを設定します：</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>

テストを見てみる ‹/›

Bootstrap4 リストグループ Bootstrap4 プログレスバー