【初心者の方向け】 Bootstrap4の使い方 ページ送り

ページ送りもbootstrapにあらかじめ用意されているスタイルを使用することにより、作業を効率化する事ができます。

Bootstrap4のバージョン4.3をベースに書いています。

ページネーションサンプル

このような形で表示されます。

• Previous
• 1
• 2
• 3
• Next

サンプルコード

<nav>
<ul class="pagination">
 	<li class="page-item"><a class="page-link" href="#">Previous</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="#">Next</a></li>
</ul>
</nav>

アクティブ状態