Bootstrap4 Grund教程

Bootstrap4 Listengruppe

Listengruppen sind sehr nützlich und flexibel und dienen dazu, Elementlisten auf eine schöne Weise anzuzeigen. In der grundlegenden Form sind Listengruppen nur .list-Unsortierte Listen der Klasse Group, während die Listenelemente .list haben-group-Item-Klasse.

Die meisten grundlegenden Listen-Gruppen sind unsortiert.

Um eine Liste der Gruppen zu erstellen, können Sie auf dem <ul> Element .list hinzufügen-group Klasse, in <li> Element hinzufügen .list-group-item Klasse:

示例

<!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>Grundlegende Liste der Gruppen</h2>
　　<ul class="list-group">
　　　　<li class="list-group-item">Erstes Element</li>
　　　　<li class="list-group-item">Zweites Element</li>
　　　　<li class="list-group-item">Drittes Element</li>
　　</ul>
</div>
</body>
</html>

Testen Sie es heraus ‹/›

Das Ergebnis nach dem Ausführen ist wie folgt:

Artikel im aktiven Zustand

Aktive Artikel im Zustand können durch Hinzufügen der .active Klasse festgelegt werden:

示例

<!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>Artikel im aktiven Zustand</h2>
　　<ul class="list-group">
　　　　<li class="list-group-item active">Aktiver Artikel</li>
　　　　<li class="list-group-item">Zweiter Artikel</li>
　　　　<li class="list-group-item">Dritter Artikel</li>
　　</ul>
</div>
</body>
</html>

Testen Sie es heraus ‹/›

Deaktivierte Artikel

.disabled Klasse wird verwendet, um deaktivierte Artikel zu setzen:

示例

<!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>Deaktivierte Artikel</h2>
　　<ul class="list-group">
　　　　<li class="list-group-item disabled">Deaktivierter Artikel</li>
　　　　<li class="list-group-item">Zweiter Artikel</li>
　　　　<li class="list-group-item">Dritter Artikel</li>
　　</ul>
</div>
</body>
</html>

Testen Sie es heraus ‹/›

Verknüpfungsliste der Artikel

Um eine Verknüpfungsliste der Artikel zu erstellen, können Sie <ul> durch <div> ersetzen ， <a> ersetzt <li>。Wenn Sie eine graue Hintergrundfarbe beim Mouseover hinzufügen möchten, fügen Sie .list hinzu-group-item-action Klasse:

示例

<!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>Verknüpfungsliste der Artikel</h2>
　　<div　class="list-group">
　　　　<a　href="#"　class="list-group-item　list-group-item-action">Erster Artikel</a>
　　　　<a　href="#"　class="list-group-item　list-group-item-action">Zweiter Artikel</a>
　　　　<a　href="#"　class="list-group-item　list-group-item-action">Dritter Artikel</a>
　　</div>
</div>
</body>
</html>

Testen Sie es heraus ‹/›

Mehrfarbige Liste der Elemente

Die Farben der Liste der Elemente können durch die folgenden Spalten festgelegt werden: .list-group-item-success, list-group-item-secondary, list-group-item-info, list-group-item-warning, .list-group-item-danger, list-group-item-dark und list-group-item-light:

示例

<!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>Mehrfarbige Listezeilen</h2>
　　<ul class="list-group">
　　　　<li class="list-group-item　list-group-item-success">erfolgreiche Listezeile</li>
　　　　<li class="list-group-item　list-group-item-secondary">sekundäre Listezeile</li>
　　　　<li class="list-group-item　list-group-item-info">informative Listezeile</li>
　　　　<li class="list-group-item　list-group-item-warning">warnende Listezeile</li>
　　　　<li class="list-group-item　list-group-item-danger">gefährliche Listezeile</li>
　　　　<li class="list-group-item　list-group-item-primary">hauptsächliche Listezeile</li>
　　　　<li class="list-group-item　list-group-item-dark">dunkelgraue Listezeile</li>
　　　　<li class="list-group-item　list-group-item-light">helle Listezeile</li>
　　</ul>
</div>
</body>
</html>

Testen Sie es heraus ‹/›

链接的多种颜色列表项

示例

<!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>Mehrfarbige Listezeilen</h2>
　　<div　class="list-group">
　　　　<a　href="#"　class="list-group-item　list-group-item-action">aktivierende Listezeile</a>
　　　　<a　href="#"　class="list-group-item　list-group-item-success">erfolgreiche Listezeile</a>
　　　　<a　href="#"　class="list-group-item　list-group-item-secondary">sekundäre Listezeile</a>
　　　　<a　href="#"　class="list-group-item　list-group-item-info">informative Listezeile</a>
　　　　<a　href="#"　class="list-group-item　list-group-item-warning">warnende Listezeile</a>
　　　　<a　href="#"　class="list-group-item　list-group-item-danger">gefährliche Listezeile</a>
　　　　<a　href="#"　class="list-group-item　list-group-item-primary">hauptsächliche Listezeile</a>
　　　　<a　href="#"　class="list-group-item　list-group-item-dark">dunkelgraue Listezeile</a>
　　　　<a　href="#"　class="list-group-item　list-group-item-light">helle Listezeile</a>
　　</div>
</div>
</body>
</html>

Testen Sie es heraus ‹/›

Bootstrap4 Karte Bootstrap4 Paginierung