Bootstrap4 Tutoriel de base

Bootstrap4 Forme d'image

Les images sont très courantes dans la conception des sites web modernes. Par conséquent, définir le style des images et les placer correctement sur le site web est très important pour améliorer l'expérience utilisateur.

Avec les classes intégrées de Bootstrap, vous pouvez facilement définir le style des images, par exemple créer des images arrondies ou circulaires, ou leur donner un effet de miniature.

圆角图片

.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://fr.oldtoolbag.com/run/images/cinqueterre.jpg" class="rounded" alt="Cinque Terre" width="304" height="236">　
</div>
</body>
</html>

Voyons un test ‹/›

椭圆图片

.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://fr.oldtoolbag.com/run/images/cinqueterre.jpg" class="rounded-circle" alt="Cinque Terre">　
</div>
</body>
</html>

Voyons un test ‹/›

缩略图

.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://fr.oldtoolbag.com/run/images/cinqueterre.jpg" class="img-thumbnail" alt="Cinque Terre">
</div>
</body>
</html>

Voyons un test ‹/›

图片对齐方式

使用 .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://fr.oldtoolbag.com/run/images/paris.jpg" class="float-left">　
　　<img　src="https://fr.oldtoolbag.com/run/images/cinqueterre.jpg" class="float-right">
</div>
</body>
</html>

Voyons un test ‹/›

响应式图片

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

我们可以通过在 <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>Images responsives</h2>
　　<p>.img-fluid　classe peut définir des images responsives, redéfinissez la taille du navigateur pour voir l'effet :</p>
　　<img　src="https://fr.oldtoolbag.com/run/images/paris.jpg"　class="img-fluid">
</div>
</body>
</html>

Voyons un test ‹/›

Bootstrap4 Jumbotron Bootstrap4 Tableau