Bootstrap - ページネーション：初めての人向けの包括的なガイド

こんにちは、ウェブ開発者を目指している皆さん！今日は、Bootstrapのページネーションについて深く掘り下げます。あなたの近所の親切なコンピュータ教師として、この旅を案内するのを楽しみにしています。コードに慣れていない方も心配しないでください。基本から始めて、段階的に進めていきます。このチュートリアルの終わりには、ページネーションのプロになっているでしょう！

ページネーションとは？

まず、Bootstrapに飛び込む前に、ページネーションとは何かを理解しましょう。長い本を読んでいるとします。すべての内容を1ページに詰め込む代わりに、管理しやすいチャンクに分けられます。それがデジタル世界でのページネーションです。大量のコンテンツを複数のページに整理し、ユーザーが簡単にナビゲートできるようにする东西です。

Bootstrapページネーション：基本

Bootstrap、私たちの信頼できるフロントエンドツールキットは、ページネーションを簡単でスタイリッシュに作成する方法を提供します。基本から始めましょう。

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

Bootstrapで基本的なページネーションを作成するには、<nav>と<ul>要素に特定のクラスを使用します。以下はシンプルな例です：

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

これを分解すると：

• <nav>要素は、ページネーションをセマンティックにラップします。
• <ul>にはpaginationクラスが付いており、Bootstrapのページネーションスタイルが適用されます。
• 各<li>はページを表し、page-itemクラスがあります。
• 各<li>内の<a>タグにはpage-linkクラスが付いており、クリック可能な部分をスタイルします。

アイコンの使用

ページネーションをさらにクールに見せるために、アイコンを追加してみましょう！BootstrapはFont Awesomeなどのアイコンライブラリと很好地動作します。アイコンをページネーションに使用する方法を以下に示します：

<nav aria-label="Page navigation">
<ul class="pagination">
<li class="page-item">
<a class="page-link" href="#" aria-label="Previous">
<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="#">3</a></li>
<li class="page-item">
<a class="page-link" href="#" aria-label="Next">
<span aria-hidden="true">&raquo;</span>
</a>
</li>
</ul>
</nav>

この例では、«と»を使用して左と右の矢印アイコンを作成しています。これらはHTMLエンティティで、それぞれ「と」をレンダリングします。

ページネーションの状態：無効とアクティブ

時々、現在のページを強調したり、特定のナビゲーションオプションを無効にしたりする必要があります。Bootstrapはactiveとdisabledクラスを提供してこれを簡単にします。

<nav aria-label="Page navigation">
<ul class="pagination">
<li class="page-item disabled">
<a class="page-link" href="#" tabindex="-1" aria-disabled="true">前</a>
</li>
<li class="page-item"><a class="page-link" href="#">1</a></li>
<li class="page-item active" aria-current="page">
<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="#">次</a>
</li>
</ul>
</nav>

ここで、「前」のリンクは無効であり、ページ2はアクティブ（現在選択中）です。

サイズ

ゴールデンラットの好みのように、時々ページネーションがちょうど良いサイズでないことがあります。Bootstrapは異なるサイズオプションを提供しています：

<!-- 大きなページネーション -->
<nav aria-label="...">
<ul class="pagination pagination-lg">
<li class="page-item active" aria-current="page">
<span class="page-link">1</span>
</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>
</ul>
</nav>

<!-- 小さなページネーション -->
<nav aria-label="...">
<ul class="pagination pagination-sm">
<li class="page-item active" aria-current="page">
<span class="page-link">1</span>
</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>
</ul>
</nav>

pagination-lgを追加すると大きなページネーションになり、pagination-smを追加すると小さなページネーションになります。お気に入りのコーヒーショップでグランデまたはタルを選ぶのと同じです！

アラインメント

デフォルトでは、ページネーションは左にアラインされます。でも、中央に配置したいときや右に寄せたいときはどうでしょうか？Bootstrapはそれをサポートしています：

<!-- 中央アラインメント -->
<nav aria-label="Page navigation">
<ul class="pagination justify-content-center">
<li class="page-item disabled">
<a class="page-link" href="#" tabindex="-1" aria-disabled="true">前</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="#">次</a>
</li>
</ul>
</nav>

<!-- 右アラインメント -->
<nav aria-label="Page navigation">
<ul class="pagination justify-content-end">
<li class="page-item disabled">
<a class="page-link" href="#" tabindex="-1" aria-disabled="true">前</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="#">次</a>
</li>
</ul>
</nav>

justify-content-centerを使用して中央アラインメントを行い、justify-content-endを使用して右アラインメントを行います。

フレックスユーティリティを使用したアラインメント

ページネーションのアラインメントをさらに細かく制御するために、Bootstrapのフレックスユーティリティを使用できます：

<nav aria-label="Page navigation">
<div class="d-flex justify-content-center">
<ul class="pagination">
<li class="page-item disabled">
<a class="page-link" href="#" tabindex="-1" aria-disabled="true">前</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="#">次</a>
</li>
</ul>
</div>
</nav>

ここでは、ページネーションを<div>でラップし、d-flexとjustify-content-centerクラスを使用しています。これにより、ページネーションの配置がさらに柔軟になります。

結論

そして、ここまでがBootstrapページネーションの大巡りです！基本的な構造から洒落たアラインメントまで、あなたは今、ウェブプロジェクトに美しい、機能的なページネーションを作成するためのツールを持っています。実践が大事ですので、これらの例で実験してみてください。

以下に、私たちがカバーしたクラスの簡単な参照表を示します：

クラス	目的
pagination	基本的なページネーション構造を作成します
page-item	各ページアイテムをスタイルします
page-link	クリック可能な部分をスタイルします
active	現在のページを強調します
disabled	ページネーションアイテムを無効にします
pagination-lg	大きなページネーションを作成します
pagination-sm	小さなページネーションを作成します
justify-content-center	ページネーションを中央にアラインします
justify-content-end	ページネーションを右にアラインします
d-flex	フレックスコンテナを作成します

ハッピーコーディング、そしてあなたのページが常に完璧にページネーションされることを祈っています！

Credits: Image by storyset