Bootstrapでページネーション(ページャー)を作成する

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

ページネーションの作成

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

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

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

Pagination

<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”を追加するとできます。

pager1

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

pager

<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”を追加すると右にページャーの並びの位置を変更することができます。

pager2

<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>

Bootstrapでページネーション(ページャー)を作成する」への1件のフィードバック

  1. ピンバック: cakePHP+bootstrapでのページャー

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です