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

この記事は【2022年7月21日】が最後の更新のため、記事の内容が古い可能性があります。

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

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

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

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

サンプルコード

<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>

アクティブ状態

<li>要素のクラスに.activeを追加する事により任意の場所をアクティブ状態に表現する事ができます。

サイズの変更

・大きいサイズでのページネーション表示

<ul>要素のクラスに.pagination-lgを追加する事により大きいサイズで表示されます。

・小さいサイズでのページネーション表示

<ul>要素のクラスに.pagination-smを追加する事により小さいサイズで表示されます。

- PR -

ニッチなテーマのイラスト素材投稿始めました。良かったら使ってください。
RU DESIGN/無料イラスト・フリー素材「イラストAC」

オリジナル絵本　Kindleにて出版
ナマケモノのふにゃまるちゃん

ドメイン取得は同じところで取得しておくと便利ですよ。

応援・支援よろしくお願いいたします。サイト運営に使わせていただきます。

■BTC
1PPYM4493tNYVZuGxXnYLpVdKJXSwFagPQ
■MATIC
0xC75744667A7396DFF507cf44371A2CF0B6eEF03B
■ETH
0xC75744667A7396DFF507cf44371A2CF0B6eEF03B