Bootstrap4 Grundtutorials

Bootstrap4 Dropdown-Menü Bootstrap4 Listegruppe

Bootstrap4 Karte (Card)

Bootstrap4Ein neuer flexibler und erweiterbarer Inhaltsspeicher, die card-Komponente, wurde eingeführt, um die alten panel-, well- und thumbnail-Komponenten zu ersetzen. Sie umfasst Header- und Footer-Optionen, verschiedene Inhalte, Kontextfarben und starke Displayoptionen. Im folgenden Teil sehen Sie, wie man die card-Komponente verwendet.

einfache Karte

können wir Bootstrap verwenden4 der .card und .card-body 类来创建一个简单的卡片，示例如下:

Beispiel

<!DOCTYPE　html>
<html>
<head>
　　<title>Bootstrap　Beispiel</title>
　　<meta　charset="utf-8">-8">
　　<meta　name="viewport"　content="Breite=device-Breite,　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>
　　<div　class="card">
　　　　<div class="card-body">简单的卡片</div>
　　</div>
</div>
</body>
</html>

Testen Sie es heraus ‹/›

Bootstrap4 的卡片类似 Bootstrap 3 中的面板、图片缩略图、well。

头部和底部

.card-header类用于创建卡片的头部样式， .card-footer 类用于创建卡片的底部样式：

Beispiel

<!DOCTYPE　html>
<html>
<head>
　　<title>Bootstrap　Beispiel</title>
　　<meta　charset="utf-8">-8">
　　<meta　name="viewport"　content="Breite=device-Breite,　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>
　　<div　class="card">
　　　　<div class="card-header">头部</div>
　　　　<div class="card-body">内容</div>　
　　　　<div class="card-footer">底部</div>
　　</div>
</div>
</body>
</html>

Testen Sie es heraus ‹/›

多种颜色卡片

Bootstrap 4 提供了多种卡片的背景颜色类： .bg-primary, .bg-success, .bg-info, .bg-warning, .bg-danger, .bg-secondary, .bg-dark 和 .bg-light。

Beispiel

<!DOCTYPE　html>
<html>
<head>
　　<title>Bootstrap　Beispiel</title>
　　<meta　charset="utf-8">-8">
　　<meta　name="viewport"　content="Breite=device-Breite,　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>
　　<div　class="card">
　　　　<div class="card-body">Basic　card</div>
　　</div>
　　<br>
　　<div　class="card　bg-primary　text-white">
　　　　<div class="card-body">Primary　card</div>
　　</div>
　　<br>
　　<div　class="card　bg-success　text-white">
　　　　<div class="card-body">Success　card</div>
　　</div>
　　<br>
　　<div　class="card　bg-info　text-white">
　　　　<div class="card-body">Info　card</div>
　　</div>
　　<br>
　　<div　class="card　bg-warning　text-white">
　　　　<div class="card-body">Warning　card</div>
　　</div>
　　<br>
　　<div　class="card　bg-danger　text-white">
　　　　<div class="card-body">Danger　card</div>
　　</div>
　　<br>
　　<div　class="card　bg-secondary　text-white">
　　　　<div class="card-body">Secondary　card</div>
　　</div>
　　<br>
　　<div　class="card　bg-dark　text-white">
　　　　<div class="card-body">Dark　card</div>
　　</div>
　　<br>
　　<div　class="card　bg-light　text-dark">
　　　　<div class="card-body">Light　card</div>
　　</div>
</div>
</body>
</html>

Testen Sie es heraus ‹/›

标题、文本和链接

我们可以在头部元素上使用 .card-title 类来设置卡片的标题。 .card-text 类用于设置卡片正文的内容。 .card-link 类用于给链接设置颜色。

Beispiel

<!DOCTYPE　html>
<html>
<head>
　　<title>Bootstrap　Beispiel</title>
　　<meta　charset="utf-8">-8">
　　<meta　name="viewport"　content="Breite=device-Breite,　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>
　　<div　class="card">
　　　　<div class="card-body">
　　　　　　<h4　class="card-title">Card　title</h4>
　　　　　　<p class="card-text">Some　example　text.　Some　example　text.</p>
　　　　　　<a　href="#"　class="card-link">Card　link</a>
　　　　　　<a　href="#"　class="card-link">Another　link</a>
　　　　</div>
　　</div>
</div>
</body>
</html>

Testen Sie es heraus ‹/›

图片卡片

我们可以给 <img> 添加 .card-img-top（图片在文字上方）或 .card-img-bottom（图片在文字下方来设置图片卡片：

Beispiel

<!DOCTYPE　html>
<html>
<head>
　　<title>Bootstrap　Beispiel</title>
　　<meta　charset="utf-8">-8">
　　<meta　name="viewport"　content="Breite=device-Breite,　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>Bildkarte</h2>
　　<p>Das Bild befindet sich oben (karte-img-top):</p>
　　<div　class="karte"　style="Breite:400px">
　　　　<img　class="karte-img-top"　src="https://static.oldtoolbag.com/bilder/mix/"img_avatar.png"　alt="Karte　bild"　style="Breite:100%">
　　　　<div class="card-body">
　　　　　　<h4　class="card-title">John Doe</h4>
　　　　　　<p class="card-text">Einige　Beispieltexte　Einige　Beispieltexte.　John　Doe　ist　ein　Architekt　und　Ingenieur</p>
　　　　　　<a href="#" class="btn btn-primary">Sehen Sie Ihr Profil</a>
　　　　</div>
　　</div>
　　<br>
　　
　　<p>Das Bild befindet sich unten (karte-img-bottom):</p>
　　<div　class="karte"　style="Breite:400px">
　　　　<div class="card-body">
　　　　　　<h4　class="card-title">Jane　Doe</h4>
　　　　　　<p class="card-text">Einige　Beispieltexte　Einige　Beispieltexte.　Jane　Doe　ist　ein　Architekt　und　Ingenieur</p>
　　　　　　<a href="#" class="btn btn-primary">Sehen Sie Ihr Profil</a>
　　　　</div>
　　　　<img　class="karte-img-bottom"　src="https://static.oldtoolbag.com/bilder/mix/"img_avatar.png"　alt="Karte　bild"　style="Breite:100%">
　　</div>
</div>
</body>
</html>

Testen Sie es heraus ‹/›

Wenn das Bild als Hintergrund gesetzt werden soll, kann die　.karte-img-Überlagerungs　Klasse:

Beispiel

<!DOCTYPE　html>
<html>
<head>
　　<title>Bootstrap　Beispiel</title>
　　<meta　charset="utf-8">-8">
　　<meta　name="viewport"　content="Breite=device-Breite,　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>Text über dem Bild</h2>
　　<p>Wenn das Bild als Hintergrund gesetzt werden soll, kann die　.karte-img-Überlagerungs　Klasse:</p>
　　<div　class="karte　bild-flüssig"　style="Breite:500px">
　　　　<img　class="karte-img-top"　src="https://static.oldtoolbag.com/bilder/mix/"img_avatar.png"　alt="Karte　bild"　style="Breite:100%">
　　　　<div class="card-img-overlay">
　　　　　　<h4　class="card-title">John Doe</h4>
　　　　　　<p class="card-text">Einige Beispieltexte einige Beispieltexte. Einige Beispieltexte einige Beispieltexte. Einige Beispieltexte einige Beispieltexte.</p>
　　　　　　<a href="#" class="btn btn-primary">Sehen Sie Ihr Profil</a>
　　　　</div>
　　</div>
</div>
</body>
</html>

Testen Sie es heraus ‹/›

Bootstrap4 Dropdown-Menü Bootstrap4 Listegruppe