srcmini本文概述
Bootstrap支持映像。 Bootstrap中有三个类，可用于将一些简单样式应用于图像。
以下类为图像添加样式：
| 班级 | 用途 |
|---|---|
| .img-rounded | 它添加了border-radius：6px来给图像加上圆角。 |
| .img-circle | 通过添加border-radius：500px, 可以使整个图像变圆。 |
| .img-thumbnail | 它添加了一些填充和灰色边框。 |
Bootstrap映像取整示例
.img-rounded类用于向图像添加圆角（IE8不支持圆角）。
例：
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap image</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<h2>Rounded Corners</h2>
<img src="abc.jpg" class="img-rounded" alt="abc" width="300" height="250">
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</body>
</html>Bootstrap图像圆示例
.img-circle类用于将图像成形为圆形（IE8不支持圆角）。
例：
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap image</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<h2>Circle</h2>
<img src="abc.jpg" class="img-circle" alt="abc" width="300" height="250">
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</body>
</html>Bootstrap缩略图图像示例
.img-thumbnail类用于将图像成形为缩略图。
例：
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap image</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<h2>Thumbnail</h2>
<img src="abc.jpg" class="img-thumbnail" alt="abc" width="300" height="250">
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</body>
</html>自举响应图像
响应图像可以自动调整自身以适合屏幕尺寸。你可以通过向<img>标记添加.img响应类来创建响应图像。然后，图像将很好地缩放到父元素。
％20.img响应式％20class％20应用％20display：％20block;％20and％20最大宽度：％20100％;％20and％20height：％20auto;％20to％20the％20image。
例：
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<h2>Responsive Image</h2>
<img class="img-responsive" src="abc.jpg" alt="abc" width="460" height="345">
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</body>
</html>自举响应视频/嵌入
在Bootstrap中，你还可以添加视频并在任何设备上正确缩放它们。 .embed-active-item类用于创建响应视频。类可以直接应用于<iframe>，<embed>，<video>和<object>元素。
让我们举个例子：
在以下示例中，我们将.embed-sensitive-item类添加到<iframe>标记中以使视频具有响应性。它可以根据父元素很好地缩放视频。
例：
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<h2>Responsive Embed</h2>
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/XGSy3_Czz8k"></iframe>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</body>
</html>对齐图像用于使图像通过.float-right类向右浮动，或者通过.float-left类向左浮动。
例：
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.6/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Aligning images Example</h2>
<p>Use the float classes to float the image to the left or to the right:</p>
<img src="good-morning.jpg" class="float-left" alt="abc" width="300" height="250">
<img src="good-morning.jpg" class="float-right" alt="abc" width="300" height="250">
</div>
</body>
</html>
评论前必须登录！
注册