ブートストラップ-ページネーション

この章では、Bootstrapがサポートするページネーション機能について説明します。ページ区切り、順序付けられていないリストは、他の多くのインターフェイス要素と同様にBootstrapによって処理されます。

ページ付け

次の表に、ページネーションを処理するためにBootstrapが提供するクラスを示します。

Class Description Sample code

.pagination

Add this class to get the pagination on your page.

<ul class = "pagination">
   <li><a href = "#">&laquo;</a></li>
   <li><a href = "#">1</a></li>
   .......
</ul>

.disabled, .active

You can customize links by using .disabled *for unclickable links and .active* to indicate the current page.

<ul class = "pagination">
   <li class = "disabled"><a href = "#">&laquo;</a></li>
   <li class = "active"><a href = "#">1<span class = "sr-only">(current)</span></a></li>
   .......
</ul>

.pagination-lg, .pagination-sm

Use these classes to get different size items.

<ul class = "pagination pagination-lg">...</ul>
<ul class = "pagination">...</ul>
<ul class = "pagination pagination-sm">...</ul>

デフォルトのページネーション

次の例は、上の表で説明したクラス .pagination の使用を示しています-

<ul class = "pagination">
   <li><a href = "#">&laquo;</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 = "#">&raquo;</a></li>
</ul>

州

次の例は、上記の表で説明したクラス .disabled、.active の使用を示しています-

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

サイジング

次の例は、サイズ変更のためのクラスの使用を示しています。上記の表で説明した* .pagination-**-

<ul class = "pagination pagination-lg">
   <li><a href = "#">&laquo;</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 = "#">&raquo;</a></li>
</ul>

<br>

<ul class = "pagination">
   <li><a href = "#">&laquo;</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 = "#">&raquo;</a></li>
</ul>

<br>

<ul class = "pagination pagination-sm">
   <li><a href = "#">&laquo;</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 = "#">&raquo;</a></li>
</ul>

ページャ

テキストを超えるシンプルなページネーションリンクを作成する必要がある場合、ページャーは非常にうまく機能します。ページネーションリンクと同様に、ページャーは順序付けられていないリストです。デフォルトでは、リンクは中央に配置されます。次の表に、Bootstrapがポケットベルに提供するクラスを示します。

Class Description Sample code

.pager

Add this class to get the pager links.

<ul class = "pager">
   <li><a href = "#">Previous</a></li>
   <li><a href = "#">Next</a></li>
</ul>

.previous, .next

Use class .previous *to left align and .next* to right-align the links.

<ul class = "pager">
   <li class = "previous"><a href = "#">&larr; Older</a></li>
   <li class = "next"><a href = "#">Newer &rarr;</a></li>
</ul>

.disabled

Add this class to get a muted look.

<ul class = "pager">
   <li class = "previous disabled"><a href = "#">&larr; Older</a></li>
   <li class = "next"><a href = "#">Newer &rarr;</a></li>
</ul>

デフォルトのポケットベル

次の例は、上の表で説明したクラス .pager の使用を示しています-

<ul class = "pager">
   <li><a href = "#">Previous</a></li>
   <li><a href = "#">Next</a></li>
</ul>

整列リンク

次の例は、上記の表で説明した、*。previous、.next *のアライメントのためのクラスの使用を示しています-

<ul class = "pager">
   <li class = "previous"><a href = "#">&larr; Older</a></li>
   <li class = "next"><a href = "#">Newer &rarr;</a></li>
</ul>

州

次の例は、上の表で説明したクラス .disabled の使用を示しています-

<ul class = "pager">
   <li class = "previous disabled"><a href = "#">&larr; Older</a></li>
   <li class = "next"><a href = "#">Newer &rarr;</a></li>
</ul>

Bootstrap-pagination