スタッフによるブログです。WEBデザイン全般、IT関連、業務関連情報など。

  • 〒824-0001
  • 福岡県行橋市行事5丁目3−20
  • TEL : 0930-55-2416

ページネーションの書式:Bootstrapコードまとめ



ページネーションの書式:Bootstrapコードまとめ

Bootstrapのコードを少しずつまとめていきます。
今回はページネーションの書式です。

ページネーションの作成

ul要素にclass「pagination」を適用します。

「«」「»」の記号の箇所は特殊文字を使います。

HTML

<div class="text-center">
  <ul class="pagination">
    <li><a href="#">&laquo;</a></li>
    <li><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
    <li><a href="#">5</a></li>
    <li><a href="#">&raquo;</a></li>
  </ul>
</div>

ブラウザでの表示

ul要素にclass「pagination」を適用

現在のページを青色反転で表示

li要素にclass「active」を適用します。

リンクしない項目を作るときは、表示する文字をspan要素で囲みます。

HTML

<div class="text-center">
  <ul class="pagination">
    <li><a href="#">&laquo;</a></li>
    <li class="active"><span>1<span></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
    <li><a href="#">5</a></li>
    <li><a href="#">&raquo;</a></li>
  </ul>
</div>

ブラウザでの表示

li要素にclass「active」を適用

「クリック不可」アイコンをマウスオーバー時に表示

li要素にclass「disabled」を適用します。

リンクしない項目を作るときは、表示する文字をspan要素で囲みます。

HTML

<div class="text-center">
  <ul class="pagination">
    <li class="disabled"><span>&laquo;</span></li>
    <li class="active"><span>1<span></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
    <li><a href="#">5</a></li>
    <li><a href="#">&raquo;</a></li>
  </ul>
</div>

ブラウザでの表示

li要素にclass「disabled」を適用

ページネーションのサイズを変更する

大きくするときはul要素にclass「pagination-lg」を追加します。

小さくするときはul要素にclass「pagination-sm」を追加します。

HTML

<div class="text-center">
  <ul class="pagination pagination-lg">
    <li class="disabled"><span>&laquo;</span></li>
    <li class="active"><span>1<span></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
    <li><a href="#">5</a></li>
    <li><a href="#">&raquo;</a></li>
  </ul>
</div>

<div class="text-center">
  <ul class="pagination">
    <li class="disabled"><span>&laquo;</span></li>
    <li class="active"><span>1<span></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
    <li><a href="#">5</a></li>
    <li><a href="#">&raquo;</a></li>
  </ul>
</div>

<div class="text-center">
  <ul class="pagination pagination-sm">
    <li class="disabled"><span>&laquo;</span></li>
    <li class="active"><span>1<span></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
    <li><a href="#">5</a></li>
    <li><a href="#">&raquo;</a></li>
  </ul>
</div>

ブラウザでの表示

ul要素にclass「pagination-lg」「pagination-sm」を適用