すぐ使えるCMS デモ(Bootstrap 2 ブログタイプ)

製品情報

Bootstrapのクラスによる全一覧(目次)のページネーションデザインの変更 2014/03/03 (月)

ページ移動リンクは、クラス設定により簡単にセンタリンクや右寄せ、サイズの変更が可能です。

全一覧の初期設定のテンプレート(templates/article/article_list.html)には「<div class="pagination">」というクラスでページネーション(ページの上の方にあるリンク)が定義されています。このクラスを付けておくだけで、サンプルのようにページのリンクがボックス内に並んで表示されますが、これを変更するには以下のようにクラスを足していきます。

大きなサイズでページ番号を表示

<div class="pagination pagination-large">

小さなサイズでページ番号を表示

<div class="pagination pagination-small">

ミニサイズでページ番号を表示

<div class="pagination pagination-mini">

ページ番号をセンタリング

<div class="pagination pagination-centered">

ページ番号を右寄せ

<div class="pagination pagination-right">