So implementieren Sie Bootstrap-Paging-Bootstrap-Tutorial-php.cn

So implementieren Sie Bootstrap-Paging

(*-*)浩

Freigeben： 2019-07-19 09:54:17

Original

2243 Leute haben es durchsucht

Auf jeder Webseite können wir die Paginierung sehen, egal ob es sich um ein mobiles Endgerät oder ein PC-Terminal handelt, ob es sich um ein Dropdown-Menü zur nächsten Seite oder eine Schaltfläche zur nächsten Seite handelt, die Paginierung ist zur Unterstützung Ihrer Website erforderlich Auf diese Weise können Sie zunächst die Zugriffseffizienz Ihrer Website verbessern. Außerdem wird die Seitendarstellung schöner, da sonst Millionen und Abermillionen von Daten nicht den Effekt zeigen, selbst wenn sie für einen oder mehrere Tage angezeigt werden zwei Stunden.

So implementieren Sie Bootstrap-Paging

Wie verwende ich Bootstrap, um Paging zu implementieren?(Empfohlenes Lernen: Bootstrap-Video-Tutorial)

Es gibt zwei Arten von Paginierung in Bootstrap, eine ist die normale Paginierung, die zweite Art ist das Umblättern. Sie hat den Anzeigeeffekt der vorherigen Seite und die der nächsten Seite Seite, Sie können es entsprechend Ihrer Website definieren, aber einige Symbole funktionieren genauso gut.

Verwenden Sie den Stil: .pagination

Paginierung: Eine ungeordnete Liste. Bootstrap behandelt die Paginierung wie jedes andere Schnittstellenelement.

Mit Umblättereffekt für vorherige und nächste Elemente, der einfachste Weg

Style.pager

( Pager), wenn Sie Wenn Sie einen einfachen Paging-Link erstellen möchten, um Benutzern die Navigation zu ermöglichen, können Sie dies durch Umblättern tun. Wie Paginierungslinks ist auch Paging eine ungeordnete Liste.

Die Implementierung beider Methoden erfordert die Verwendung von ul-Tags, und der Link verwendet auch einige Zustände, zum Beispiel habe ich einen bestimmten Artikel ausgewählt es statisch.

Paging-Beispiel

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

Nach dem Login kopieren

Beispiel zum Umblättern

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

Nach dem Login kopieren

Weitere technische Artikel zu Bootstrap finden Sie in der Spalte

Bootstrap-Tutorial

. Studie!

Das obige ist der detaillierte Inhalt vonSo implementieren Sie Bootstrap-Paging. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!