Bootstrap4.xの使い方をBootstrap3.xからの変更箇所を交えて解説しています。
ページ送り（Pagination） v4.2.1設定変更
一連の関連コンテンツが複数のページにまたがって存在することを示すためのページを表示するための解説と例。
概要（Overview）v4.0.0設定変更
大きなヒット領域を提供しながら、リンクを逃しにくく簡単に拡大縮小するために、ページングのための接続されたリンクの大きなブロックを使用。 ページ送りはリストのHTML要素で構築され、スクリーンリーダーは利用可能なリンクの数を知らせることが可能。包括用の <nav> 要素を使用して、それをリーダーやその他の支援技術を絞り込むためのナビゲーションセクションとして識別する。
さらに、ページにはこのようなナビゲーション・セクションが複数存在する可能性があるので、その目的を反映するため <nav> にその説明として aria-label を付けることを推奨。例えば、ページ送りコンポーネントを使用して一連の検索結果の間を移動する場合、適切なラベルは aria-label="検索結果ページ" となる。
見本
Bootstrap3.xの設定例
<nav aria-label="ページ送りの実例">
<ul class="pagination">
<li><a href="#">前へ</a></li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">次へ</a></li>
</ul>
</nav>Bootstrap4.xの設定例 緑背景が変更箇所
<nav aria-label="ページ送りの実例">
<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>【設定】
nav[aria-label]>ul.pagination>li.page-item>a.page-link
【アクセシビリティの設定】
- ラベリングとして
<nav>にaria-label属性を入れる
【変更履歴】
- 【v4.0.0】
<li>に.page-itemを入れる<a>に.page-linkを入れる
アイコンの操作（Working with icons）v4.2.1設定変更
ページ送りのリンクのテキストの代わりにアイコンやシンボルを使用したいのなら、aria 属性で適切なスクリーンリーダーをサポートするようにすること。
見本
設定例
<nav aria-label="...">
<ul class="pagination">
<li class="page-item">
<a class="page-link" href="#" aria-label="前">
<span aria-hidden="true">«</span>
</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="#" aria-label="次">
<span aria-hidden="true">»</span>
</a>
</li>
</ul>
</nav>【設定】
- リストのラベルとして、記号やアイコンの使用が可能。
«,»,←,→を使うときは、それぞれ«,»,←,→と記述してエスケープ処理をする
【アクセシビリティの設定】
- 記号やアイコンを使用する場合は、それを囲む
<span>にaria-hidden="true"属性（スクリーンリーダー等での読み上げをスキップさせる）を入れる - 「前へ」と「次へ」を意味するリスト部分には、ユーザー補助用として
aria-label属性（代替テキスト）を入れる
【変更履歴】
- 【v4.2.1】
- リスト部分で
span.sr-onlyの設定が不要に（既にaria-label属性の設定があるため）
- リスト部分で
ページ送りの無効化とアクティブ化（Disabled and active states）v4.6.1設定変更
ページ送りのリンクは、さまざまな状況に合わせてカスタマイズ可能。クリックできないように見えるリンクに .disabled、現在のページを示すリンクには .active を使用。
.disabledクラスは pointer-events: none を使用して <a> のリンク機能を無効にしようとするが、そのCSSプロパティはまだ標準化されておらず、キーボードナビゲーションも考慮していない。そのため、無効なリンクには常に tabindex="-1" を追加し、カスタムJavaScriptを使用して機能を完全に無効にする必要がある。
1.アンカーリンク <a> に設定v4.6.1設定変更
見本
Bootstrap3.xの設定例 赤背景が変更箇所
<nav aria-label="...">
<ul class="pagination">
<li class="disabled">
<a href="#">前へ</a>
</li>
<li><a href="#">1</a></li>
<li class="active">
<a href="#">2 <span class="sr-only">(現位置)</span></a>
</li>
<li><a href="#">3</a></li>
<li>
<a href="#">次へ</a>
</li>
</ul>
</nav>Bootstrap4.xの設定例 緑背景が変更箇所
<nav aria-label="...">
<ul class="pagination">
<li class="page-item disabled">
<a class="page-link">前へ</a>
</li>
<li class="page-item"><a class="page-link" href="#">1</a></li>
<li class="page-item active" aria-current="page">
<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>2.<span> に設置
見本
オプションで、<span> のアンカーを有効または無効にしたり、前後の矢印のアンカーを省略したり、クリック機能を削除して、意図したスタイルを維持しながらキーボードのフォーカスを防止することも可能。
Bootstrap3.xの設定例 赤背景が変更箇所
<nav aria-label="...">
<ul class="pagination">
<li class="disabled">
<span>前へ</span>
</li>
<li><a href="#">1</a></li>
<li class="active">
<span>2 <span class="sr-only">(現位置)</span></span>
</li>
<li><a href="#">3</a></li>
<li>
<a href="#">次へ</a>
</li>
</ul>
</nav>Bootstrap4.xの設定例 緑背景が変更箇所
<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" aria-current="page">
<span class="page-link">2 </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>【設定】
- リンクを無効化したい場合は、
li.page-itemに.disabledを追加 - 現在のページをアクティブ化したい場合は、
li.page-itemに.activeを追加 - 無効またはアクティブ化するページはアンカーリンク（
<a>）でなく<span>にしても可
【アクセシビリティの設定】
li.page-itemに.activeを追加する場合は、.activeにaria-current="page"（支援技術に現在のページであることを伝える）を追加して現在の位置であることを表示
【変更履歴】
- 【v4.0.0】
- リンクにカーソルを合わせた際に、無効化カーソル（＝
cursor: not-allowed;）に変化しなくなった
- リンクにカーソルを合わせた際に、無効化カーソル（＝
- 【v4.2.1】
.disabled関連のアクセシビリティの設定の追加と.activeにaria-current="page"も入れる
- 【v4.6.0】
- 現在の位置：
li.page-item.activeに[aria-current="page"]を入れるので、span.sr-onlyは不要に
- 現在の位置：
- 【v4.6.1】
- ページリンクが無効の場合（
li.page-item.disabled > a）：href属性、tabindex="-1"（リンクにキーボードフォーカスを受け取らないようにする）、aria-disabled="true"（支援技術に要素が無効の状態であることを伝える）の設定が不要に（参考）
- ページリンクが無効の場合（
ページ送りのサイズ（Sizing）
ページ送りのサイズを大きくしたり小さくしたいなら、.pagination-lg または .pagination-sm を追加。
見本
●大きめ：.pagination-lg
●小さめ：.pagination-sm
※デフォルト
設定例
大きめ<nav aria-label="...">
<ul class="pagination pagination-lg">
...
</ul>
</nav>
小さめ<nav aria-label="...">
<ul class="pagination pagination-sm">
...
</ul>
</nav>
【設定】
.paginationに.pagination-{size}（上記の「サイズの種類」から選択）を追加
配置（Alignment）v4.0.0復活、v4.5.0追加
Flexユーティリティを使用してページ設定コンポーネントの配置を変更。
見本
●中央揃え
●右寄せ
●等間隔に配置 v4.5.0追加
設定例
中央揃え<nav aria-label="...">
<ul class="pagination justify-content-center">
<li class="page-item disabled"><a class="page-link" href="#" tabindex="-1" aria-disabled="true">前へ</a></li>
...
</ul>
</nav>
右寄せ<nav aria-label="...">
<ul class="pagination justify-content-end">
...
</ul>
</nav>
等間隔に配置<nav aria-label="...">
<ul class="pagination justify-content-around">
...
</ul>
</nav>
【設定】
- 中央揃え：
.paginationに.justify-content-centerを追加 - 右寄せ：
.paginationに.justify-content-endを追加 - 等間隔に配置：
.paginationに.justify-content-aroundを追加
【変更履歴】
- 【v4.0.0】
- ページ送りの右寄せや中央揃えはv3で廃止となったが、v4で復活。
ページャー（Pager）v4.0.0代用的使用、v4.2.1設定変更
ページャーは、v4で廃止となったが、代用的にv3の時のような表示で使用。
ページャーの設定（Default example）
Flexユーティリティを使用して、ページャーを中心に配置。
見本
Bootstrap3.xの設定例 赤背景が変更箇所
<nav aria-label="ページャー">
<ul class="pager">
<li><a href="#">← 前</a></li>
<li><a href="#">現在</a></li>
<li><a href="#">次 →</a></li>
</ul>
</nav>Bootstrap4.xの設定例 緑背景が変更箇所
<nav aria-label="ページャー">
<ul class="pagination justify-content-center">
<li>
<a class="btn page-link rounded-pill" href="#">← 前</a>
</li>
<li class="mx-2">
<a class="btn page-link rounded-pill" href="#">現在</a>
</li>
<li>
<a class="btn page-link rounded-pill" href="#">次 →</a>
</li>
</ul>
</nav>【設定】
nav[aria-label]>ul.pagination.justify-content-center><li>>a.btn.page-link.rounded-pill«,»,←,→を使うときは、それぞれ«,»,←,→と記述してエスケープ処理をする
【注意】
- ページャーのリンクボタンの間には空白がないので、
<li>に空白ユーティリティクラスを追加する必要がある（上記の見本では真ん中のページャーで左右のマージンを0.5remに設定） a.btn.page-link.rounded-pillはa.btn.btn-outline-{themecolor}.rounded-pill（アウトラインボタン）などを利用しても可
【アクセシビリティの設定】
- ラベリングとして
nav[aria-label]で囲む - 記号やアイコンを使用する場合は、それを囲む
<span>にaria-hidden="true"属性を入れる
【変更履歴】
- 【v4.0.0】
ul.pager⇒ul.pagination.justify-content-center<a>⇒a.btn.page-link.rounded-pill
- 【v4.2.1】
a.btn.page-link.bagde-pill⇒a.btn.page-link.rounded-pill
整列化したページャー（Aligned links）
.justify-content-center を .justify-content-between に変更して、両端にページャーを配置。
見本
Bootstrap3.xの設定例 赤背景が変更箇所
<nav aria-label="...">
<ul class="pager">
<li class="previous">
<a href="#">古</a>
</li>
<li>
<a href="#">現在</a>
</li>
<li class="next">
<a href="#">新</a>
</li>
</ul>
</nav>Bootstrap4.xの設定例 緑背景が変更箇所
<nav aria-label="...">
<ul class="pagination justify-content-between">
<li>
<a class="btn page-link rounded-pill" href="#">古</a>
</li>
<li>
<a class="btn page-link rounded-pill" href="#">現在</a>
</li>
<li>
<a class="btn page-link rounded-pill" href="#">新</a>
</li>
</ul>
</nav>【設定】
<ul>に.pagination.justify-content-betweenを追加
【変更履歴】
- 【v4.0.0】
ul.pager⇒ul.pagination.justify-content-between<li>に.previousや.nextは不要に
ページャーのリンク無効化（Optional disabled state）
見本
Bootstrap3.xの設定例 赤背景が変更箇所
<nav aria-label="...">
<ul class="pager">
<li class="previous disabled">
<a href="#"><span aria-hidden="true">←</span> 古</a>
</li>
<li class="next">
<a href="#">新 <span aria-hidden="true">→</span></a>
</li>
</ul>
</nav>Bootstrap4.xの設定例 緑背景が変更箇所
<nav aria-label="...">
<ul class="pagination justify-content-between">
<li>
<a class="btn page-link rounded-pill text-muted disabled" href="#" aria-disabled="true"><span aria-hidden="true">←</span> 古</a>
</li>
<li>
<a class="btn page-link rounded-pill" href="#">新 <span aria-hidden="true">→</span></a>
</li>
</ul>
</nav>【設定】
- 無効化したいアンカーリンク（
<a>）に、.text-muted.disabledとaria-disabled="true"を入れる
【注意】
- ページ送りでは
<li>に.disabledを追加しないとリンクが無効にならないが、この代用ページャーでは<a>に.disabledを追加しないとリンクが無効にならない
【変更履歴】
- 【v4.0.0】
li.disabled><a>⇒<li>>a.btn.page-link.rounded-pill.text-muted.disabled- リンクにカーソルを合わせた際に、無効化カーソル（＝
cursor: not-allowed;）に変化しなくなった