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」を入れる

表示

設定

<nav aria-label="">
  <ul class="pagination">
    <li class="page-item"><a class="page-link" href="#">前へ</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="#">次へ</a></li>
  </ul>
</nav>

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

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

ルールについて

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

表示

設定

<nav aria-label="">
  <ul class="pagination">
    <li class="page-item"><a class="page-link" href="#" aria-label="前へ">
        <span aria-hidden="true">&laquo;</span>
      </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="#" aria-label="次へ">
        <span aria-hidden="true">&raquo;</span>
      </a></li>
  </ul>
</nav>

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

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

ルールについて

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

表示

設定

<nav aria-label="">
  <ul class="pagination">
    <li class="page-item disabled"><a class="page-link" href="#" aria-label="前へ">
        <span aria-hidden="true">&laquo;</span>
      </a></li>
    <li class="page-item"><a class="page-link" href="#">1</a></li>
    <li class="page-item active"><a class="page-link" href="#">2</a></li>
    <li class="page-item"><a class="page-link" href="#" aria-label="次へ">
        <span aria-hidden="true">&raquo;</span>
      </a></li>
  </ul>
</nav>

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

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

ルールについて

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

表示

設定

<!-- 標準サイズ -->
<nav aria-label="">
  <ul class="pagination">
    <li class="page-item disabled"><a class="page-link" href="#" aria-label="前へ">
        <span aria-hidden="true">&laquo;</span>
      </a></li>
    <li class="page-item"><a class="page-link" href="#">1</a></li>
    <li class="page-item active"><a class="page-link" href="#">2</a></li>
    <li class="page-item"><a class="page-link" href="#" aria-label="次へ">
        <span aria-hidden="true">&raquo;</span>
      </a></li>
  </ul>
</nav>

<!-- 大きめサイズ -->
<nav aria-label="">
  <ul class="pagination pagination-lg">
    <li class="page-item disabled"><a class="page-link" href="#" aria-label="前へ">
        <span aria-hidden="true">&laquo;</span>
      </a></li>
    <li class="page-item"><a class="page-link" href="#">1</a></li>
    <li class="page-item active"><a class="page-link" href="#">2</a></li>
    <li class="page-item"><a class="page-link" href="#" aria-label="次へ">
        <span aria-hidden="true">&raquo;</span>
      </a></li>
  </ul>
</nav>

<!-- 小さめサイズ -->
<nav aria-label="">
  <ul class="pagination pagination-sm">
    <li class="page-item disabled"><a class="page-link" href="#" aria-label="前へ">
        <span aria-hidden="true">&laquo;</span>
      </a></li>
    <li class="page-item"><a class="page-link" href="#">1</a></li>
    <li class="page-item active"><a class="page-link" href="#">2</a></li>
    <li class="page-item"><a class="page-link" href="#" aria-label="次へ">
        <span aria-hidden="true">&raquo;</span>
      </a></li>
  </ul>
</nav>

Bootstrap4 ページ送りの位置

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

ルールについて

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

表示

設定

<!-- 中央揃え -->
<nav aria-label="">
  <ul class="pagination justify-content-center">
    <li class="page-item disabled"><a class="page-link" href="#" aria-label="前へ">
        <span aria-hidden="true">&laquo;</span>
      </a></li>
    <li class="page-item"><a class="page-link" href="#">1</a></li>
    <li class="page-item active"><a class="page-link" href="#">2</a></li>
    <li class="page-item"><a class="page-link" href="#" aria-label="次へ">
        <span aria-hidden="true">&raquo;</span>
      </a></li>
  </ul>
</nav>

<!-- 右揃え -->
<nav aria-label="">
  <ul class="pagination justify-content-end">
    <li class="page-item disabled"><a class="page-link" href="#" aria-label="前へ">
        <span aria-hidden="true">&laquo;</span>
      </a></li>
    <li class="page-item"><a class="page-link" href="#">1</a></li>
    <li class="page-item active"><a class="page-link" href="#">2</a></li>
    <li class="page-item"><a class="page-link" href="#" aria-label="次へ">
        <span aria-hidden="true">&raquo;</span>
      </a></li>
  </ul>
</nav>

まとめ

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

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