Bootstrap 图像
Bootstrap 图像
Bootstrap支持图像。 Bootstrap中有三个类，可用于将一些简单样式应用于图像。
以下类为图像添加样式:
| Class |
用途 |
| .img-rounded |
它添加了border-radius: 6px以使图像具有圆角。 |
| .img-circle |
通过添加border-radius: 500px，使整个图像变圆。 |
| .img-thumbnail |
它添加了一些填充和灰色边框。 |
Bootstrap图像四舍五入示例
class.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 图像圆示例
class.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缩略图图像示例
class.img-缩略图用于将图像成形为缩略图。
示例:
<!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>
Bootstrap响应式图像
响应式图像可以自动调整自身以适合屏幕尺寸。您可以通过在
![]()
标记中添加 .img响应类来创建响应图像。然后，图像将很好地缩放到父元素。
.img响应类应用display: block;最大宽度: 100％；和高度: 自动；
示例:
<!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 响应视频/嵌入
在Bootstrap中，您还可以添加视频并在任何设备上正确缩放它们。 class.embed-response-item 用于创建响应视频。类可以直接应用于<iframe>，<embed>，<video>和<object>元素。
让我们举个例子:
在以下示例中，我们向<iframe>标签添加了 .embed-response-item类以使视频具有响应性。它可以根据父元素很好地缩放视频。
示例:
<!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>
Bootstrap4图像
对齐图像用于使用.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>
