Bootstrap 5 ページネーション

コース推薦：

基本的なページング

あなたのウェブサイトに多くのページがある場合、各ページにページングを追加することをお勧めします。 基本的なページングを作成するには、 クラスを追加 .pagination <ul> 要素に追加。次に、 .page-item <li> 要素に、および各 .page-link クラスを追加 <li> 各リンク：

例

<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 現在のページを「強調表示」するクラス：

例

<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 非クリック可能なリンクのクラス：

例

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

自分で試してみる

ページネーションアライメント

ユーティリティクラスを使用してページネーションのアライメントを変更してください：

例

<!-- デフォルト（左寄り） -->
<ul class="pagination" style="margin:20px 0">
  <li class="page-item">...</li>
</ul>
<!-- 中央寄り -->
<ul class="pagination justify-content-center" style="margin:20px 0">
  <li class="page-item">...</li>
</ul>
<!-- 右寄り -->
<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>

自分で試してみる