Bootstrap基本チュートリアル

Bootstrapプラグイン

Bootstrapページネーション

この章では、Bootstrapがサポートするページング機能について説明します。ページング(Pagination)は、無序列表であり、Bootstrapは他のインターフェース要素と同様にページングを処理します。

ページング(Pagination)

以下の表は、Bootstrapが提供するページングのclassを示しています。

クラス	説明	サンプルコード
.pagination	ページを表示するためにこのclassを追加します。	<ul> 　　<li><a　href="#">«/a></li> 　　<li><a　href="#">1</a></li> 　　....... </ul>
.disabled, .active	リンクをカスタマイズするには、以下を使用します。 .disabled クリック不可のリンクを定義するために、以下を使用します。 .active 現在のページを示すために使用します。	<ul> 　　<li><a　href="#">«/a></li> 　　<li><a　href="#">1<span>(現在)</span>/span></a></li> 　　....... </ul>
.pagination-lg, .pagination-sm	これらのclassを使用して異なるサイズのアイテムを取得します。	<ul>.../ul> <ul>.../ul> <ul>.../ul>

デフォルトのページ

以下の例では、上表に記載されているクラスの使用法を示しています .pagination の使い方：

オンラインの例

例

!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="#">«/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="#">»</a></li>
</ul>
</body>
</html>

テストを見てみる ‹/›

以下の結果が表示されます：

ページの状態

以下の例では、上表に記載されているクラスの使用法を示しています .disabled、.active の使い方：

オンラインの例

例

!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="#">«/a></li>
	<li　class="active"><a　href="#">1</a></li>
	<li　class="disabled"><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="#">»</a></li>
</ul>
</body>
</html>

テストを見てみる ‹/›

以下の結果が表示されます：

ページのサイズ

以下の例では、上表に記載されているクラスの使用法を示しています .pagination-* の使い方：

オンラインの例

例

!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　pagination-lg">
	<li><a　href="#">«/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="#">»</a></li>
</ul><br>
<ul　class="pagination">
	<li><a　href="#">«/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="#">»</a></li>
</ul><br>
<ul　class="pagination　pagination-sm">
	<li><a　href="#">«/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="#">»</a></li>
</ul>
</body>
</html>

テストを見てみる ‹/›

以下の結果が表示されます：

翻頁（Pager）

ユーザーにナビゲーションを提供するシンプルな分頁リンクを作成するには、翻頁を使用します。分頁リンクと同様に、翻頁も無序列表です。デフォルトでは、リンクは中央に表示されます。以下のテーブルには、Bootstrapが翻頁を処理するクラスが示されています。

クラス	説明	サンプルコード
.pager	このクラスを追加して、翻頁リンクを取得します。	<ul> 　　<li><a　href="#">前</a></li> 　　<li><a　href="#">次</a></li> </ul>
.previous, .next	クラスを使用して .previous リンクを左寄せにし、 .next リンクを右寄せにします。	<ul> 　　<li><a　href="#">前→</a></li> 　　<li><a　href="#">次→</a></li> </ul>
.disabled	このクラスを追加して、対応するボタンを無効に設定します。	<ul> 　　<li><a　href="#">前→</a></li> 　　<li><a　href="#">次→</a></li> </ul>

デフォルトの翻頁

以下の例では、上表に記載されているクラスの使用法を示しています .pager の使い方：

オンラインの例

例

!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="#">前</a></li>
	<li><a　href="#">次</a></li>
</ul>
</body>
</html>

テストを見てみる ‹/›

以下の結果が表示されます：

アライメントのリンク

以下の例では、上表に記載されているクラスの使用法を示しています .previous、.next の使い方：

オンラインの例

例

!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　class="previous"><a　href="#">←　Older</a></li>
	<li　class="next"><a　href="#">Newer　→</a></li>
</ul>
</body>
</html>

テストを見てみる ‹/›

以下の結果が表示されます：

翻頁の状態

以下の例では、上表に記載されているクラスの使用法を示しています .disabled の使い方：

オンラインの例

例

!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　class="previous　disabled"><a　href="#">←　Older</a></li>
	<li　class="next"><a　href="#">Newer　→</a></li>
</ul>
</body>
</html>

テストを見てみる ‹/›

以下の結果が表示されます：

分頁の詳細な例

クラス	説明	例
.pager	シンプルなページネーションリンク、リンクは中央に配置されています。	試してみてください
.previous	.pager内の前のページのボタンのスタイル、左寄せ	試してみてください
.next	.pager内の次のページのボタンのスタイル、右寄せ	試してみてください
.disabled	リンクを無効にする	試してみてください
.pagination	ページネーションリンク	試してみてください
.pagination-lg	より大きなサイズのページネーションリンク	試してみてください
.pagination-sm	より小さいサイズのページネーションリンク	試してみてください
.disabled	リンクを無効にする	試してみてください
.active	現在のアクセスページリンクのスタイル	試してみてください

Bootstrapタグ Bootstrapパンくずリストナビゲーション