Pagination(ページ送り)
ページ送りを表示します。
複数に渡るページを移動する際に使用する、ナビゲーション表示です。
PHPやJavascriptなどで動的に記述するのが一般的かと思われます。
サンプル01-ページ送り表示
サンプル02-ページ送り表示の無効化とアクティブ表示
コーディング
- .disabled
- 02行目 無効化したいページ部分に.disabledを指定します
- .active
- 03行目 アクティブ化したいページ部分に.activeを指定します
- <span>
- 09-10行目 無効化・アクティブ化するページは<a>ではなく<span>を指定してもよく、<span>にすることで無用な遷移が行われません
サンプル03-ページ送りの表示サイズ指定
コーディング
- .pagination-lg
- 01行目 大きいサイズのページ送りを表示します
- .pagination-sm
- 15行目 小さいサイズのページ送りを表示します
サンプル04-前後ページ送り表示
コーディング
- .pager
- 01行目 <ul>に.pagerを指定すると前後ページ送りが中央表示されます
- .previous
- 06行目 <li>に.previousを指定すると左寄せ表示になります
- .next
- 07行目 <li>に.nextを指定すると右寄せ表示になります