ページ付け - プロ 成分
一連の関連コンテンツを示すためにページ付けを示すためのドキュメントと例は、複数のページにまたがって存在します。
概要
<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
を使います。
<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>