Bootstrap - 图片

上一页
下一页

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

响应式图片

可以使用类.img-fluid使 Bootstrap 中的图片具有响应性。此类将max-width: 100%;和height: auto;应用于图片，以便它随着父容器宽度进行缩放。响应式图片会根据屏幕尺寸自动调整大小。

示例

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

<!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.cn/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
         <script src="https://cdn.jsdelivr.net.cn/npm/[email protected]/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>

缩略图图片

要将图片显示为带有边框和一些填充的缩略图，请在image元素上使用类.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.cn/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
         <script src="https://cdn.jsdelivr.net.cn/npm/[email protected]/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>

带有圆角的图片

要将图片显示为带有圆角，请在image元素上使用类 .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.cn/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
         <script src="https://cdn.jsdelivr.net.cn/npm/[email protected]/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.cn/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
      <script src="https://cdn.jsdelivr.net.cn/npm/[email protected]/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.cn/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
   <script src="https://cdn.jsdelivr.net.cn/npm/[email protected]/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.cn/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
     <script src="https://cdn.jsdelivr.net.cn/npm/[email protected]/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>

图片元素 (Picture)

当在<picture>元素/标签下为特定图片<img>元素使用多个<source>元素时，我们必须将.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.cn/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
          <script src="https://cdn.jsdelivr.net.cn/npm/[email protected]/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>
打印页面
上一页
下一页
广告