Bootstrap4 Grund教程

Bootstrap4 Liste gruppiert Bootstrap4 Fortschrittsbalken

Bootstrap4 Paginierung

Paginierung ist ein Prozess der Organisation von Inhalten, indem Inhalte in separate Seiten unterteilt werden.
Paginierung wird in fast jeder Webanwendung auf eine oder andere Weise verwendet, z.B. verwenden Suchmaschinen Paginierung, um eine begrenzte Anzahl von Ergebnissen auf der Suchergebnisseite anzuzeigen, oder auf Blogs oder Foren eine begrenzte Anzahl von Artikeln auf jeder Seite anzuzeigen.

Während des Web-Entwicklungsprozesses wird in der Regel eine Paginierung durchgeführt, wenn zu viel Inhalt vorhanden ist.

Bootstrap 4 Eine Paginierungseffekt kann sehr einfach implementiert werden.

Um eine grundlegende Paginierung zu erstellen, können Sie die Klasse .pagination auf dem <ul>-Element hinzufügen. Fügen Sie dann .page auf dem <li>-Element hinzu.-item 类：:

示例

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap 示例</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js></script>
</head>
<body>
<div　class="container">
　　<h2>分页</h2>
　　<p>要创建一个基本的分页可以在　ul　元素上添加　.pagination　类。然后在　li　元素上添加　.page-item 类：</p>　　　　　　　　　　　　　　　　　　
　　<ul class="pagination">
　　　　<li class="page-item><a class="page-link" href="#">Previous</a></li>
　　　　<li class="page-item><a class="page-link" href="#">1</a></li>
　　　　<li class="page-item><a class="page-link" href="#">2</a></li>
　　　　<li class="page-item><a class="page-link" href="#">3</a></li>
　　　　<li class="page-item><a class="page-link" href="#">Next</a></li>
　　</ul>
</div>
</body>
</html>

Testen Sie es heraus ‹/›

当前页页码状态

当前页可以使用 .active 类来高亮显示：

示例

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap 示例</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js></script>
</head>
<body>
<div　class="container">
　　<h2>当前页页码状态</h2>
　　<p>当前页可以使用　.active　类来高亮显示：</p>　　　　　　　　　　　　　　　　　　
　　<ul class="pagination">
　　　　<li class="page-item><a class="page-link" href="#">Previous</a></li>
　　　　<li class="page-item><a class="page-link" href="#">1</a></li>
　　　　<li class="page-item active><a class="page-link" href="#">2</a></li>
　　　　<li class="page-item><a class="page-link" href="#">3</a></li>
　　　　<li class="page-item><a class="page-link" href="#">Next</a></li>
　　</ul>
</div>
</body>
</html>

Testen Sie es heraus ‹/›

不可点击的分页链接

.disabled 类可以设置分页链接不可点击:

示例

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap 示例</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js></script>
</head>
<body>
<div　class="container">
　　<h2>不可点击的分页链接</h2>
　　<p>.disabled 类可以设置分页链接不可点击:</p>　　　　　　　　　　　　　　　　　　
　　<ul class="pagination">
　　　　<li class="page-item disabled><a class="page-link" href="#">Previous</a></li>
　　　　<li class="page-item><a class="page-link" href="#">1</a></li>
　　　　<li class="page-item><a class="page-link" href="#">2</a></li>
　　　　<li class="page-item><a class="page-link" href="#">3</a></li>
　　　　<li class="page-item><a class="page-link" href="#">Next</a></li>
　　</ul>
</div>
</body>
</html>

Testen Sie es heraus ‹/›

分页显示大小

可以将分页条目设置为不同的大小。

.pagination-lg 类设置大字体的分页条目，.pagination-sm 类设置小字体的分页条目:

示例

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap 示例</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js></script>
</head>
<body>
<div　class="container">
　　<h2>分页显示大小</h2>
　　<p>.pagination-lg 类设置大字体的分页条目，.pagination-sm 类设置小字体的分页条目:</p>　　　　　　　　　　　　　　　　　　
　　<ul class="pagination pagination-lg">
　　　　<li class="page-item><a class="page-link" href="#">Previous</a></li>
　　　　<li class="page-item><a class="page-link" href="#">1</a></li>
　　　　<li class="page-item><a class="page-link" href="#">2</a></li>
　　　　<li class="page-item><a class="page-link" href="#">3</a></li>
　　　　<li class="page-item><a class="page-link" href="#">Next</a></li>
　　</ul>
　　　
　　<ul class="pagination pagination-sm">
　　　　<li class="page-item><a class="page-link" href="#">Previous</a></li>
　　　　<li class="page-item><a class="page-link" href="#">1</a></li>
　　　　<li class="page-item><a class="page-link" href="#">2</a></li>
　　　　<li class="page-item><a class="page-link" href="#">3</a></li>
　　　　<li class="page-item><a class="page-link" href="#">Next</a></li>
　　</ul>
</div>
</body>
</html>

Testen Sie es heraus ‹/›

面包屑导航

.breadcrumb 和 .breadcrumb-item 类用于设置面包屑导航：

示例

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap 示例</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js></script>
</head>
<body>
<div　class="container">
　　<h2>Brotkrümelnavigation</h2>
　　<p>.breadcrumb　und　.breadcrumb-item　Klasse wird verwendet, um die Brotkrümelnavigation zu konfigurieren：</p>　　　　　　　　　　　　　　　　　　
　　<ul　class="breadcrumb">
　　　　<li　class="breadcrumb-item"><a　href="#">Fotos</a></li>
　　　　<li　class="breadcrumb-item"><a　href="#">Sommer　2017</a></li>
　　　　<li　class="breadcrumb-item"><a　href="#">Italien</a></li>
　　　　<li　class="breadcrumb-item　active">Rom</li>
　　</ul>
</div>
</body>
</html>

Testen Sie es heraus ‹/›

Bootstrap4 Liste gruppiert Bootstrap4 Fortschrittsbalken