【入門】Bootstrapの書き方　〜Pagination〜

みなさんこんにちは さくちゃん です。

本日は、「Pagination（ページネーション）」の書き方についてやって行きます。
では早速やって行きましょう。

Paginationの書き方

公式サイトの確認

まずは公式サイトの確認をして行きます。
公式サイトのタブの「Documentation」をクリックします。

次に左サイドバーの「Components」をクリックします。

そして「Components」の中の「Pagination」をクリックすると参照できます。

基本的な書き方

基本的な書き方は、下のように書いて行きます。

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

書き方は基本、「ナビゲーション」を同じです。
ナビゲーションについてはこちらをご覧ください。

では、それぞれについて説明して行きます。

pagination

まずは、「pagination」であることを認識させるために、<ul>タグにクラス名で「pagination」と指定します。
そうすることで、「pagination」として認識されるようになります。

<ul class="pagination">

page-item

次に、ページそれぞれの設定をして行きます。
<li>タグにクラス名で「page-item」を指定することで、ブロックを作成できます。
「Previous」や「Next」「ページ数」に応じて、<li>タグを作成しクラス名に「page-item」を指定します。

 <li class="page-item"> </li>

page-link

最後に、それぞれのブロックのリンク先を指定します。
「page-item」で作成したブロック1つ1つの中に、<a>タグを設定し、クラス名に「page-link」を指定します。そして<href>でリンクをしてしてあげます。

最後に表示させたい数字、文字を入力したら完成です。

<li class="page-item"><a class="page-link" href="#">Previous</a></li>

Working with icons

「Working with icons」は文字の代わりに「アイコン」などを使用したい場合に使用します。
書き方は、<a>タグの中に下の要素を追加することで表示させることができます。

<li class="page-item">
　<a class="page-link" href="#" aria-label="Previous">
　　<span aria-hidden="true">«</span>
　　<span class="sr-only">Previous</span>
　</a>
</li>

また、「aria-label」を書いてあげるとより親切なので、書いてあげるといいでしょう。

Sizing

ページネーションを大きく、小さくすることも可能です。
書き方は、<ul>タグに要素を追加するだけです。

<ul class="pagination pagination-lg">

大きくしたい場合は「pagination-lg」、小さくしたい場合は「pagination-sm」と指定してあげます。

Alignment

「Alignment」は、配置を変更するときに使用します。
デフォルトは「左配置」なので、「中央」「右」それぞれに配置する場合は、下のように書きます。

中央

<ul class="pagination justify-content-center">

右

<ul class="pagination justify-content-end">

それぞれ<ul>タグに、クラス名で「justify-content-center」「justify-content-end」と指定してあげるだけで、配置を変更できます。

まとめ

ページネーションは、ブログサイトを作成するときなどによく使われます。
基本形は「ナビゲーション」と同じなので、まずは「ナビゲーション」の書き方を学んでから行うといいと思います。

では本日は以上になります。