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


この章では、Bootstrap でサポートされているページング機能について説明します。ページネーションは順序なしリストであり、Bootstrap は他のインターフェイス要素と同様にページネーションを処理します。

ページネーション

次の表は、ページネーションを処理するために Bootstrap によって提供されるクラスのリストです。

クラス説明サンプルコード
.pagination ページにページネーションを表示するには、このクラスを追加します。 
<ul class="pagination">
  <li><a href="#">&laquo;</a></li>
  <li><a href="#">1</a></li>
  .......
</ul>
.disabled、.active.disabledを使用してクリック不可のリンクを定義し、.activeを使用して現在のページを示すことで、リンクをカスタマイズできます。 
<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これらのクラスを使用して、さまざまなサイズのアイテムを取得します。 
<ul class="pagination pagination-lg">...</ul>
<ul class="pagination">...</ul>
<ul class="pagination pagination-sm">...</ul>

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

次の例は、上の表で説明したクラス.paginationの使用法を示しています。インスタンスを実行」ボタンオンライン インスタンスのステータスを表示するには

ページネーション

次の例は、上の表で説明したクラス
.disabled、.active
の使用法を示しています。 「インスタンスの実行」ボタンをクリックして、オンライン インスタンスを表示します。

ページネーション サイズ

次の例は、上の表で説明したクラス

.pagination-*

の使用法を示しています。 サンプルの実行 »

「サンプルの実行」ボタンをクリックしてオンラインサンプルを表示します

ページ (ポケベル)
ユーザーにナビゲーションを提供する単純なページング リンクを作成したい場合は、ページをめくることで作成できます。 。ページネーション リンクと同様、ページングも順序なしリストです。デフォルトでは、リンクは中央に配置されます。次の表に、ページめくりを処理する Bootstrap クラスを示します。

クラス

説明

サンプルコード

.pager

ページめくりリンクを取得するには、このクラスを追加します。 
<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 实例 - 默认的分页</title>
  <link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
</head>
<body>

<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>


</body>
</html>

.previous、.next

リンクを左に揃えるにはクラス

.previous

を使用し、リンクを右に揃えるには

.next

を使用します。 
<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 实例 - 分页的状态</title>
   <link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
</head>
<body>

<ul class="pagination">
  <li><a href="#">«</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="#">»</a></li>
</ul>


</body>
</html>
りー
.disabled このクラスを追加すると、見た目が軽くなります。

デフォルトのページめくり

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

Aligned Links

次の例は、上の表で説明したクラス
.previous、.next
の使用法を示しています。オンラインインスタンス

ページ回転ステータスを表示するためのボタン

次の例は、上の表で説明したクラス

.disabled

の使用法を示しています:

Instance

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 实例 - 分页的大小</title>
  <link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
</head>
<body>

<ul class="pagination pagination-lg">
  <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><br>
<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><br>
<ul class="pagination pagination-sm">
 <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>

</body>
</html>

Run Instance»

クリック「サンプルを実行」ボタンをクリックしてオンラインサンプルを表示します

←
→

PHP中国語ウェブサイト

ホームページホームページコースコース記事記事に質問に質問辞書辞書マニュアルマニュアルダウンロードダウンロード検索検索APPダウンロード APPダウンロード