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

ページャーの作成

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

HTML

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

ブラウザでの表示

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

左寄せは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「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>

ブラウザでの表示