Bootstrap4 Grund教程

Bootstrap4 Bildform

Bilder sind in modernen Webdesigns sehr verbreitet. Daher ist es sehr wichtig, den Stil der Bilder zu konfigurieren und sie korrekt auf der Webseite zu platzieren, um die Benutzererfahrung zu verbessern.

Mit den integrierten Klassen von Bootstrap können Sie den Stil von Bildern leicht einstellen, z.B. runde oder kreisförmige Bilder erstellen oder ihnen ein ähnliches Thumbnail-Effekt verleihen.

圆角图片

.rounded 类可以让图片显示圆角效果：

示例

!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>.rounded 类可以让图片显示圆角效果：</p>　　　　　　　　　　　　
　　<img src="https://de.oldtoolbag.com/laufen/bilder/cinqueterre.jpg" class="rounded" alt="Cinque Terre" width="304" height="236">　
</div>
</body>
</html>

Testen Sie es heraus ‹/›

椭圆图片

.rounded-circle 类可以设置椭圆形图片:

示例

!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>.rounded-circle 类可以设置椭圆形图片:</p>　　　　　　　　　　　　
　　<img src="https://de.oldtoolbag.com/laufen/bilder/cinqueterre.jpg" class="rounded-circle" alt="Cinque Terre">　
</div>
</body>
</html>

Testen Sie es heraus ‹/›

缩略图

.img-thumbnail 类用于设置图片缩略图(图片有边框):

示例

!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>.img-thumbnail 类用于设置图片缩略图(图片有边框):</p>　　　　　　　　　　　　
　　<img src="https://de.oldtoolbag.com/laufen/bilder/cinqueterre.jpg" class="img-thumbnail" alt="Cinque Terre">
</div>
</body>
</html>

Testen Sie es heraus ‹/›

图片对齐方式

使用 .float-right 类来设置图片右对齐，使用 .float-left 类设置图片左对齐:

示例

!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>使用 .float-right 类来设置图片右对齐，使用 .float-left 类设置图片左对齐:</p>
　　<img src="https://de.oldtoolbag.com/laufen/bilder/paris.jpg" class="float-left">　
　　<img src="https://de.oldtoolbag.com/laufen/bilder/cinqueterre.jpg" class="float-right">
</div>
</body>
</html>

Testen Sie es heraus ‹/›

响应式图片

图像有各种各样的尺寸，我们需要根据屏幕的大小自动适应。

我们可以通过在 <img> 标签中添加 .img-fluid 类来设置响应式图片。

.img-fluid 类设置了 max-width: 100%; 、 height: auto; :

示例

!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>Responsives Bild</h2>
　　<p>.img-flüssig Klasse kann responsives Bild einstellen, die Größe des Browsers ändern und die Wirkung überprüfen:</p>
　　<img src="https://de.oldtoolbag.com/laufen/bilder/paris.jpg" class="img-flüssig">
</div>
</body>
</html>

Testen Sie es heraus ‹/›

Bootstrap4 Jumbotron Bootstrap4 Tabelle