Bootstrap 5 .pagination の使い方

目次

1. 基本的なページネーション(.pagination)
2. イベントステータス(.active)
3. 無効状態(.disabled)
4. ページサイズ(.pagination-..)
5. justify-content-..
6. ナビゲーション（Breadcrumbs）

基本的なページネーション(.pagination)

サイトに多数のページがある場合は、各ページに何らかのページネーションを追加することができます。

要创建基本分页，请将 .pagination 类添加到

• 元素。 然后将 .page-item 添加到每个
• 元素，并将 .page-link 类添加到
• 内的所有链接; ：

   

  例

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

イベントステータス(.active)

.active クラスは、現在のページを「ハイライト」するために使用されます。

例

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

無効状態(.disabled)

クリックできないリンクの .disabled クラス:

例

<ul class="pagination">
  <li class="page-item disabled"><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>

ページサイズ(.pagination-..)

ページネーション ブロックのサイズを大きくしたり小さくしたりすることもできます。

大きなチャンクの場合はクラス .pagination-lg を追加し、小さなチャンクの場合は .pagination-sm を追加してください。

例

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

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

justify-content-..

ページネーションの配置を変更するには、utility クラスを使用してください。

例

<!-- Default (left-aligned) -->
<ul class="pagination" style="margin:20px 0">
  <li class="page-item">...</li>
</ul>

<!-- Center-aligned -->
<ul class="pagination justify-content-center" style="margin:20px 0">
  <li class="page-item">...</li>
</ul>

<!-- Right-aligned -->
<ul class="pagination justify-content-end" style="margin:20px 0">
  <li class="page-item">...</li>
</ul>

ナビゲーション（Breadcrumbs）

ページネーションの別の形式は、ナビゲーション列です。：

.breadcrumb クラスと .breadcrumb-item クラスは、ナビゲーション階層内の現在のページの位置を指定します。

例

<ul class="breadcrumb">
  <li class="breadcrumb-item"><a href="#">写真</a></li>
  <li class="breadcrumb-item"><a href="#">2019年秋</a></li>
  <li class="breadcrumb-item"><a href="#">日本</a></li>
  <li class="breadcrumb-item active">東京</li>
</ul>