ページネーション　　Pagination

---

ページネーションやページャーに最適なスタイル。

---

使い方

ポイントは２つ。

1. nav要素内にclass属性にpaginationを指定したul要素を配置し、リスト形式でページを指定。
2. 現在開いているページを表すリスト項目のli要素のclass属性には、activeを指定する。

<nav>
	<ul class="pagination">
		<li>
			<a href="#" aria-label="前のページへ">
				<span aria-hidden="true">«</span>
			</a>
		</li>
		<li><a href="#">1</a></li>
		<li class="active"><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="#" aria-label="次のページへ">
				<span aria-hidden="true">»</span>
			</a>
		</li>
	</ul>
</nav>

基本

基本的使い方。

表示サンプル

ソースコード

<nav>
	<ul class="pagination">
		<li>
			<a href="#" aria-label="前のページへ">
				<span aria-hidden="true">«</span>
			</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="#" aria-label="次のページへ">
				<span aria-hidden="true">»</span>
			</a>
		</li>
	</ul>
</nav>

現在開いているページ

現在開いているページを表すリスト項目のli要素のclass属性には、activeを指定する。

表示サンプル

ソースコード

<nav>
	<ul class="pagination">
		<li>
			<a href="#" aria-label="前のページへ">
				<span aria-hidden="true">«</span>
			</a>
		</li>
		<li><a href="#">1</a></li>
		<li class="active"><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="#" aria-label="次のページへ">
				<span aria-hidden="true">»</span>
			</a>
		</li>
	</ul>
</nav>

リンク無効化

リンクを無効化したいリスト項目のli要素のclass属性には、disabledを指定する。

表示サンプル

ソースコード

<nav>
	<ul class="pagination">
		<li class="disabled">
			<a href="#" aria-label="前のページへ">
				<span aria-hidden="true">«</span>
			</a>
		</li>
		<li class="active"><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="#" aria-label="次のページへ">
				<span aria-hidden="true">»</span>
			</a>
		</li>
	</ul>
</nav>

サイズ・バリエーション

ul要素などのclass属性に、pagination-lg（大）やpagination-sm（小）を追加するだけで、ページネーションの大きさを変更できる。

表示サンプル

ソースコード

<nav>
	<ul class="pagination pagination-lg">
		<li>
			<a href="#" aria-label="前のページへ">
				<span aria-hidden="true">«</span>
			</a>
		</li>
		<li class="active"><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="#" aria-label="次のページへ">
				<span aria-hidden="true">»</span>
			</a>
		</li>
	</ul>
</nav>

<nav>
	<ul class="pagination pagination-sm">
		<li>
			<a href="#" aria-label="前のページへ">
				<span aria-hidden="true">«</span>
			</a>
		</li>
		<li class="active"><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="#" aria-label="次のページへ">
				<span aria-hidden="true">»</span>
			</a>
		</li>
	</ul>
</nav>

前と次のページへのリンクだけのページャー

「前へ」と「次へ」だけのページャーは、ul要素のclass属性にpagerを指定する。

デフォルトのページャーは、センターに現れる。

表示サンプル

ソースコード

<nav>
	<ul class="pager">
		<li><a href="#">前へ</a></li>
		<li><a href="#">次へ</a></li>
	</ul>
</nav>

左右のサイドに現れるページャー

「前へ」は左サイドに、「次へ」は右サイドに配置するスタイル。

「前へ」のli要素のclass属性には、previousを指定する。

「次へ」のli要素のclass属性には、nextを指定する。

表示サンプル

ソースコード

<nav>
	<ul class="pager">
		<li class="previous"><a href="#">前へ</a></li>
		<li class="next"><a href="#">次へ</a></li>
	</ul>
</nav>

ページャーのリンク無効化

ページャーもリンクを無効化できる。

リンクを無効化したいli要素のclass属性に、 disabledを指定する。

表示サンプル

ソースコード

<nav>
	<ul class="pager">
		<li class="previous disabled"><a href="#">前へ</a></li>
		<li class="next"><a href="#">次へ</a></li>
	</ul>
</nav>