ページネーション

ベーシックページネーション

Webサイトにページがたくさんある場合は、ページごとにページネーションを追加することができます。
Bootstrapの基本的なページネーションは次のようになります。

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

現在ページ

.active を使用して、今いるページをアクティブ化します。

<ul class="pagination">
  <li><a href="#">1</a></li>
  <li><a href="#">2</a></li>
  <li><a href="#">3</a></li>
  <li class="active"><a href="#">4</a></li>
  <li><a href="#">5</a></li>
</ul>

選択不可

.disabled を使用して、選択不可にします。

<ul class="pagination">
  <li><a href="#">1</a></li>
  <li><a href="#">2</a></li>
  <li><a href="#">3</a></li>
  <li class="disabled"><a href="#">4</a></li>
  <li><a href="#">5</a></li>
</ul>

サイズ

<ul class="pagination pagination-lg">
  <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>
</ul>
<ul class="pagination pagination-sm">
  <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>
</ul>

パンくずリスト

ページ送りの別の方法としてパンくずリストがあります。
.breadcrumb クラスは、ナビゲーション階層内の現在のページの位置を示します。

<ul class="breadcrumb">
  <li><a href="#">ホーム</a></li>
  <li><a href="#">カテゴリー</a></li>
  <li><a href="#">Bootstrap</a></li>
  <li class="active">ページネーション</li> 
</ul>