Bootstrapでページネーション（ページャー）を作成する

Bootstrapでページネーション（ページャー）を作成する方法について。
参考ページ：Pagenation

ページネーションの作成
ページャーの作成

ページネーションの作成

ページネーションを作るには、ul（ol）要素のclassに”pagination”を追加するだけでページネーションが作成できます。

また、liのclassに”disabled”を追加するとクリック禁止マークが表示され、”active”を追加するとカレントページ（現在の表示しているページ）として青い色が表示されます。

サイズの変更は、”pagination-lg”で大きく、”pagination-sm”で小さく変更できます。

<ul class="pagination">
	<li class="disabled"><a href="#">«</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="#">»</a></li>
</ul>

ページャーの作成

ページャーは、「前のページ」「次のページ」のようにデザインできます。ul要素のclassに”pager”を追加するとできます。

<ul class="pager">
	<li><a href="#">前のページ</a></li>
	<li><a href="#">次のページ</a></li>
</ul>

<ul class="pager">
	<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>

li要素のclassに”previous”を追加すると左に、”next”を追加すると右にページャーの並びの位置を変更することができます。

<ul class="pager">
	<li class="previous"><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 class="next"><a href="#">次のページ</a></li>
</ul>