Bootstrap - 图像

本章将讨论 Bootstrap 提供的各种类，作为对图像的支持。图像在吸引网站访问者的注意力方面发挥着至关重要的作用。除了使内容变得有趣和吸引人之外，图像还有助于规划任何网站的内容策略。

响应式图像

可以使用.img-fluid类在 Bootstrap 中使图像变得响应式。该类适用max-width: 100%; 和高度：自动；到图像，以便它随父宽度缩放。响应式图像会自动适应屏幕尺寸。

例子

您可以使用“编辑并运行”选项编辑并尝试运行此代码。

<!DOCTYPE html>
<html lang="en">
     <head>
         <title>Bootstrap - Images</title>
         <meta charset="UTF-8">
         <meta http-equiv="X-UA-Compatible" content="IE=edge">
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
         <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
         <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
     </head>
     <body>
       <div class="container mt-3 p-2">
        <h2 class="text-start">Responsive Image</h2>
        <img src="/bootstrap/images/tutimg.png" class="img-fluid" alt="Responsive Image">
       </div>
     </body>
</html>

图像缩略图

要显示为带有边框和一些填充的缩略图的图像，请在图像元素上使用.img-thumbnail类。

例子

您可以使用“编辑并运行”选项编辑并尝试运行此代码。

<!DOCTYPE html>
<html lang="en">
     <head>
         <title>Bootstrap - Images</title>
         <meta charset="UTF-8">
         <meta http-equiv="X-UA-Compatible" content="IE=edge">
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
         <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
         <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
     </head>
     <body>
       <div class="container mt-3 p-2">
        <h2 class="text-start">Thumbnail Image</h2>
        <img src="/bootstrap/images/scenery.jpg" class="img-thumbnail" alt="Thumbnail Image">
       </div>
     </body>
</html>

带圆角的图像

要显示圆角的图像，请在图像元素上使用.rounded 类。

例子

您可以使用“编辑并运行”选项编辑并尝试运行此代码。

<!DOCTYPE html>
<html lang="en">
     <head>
         <title>Bootstrap - Images</title>
         <meta charset="UTF-8">
         <meta http-equiv="X-UA-Compatible" content="IE=edge">
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
         <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
         <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
     </head>
     <body>
       <div class="container mt-3 p-2">
        <h2 class="text-start">Image with rounded corners</h2>
        <img src="/bootstrap/images/scenery2.jpg" class="rounded" alt="Image with rounded corners">
       </div>
     </body>
</html>

图像对齐

添加到网页的图像可以根据我们的选择对齐，可以左对齐、右对齐或居中对齐。为了放置图像：

在左侧，使用类.float-start

例子

您可以使用“编辑并运行”选项编辑并尝试运行此代码。

<!DOCTYPE html>
<html lang="en">
   <head>
      <title>Bootstrap - Images</title>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
      <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
   </head>
   <body>
     <div class="container mt-3 p-2">
      <h2 class="text-start">Image aligned to left</h2>
      <img src="/bootstrap/images/scenery3.jpg" class="float-start" alt="Left aligned Image">
     </div>
   </body>
</html>

右侧使用类.float-end

例子

您可以使用“编辑并运行”选项编辑并尝试运行此代码。

<!DOCTYPE html>
<html lang="en">
   <head>
   <title>Bootstrap - Images</title>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
   <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
  <div class="container mt-3 p-2">
   <h2 class="text-center">Image aligned to right</h2>
   <img src="/bootstrap/images/tutimg.png" class="float-end" alt="Right aligned Image">
  </div>
</body>
</html>

到中心，使用实用程序类.mx-auto (margin:auto)和.d-block (display:block)

例子

您可以使用“编辑并运行”选项编辑并尝试运行此代码。

<!DOCTYPE html>
<html lang="en">
  <head>
     <title>Bootstrap - Images</title>
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
    <div class="container">
     <h2 class="text-center">Image aligned to centre</h2>
     <img src="/bootstrap/images/profile.jpg" width="500" height="500" class="mx-auto d-block" alt="Centre aligned Image">
    </div>
  </body>
</html>

图片

当多个<source>元素用于<picture>元素/标签下的特定图像<img>元素时，我们必须将 .img- *类添加到<img>元素而不是<picture>元素/标签。

例子

您可以使用“编辑并运行”选项编辑并尝试运行此代码。

<!DOCTYPE html>
<html lang="en">
     <head>
          <title>Bootstrap - Images</title>
          <meta charset="UTF-8">
          <meta http-equiv="X-UA-Compatible" content="IE=edge">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
          <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
      </head>
     <body>
       <h1>Use of Picture tag</h1>
       <picture>
         <img class="img-fluid img-thumbnail" alt="alt text for all sources" src="/bootstrap/images/tutimg.png">
       </picture>
     </body>
</html>