あなたのサイトまたはアプリケーションに、複数ページのナビゲーションとシンプルなページ切り替えのコンポーネントを追加することで、 ページネーションのリンクを提供します。

• デフォルトのページネーション
• ページャ

デフォルトのページネーション

シンプルなページネーションは、優れたアプリケーションと検索結果を提供できるように、Rdioの影響(inspired)を受けています。 大きなブロックは見失いにくく、簡単に拡大・縮小に対応でき、広いクリック領域を提供してくれます。

<nav>
  <ul class="pagination">
    <li>
      <a href="#" aria-label="Previous">
        <span aria-hidden="true">&laquo;</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="Next">
        <span aria-hidden="true">&raquo;</span>
      </a>
    </li>
  </ul>
</nav>

無効と有効中の状態

リンクは異なる状況に合わせて、カスタマイズすることが可能です。 クリックできないリンクには.disabledを使用し、現在のページを指し示すリンクには.activeを使用してください。

<nav>
  <ul class="pagination">
    <li class="disabled"><a href="#" aria-label="Previous"><span aria-hidden="true">&laquo;</span></a></li>
    <li class="active"><a href="#">1 <span class="sr-only">(current)</span></a></li>
    ...
  </ul>
</nav>

意図したスタイルを維持しながらクリック機能を削除するために、 任意で有効中(active)または無効(disabled)のアンカーを<span>と差し替えたり、 または「前へ(previous)/次へ(next)」の矢印のケースでは、そのアンカーを省略します。

<nav>
  <ul class="pagination">
    <li class="disabled">
      <span>
        <span aria-hidden="true">&laquo;</span>
      </span>
    </li>
    <li class="active">
      <span>1 <span class="sr-only">(current)</span></span>
    </li>
    ...
  </ul>
</nav>

サイズ変更

ページネーションをもっと大きくしたいですか？または小さくしたいですか？ .pagination-lgまたは.pagination-smを追加して、サイズを調整してください。

ページャ

軽量なマークアップとスタイルでシンプルなページネーションを手軽に実装するための、前へ(previous)と次へ(next)リンクです。 これは、ブログやマガジンのようなシンプルなサイトで便利です。

デフォルト例

デフォルトでは、ページャは中央にリンクが配置されます。

<nav>
  <ul class="pager">
    <li><a href="#">Previous</a></li>
    <li><a href="#">Next</a></li>
  </ul>
</nav>

右寄せ・左寄せリンク

あるいは、任意の側に各リンクを寄せることが可能です。

<nav>
  <ul class="pager">
    <li class="previous"><a href="#"><span aria-hidden="true">&larr;</span> Older</a></li>
    <li class="next"><a href="#">Newer <span aria-hidden="true">&rarr;</span></a></li>
  </ul>
</nav>

無効状態の指定

ページャのリンクでも、ページネーションにもある一般的な.disabledのユーティリティクラスを使用します。

<nav>
  <ul class="pager">
    <li class="previous disabled"><a href="#"><span aria-hidden="true">&larr;</span> Older</a></li>
    <li class="next"><a href="#">Newer <span aria-hidden="true">&rarr;</span></a></li>
  </ul>
</nav>

 Back to top