ブートストラップページングの実装方法-ブートストラップのチュートリアル-php.cn

ブートストラップページングの実装方法

(*-*)浩

リリース： 2019-07-19 09:54:17

オリジナル

2277 人が閲覧しました

モバイルであろうと PC であろうと、次のページへのドロップダウンであろうと、次のページへのボタンであろうと、どの Web ページでもページネーションを見ることができますが、Web サイトをサポートするにはページネーションが必要です。まずはWebサイトのアクセス効率を向上させ、ページの表示を美しくしないと、数百万、数千万のデータが1～2時間表示されません。

ブートストラップページングの実装方法

ブートストラップを使用してページングを実装する方法?

(推奨学習: ブートストラップビデオチュートリアル)ページングには 2 種類あります。ブートストラップ、1 つは通常のページング、2 つ目はページめくりです。前のページと次のページの表示効果があります。

ページング: ページの効果を使用して、ユーザーのニーズに応じて定義できます。たとえば、テキストではなく、いくつかのアイコンを使用することも可能ですが、数字の方が効果がよくわかります。

スタイルを使用: .pagination

Pagination,順序なしリストである Bootstrap は、他のインターフェイス要素と同様にページネーションを処理します。

前の項目と次の項目のページめくり効果を使用する、最も簡単な方法です。

Style.pager

( Pager )、ユーザーにナビゲーションを提供する単純なページングリンクを作成する場合は、ページをめくることで実行できます。ページネーションリンクと同様、ページングも順序なしリストです。

両方のメソッドの実装には ul タグの使用が必要で、リンクには a が使用されます。また、特定の項目を選択したなどのいくつかの状態もあります。項目の 1 つを使用します

ページングの例

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"> 
	<title>Bootstrap 实例 - 默认的分页</title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">  
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

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

</body>
</html>

ログイン後にコピー

ページングの例

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"> 
	<title>Bootstrap 实例 - 默认的翻页</title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">  
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

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

</body>
</html>

ログイン後にコピー

Bootstrap関連の技術記事の詳細については、「

Bootstrapチュートリアル

」列を参照してください。勉強！

以上がブートストラップページングの実装方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。