編集 Github

ページ付け - プロ 成分

一連の関連コンテンツを示すためにページ付けを示すためのドキュメントと例は、複数のページにまたがって存在します。

概要

<nav aria-label="Page navigation example">
  <ul class="pagination">
    <li class="page-item"><a class="page-link" href="#">前</a></li>
    <li class="page-item"><a class="page-link" href="#">1</a></li>
    <li class="page-item"><a class="page-link" href="#">2</a></li>
    <li class="page-item"><a class="page-link" href="#">3</a></li>
    <li class="page-item"><a class="page-link" href="#">次</a></li>
  </ul>
</nav>

無効およびアクティブ状態

ページネーションリンクはさまざまな状況に合わせてカスタマイズできます。クリック不可能に見えるリンクには .disabledを、現在のページを示すには .activeを使います。

`.disabledクラスは のリンク機能を無効にするために_try_に pointer-events：noneを使いますが、そのCSSプロパティはまだ標準化されておらず、キーボードナビゲーションも考慮していません。そのため、無効化されたリンクには常に tabindex =” - 1 “`を追加し、その機能を完全に無効にするためにカスタムJavaScriptを使用するべきです。

<nav aria-label="...">
  <ul class="pagination">
    <li class="page-item disabled">
      <a class="page-link" href="#" tabindex="-1">前</a>
    </li>
    <li class="page-item"><a class="page-link" href="#">1</a></li>
    <li class="page-item active">
      <a class="page-link" href="#">2 <span class="sr-only">(current)</span></a>
    </li>
    <li class="page-item"><a class="page-link" href="#">3</a></li>
    <li class="page-item">
      <a class="page-link" href="#">次</a>
    </li>
  </ul>
</nav>

必要に応じて、のアクティブまたは無効なアンカーを交換するか、前/次の矢印の場合はアンカーを省略して、クリック機能を削除し、目的のスタイルを保持しながらキーボードフォーカスを防ぐことができます。

<nav aria-label="...">
  <ul class="pagination">
    <li class="page-item disabled">
      <span class="page-link">前</span>
    </li>
    <li class="page-item"><a class="page-link" href="#">1</a></li>
    <li class="page-item active">
      <span class="page-link">
        2
        <span class="sr-only">(current)</span>
      </span>
    </li>
    <li class="page-item"><a class="page-link" href="#">3</a></li>
    <li class="page-item">
      <a class="page-link" href="#">次</a>
    </li>
  </ul>
</nav>

アライメント

[flexbox utilities]（{{site.baseurl}} / docs / {{site.docs_version}} / utilities / flex /）でページ区切りコンポーネントの配置を変更します。

<nav aria-label="Page navigation example">
  <ul class="pagination justify-content-center">
    <li class="page-item disabled">
      <a class="page-link" href="#" tabindex="-1">前</a>
    </li>
    <li class="page-item"><a class="page-link" href="#">1</a></li>
    <li class="page-item"><a class="page-link" href="#">2</a></li>
    <li class="page-item"><a class="page-link" href="#">3</a></li>
    <li class="page-item">
      <a class="page-link" href="#">次</a>
    </li>
  </ul>
</nav>
<nav aria-label="Page navigation example">
  <ul class="pagination justify-content-end">
    <li class="page-item disabled">
      <a class="page-link" href="#" tabindex="-1">前</a>
    </li>
    <li class="page-item"><a class="page-link" href="#">1</a></li>
    <li class="page-item"><a class="page-link" href="#">2</a></li>
    <li class="page-item"><a class="page-link" href="#">3</a></li>
    <li class="page-item">
      <a class="page-link" href="#">次</a>
    </li>
  </ul>
</nav>