Webデザイン初心者でも簡単に使える!Bootstrap4基本の使い方【ページ送り編】

Bootstrap

Webデザイン初心者でも簡単に使える!Bootstrap4基本の使い方【ページ送り編】

2019年03月12日 8:00 2019年09月06日

Webデザイン初心者でも簡単に使える!Bootstrap4基本の使い方【ページ送り編】

おはようございます!社員Aです👩

連載しております「Bootstrapシリーズ」ですが、第7回目になりました!

Bootstrap4基本の使い方シリーズ

複数記事に分けてWEB制作でよく使うBootstrapの機能や意外と知られていない便利な機能なども紹介していきますので、初めてBootstrapにチャレンジされる方も、既にBootstrapを使って開発をされている方にも読んでいただけると嬉しいです。

第7回目の今回は「ページ送り編」!Bootstrap4でページ送りを設定する方法を解説していきたいと思います。Webデザイン初心者の方でも簡単に使えるので、ぜひこの機会にBootstrap4の使いかたをマスターしてみませんか?



 

Bootstrap4 ページ送り

Bootstrap4では、クラスを付与することで、ページ送りを設定することができます。

基本のルールについて

  • <nav>要素 に aria-label 属性を入れる
  • <li>要素にクラス「.page-item」 を入れる
  • <a>要素に「 .page-link」を入れる

 

表示

 

設定

 



Bootstrap4 ページ送り・アイコンの操作

ページナビでは、「前へ」「次へ」の代わりにアイコンを使うことができます。

ルールについて

  •  <span> に aria-hidden=”true” 属性を入れる
  • ユーザー補助用として aria-label 属性を入れる

 

表示

 

設定

 

Bootstrap4 ページ送りの有効化・無効化

ページナビでは、「前へ」「次へ」の代わりにアイコンを使うことができます。

ルールについて

  • 「.disabled」クラスを付与することで、クリックできないように見せることができます。
  • 「.active」クラスを付与することで、現在のいるページを認知させることができます。

 

表示

 

設定

 

Bootstrap4 ページ送りのサイズ変更

ページ送りのサイズも変更することが出来ます。

ルールについて

  • 「.pagination」クラスに、「.pagination-xx(サイズごとのクラス)」を追加することでサイズ変更できます。

 

表示

 

設定

 



Bootstrap4 ページ送りの位置

ページ送りの位置も変更することが出来ます。

ルールについて

  • 「.pagination」クラスに、「.justify-content-center」を追加すると中央に配置できます。
  • 「.pagination」クラスに、「.justify-content-end」を追加すると中央に配置できます。

 

表示

設定

 

まとめ

今回はページ送り編ということで、様々なページ送りの設定方法をご紹介しました。

クラス付与だけで、ページ送りが作れるのでちょっとしたときにも活用できそうですね!

 

関連記事

この記事を書いた人

社員A

社員A

フロントエンドエンジニア・デザイナーの社員Aです。 多分一番更新頻度が多いかと思います。このブログのテーマも作成しました。ブログの執筆を通じて、やっと日本語Lv.20くらいになれた気がします。 家ではデグーとチンチラという小動物を飼っていて、かなり溺愛しています…!小動物が好きな皆さん、小動物トークしましょう!