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>

Bootstrap 响应式助手

Bootstrap 图片替换