BootStrapで超簡単にページボタンが作れるよ

イチから作ると結構大変なページボタンですが、BootStrapだと超簡単に作れてしまいます。

ページボタンと言うのはこういうやつです。

昔は僕もイチから作っていました。作った経験から言うと作るの結構大変なんです。これがBootStrapで数行で作れてしまうんだからありがたい。

[ad#ad-1]

ソースコードはこちら

まずは全体のソースコードです。BODYタグ以下にページボタンが実装されています。このあと１つずつ解説していきます。

 

pagerで[前へ][次へ]ボタン

[前へ][次へ]ボタンは以下の通りたった4行で可能です。

<ul class=”pager”>
　<li class=”previous”><a href=””>前へ</a></li>
　<li class=”next”><a href=””>次へ</a></li>
</ul>

ブラウザの両端に位置するので、中央に寄せたい場合はDIVタグ等で調整してください。

 

paginationでページ番号ボタン

次にページボタンです。こちらの方がよく見かけるかもしれませんね。以下のタグで可能になります。

<ul class=”pagination”>
　<li class=”disabled“><a href=””>&laquo;</a></li>
　<li class=”active“><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=””>&raquo;</a></li>
</ul>

赤い字のところですが、disabledはボタンを無効化するためのものです。事例では前ページボタンに設置していますが、マウスをかざすとポインタが以下のように「停車禁止マーク」になって、これ以上行けないことが促されます。（これをイチから実装すると結構骨が折れるんです。）

activeは現在のページ位置を示すためのものです。事例では1ページ目が青く塗りつぶされていますね。

---

 

BootStrapを使うと簡単にWebページが作れてしまいます。今後も便利なものがあったら随時紹介していきます。

 - BootStrap