Bootstrap ページネーション

基本的なページネーション

たくさんのページからなる Web サイトを持っている場合、各ページにある種類のページネーションを追加したい場合があります。

Bootstrap の基本的なページネーションは次の通りです：

• 1
• 2
• 3
• 4
• 5

基本的なページネーションを作成するには、<ul> 要素に .pagination クラスを追加します：

アクティブ状態

アクティブ状態は、現在のページがどの位置にあるかを表します：

• 1
• 2
• 3
• 4
• 5

どのページにいるかを知らせるため、クラス .active を追加します：

無効状態

無効なリンクはクリックできません：

• 1
• 2
• 3
• 4
• 5

何らかの理由でリンクを無効にする場合は、クラス .disabled を追加します：

ページネーションのサイズ設定

ページネーションのブロックは、大きいサイズや小さいサイズに設定することができます：

• 1
• 2
• 3
• 4
• 5

• 1
• 2
• 3
• 4
• 5

大きなブロックにはクラス .pagination-lg を、小さなブロックには クラス .pagination-sm を追加します：

パンくずリスト

ページネーションのもう1つのフォームはパンくずリストです：

1. Home
2. Private
3. Pictures
4. Vacation

.breadcrumb クラスは、ナビゲーション階層の中の現在のページの位置を示します：

練習問題で確認！

Exercise 1 »  Exercise 2 »  Exercise 3 »  Exercise 4 »  Exercise 5 »

完全な Bootstrap ナビゲーション・リファレンス

全ての navigation クラスの完全なリファレンスは、 Bootstrap ナビゲーション・リファレンスをご覧ください。