ページネーションの書式：Bootstrapコードまとめ
｜
Bootstrapのコードを少しずつまとめていきます。
今回はページネーションの書式です。
ページネーションの作成
ul要素にclass「pagination」を適用します。
「«」「»」の記号の箇所は特殊文字を使います。
HTML
<div class="text-center"> <ul class="pagination"> <li><a href="#">«</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="#">»</a></li> </ul> </div>
ブラウザでの表示
現在のページを青色反転で表示
li要素にclass「active」を適用します。
リンクしない項目を作るときは、表示する文字をspan要素で囲みます。
HTML
<div class="text-center"> <ul class="pagination"> <li><a href="#">«</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="#">»</a></li> </ul> </div>
ブラウザでの表示
「クリック不可」アイコンをマウスオーバー時に表示
li要素にclass「disabled」を適用します。
リンクしない項目を作るときは、表示する文字をspan要素で囲みます。
HTML
<div class="text-center"> <ul class="pagination"> <li class="disabled"><span>«</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="#">»</a></li> </ul> </div>
ブラウザでの表示
ページネーションのサイズを変更する
大きくするときはul要素にclass「pagination-lg」を追加します。
小さくするときはul要素にclass「pagination-sm」を追加します。
HTML
<div class="text-center"> <ul class="pagination pagination-lg"> <li class="disabled"><span>«</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="#">»</a></li> </ul> </div> <div class="text-center"> <ul class="pagination"> <li class="disabled"><span>«</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="#">»</a></li> </ul> </div> <div class="text-center"> <ul class="pagination pagination-sm"> <li class="disabled"><span>«</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="#">»</a></li> </ul> </div>
ブラウザでの表示
