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

  • 〒800-0222
  • 北九州市小倉南区中曽根4-16-2
  • TEL : 093-967-1128

ページャーの書式:Bootstrapコードまとめ



ページャーの書式:Bootstrapコードまとめ

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

ページャーの作成

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

HTML

<ul class="pager">
  <li><a href="#">戻る</a></li>
  <li><a href="#">ホーム</a></li>
  <li><a href="#">進む</a></li>
</ul>

ブラウザでの表示

ul要素にclass「pager」を適用

ボタンを左右に振り分けて配置する

左寄せはli要素にclass「previous」を適用します。

右寄せはli要素にclass「next」を適用します。

HTML

<ul class="pager">
  <li class="previous"><a href="#">戻る</a></li>
  <li><a href="#">ホーム</a></li>
  <li class="next"><a href="#">進む</a></li>
</ul>

ブラウザでの表示

li要素にclass「previous」「next」を適用

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

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

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

HTML

<ul class="pager">
  <li><a href="#">戻る</a></li>
  <li class="disabled"><a href="#"><span>ホーム</span></a></li>
  <li><a href="#">進む</a></li>
</ul>

ブラウザでの表示

li要素にclass「disabled」を適用