「Bootstrap ComponentsのPagination」のサンプル
「BootstrapのComponentsのサンプル：和訳」の「Pagination」のサンプルページです。
- 「.pagination」で囲む。
基本のページネーション
実際のソース
<nav>
<ul class="pagination">
<li>
<a href="#" aria-label="Previous"><span aria-hidden="true">«</span></a>
</li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li>
<a href="#" aria-label="Next"><span aria-hidden="true">»</span></a>
</li>
</ul>
</nav>無効とアクティブ
「.disabled」で無効、「.active」でアクティブ
実際のソース
<nav>
<ul class="pagination">
<li class="disabled"><a href="#" aria-label="Previous"><span aria-hidden="true">«</span></a></li>
<li class="active"><a href="#">1 <span class="sr-only">(current)</span></a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#" aria-label="Next"><span aria-hidden="true">»</span></a></li>
</ul>
</nav>※無効にしたときの見た目の変化は文字色だけっぽい。追加で背景色も変化させたほうがユーザビリティ上、いいかもしれない。
サイズ変更
通常が指定無しで「class="pagination"」、小サイズが「class="pagination pagination-sm"」、大サイズが「class="pagination pagination-lg"」
実際のソース
<nav>
<ul class="pagination pagination-lg">
<li><a href="#" aria-label="Previous"><span aria-hidden="true">«</span></a></li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#" aria-label="Next"><span aria-hidden="true">»</span></a></li>
</ul>
</nav>
<nav>
<ul class="pagination">
<li><a href="#" aria-label="Previous"><span aria-hidden="true">«</span></a></li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#" aria-label="Next"><span aria-hidden="true">»</span></a></li>
</ul>
</nav>
<nav>
<ul class="pagination pagination-sm">
<li><a href="#" aria-label="Previous"><span aria-hidden="true">«</span></a></li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#" aria-label="Next"><span aria-hidden="true">»</span></a></li>
</ul>
</nav>Pager（前・次ページ）
「class="pagination"」を「class="pager"」にする
実際のソース
<nav>
<ul class="pager">
<li><a href="#">Previous</a></li>
<li><a href="#">Next</a></li>
</ul>
</nav>ページの左右に配置する
左に配置するリンクの親要素に「class="previous"」、右に配置する親要素に「class="next"」
実際のソース
<nav>
<ul class="pager">
<li class="previous"><a href="#"><span aria-hidden="true">←</span> Older</a></li>
<li class="next"><a href="#">Newer <span aria-hidden="true">→</span></a></li>
</ul>
</nav>無効
左のリンクなら「class="previous"」、右のリンクなら「class="next"」に「.disabled」を追加。
実際のソース
<nav>
<ul class="pager">
<li class="previous disabled"><a href="#"><span aria-hidden="true">←</span> Older</a></li>
<li class="next"><a href="#">Newer <span aria-hidden="true">→</span></a></li>
</ul>
</nav>※無効にしたときの見た目の変化は文字色だけっぽい。追加で背景色も変化させたほうがユーザビリティ上、いいかもしれない。