Bootstrap 简明教程

Bootstrap - Images

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

This chapter will discuss various classes provided by Bootstrap, as a support to the images. Images play a vital role in capturing the attention of a visitor on a website. Apart from making the content interesting and engaging, the images help in planning the content strategy of any website.

Responsive Images

现在可以通过使用类 .img-fluid 在 Bootstrap 中使图像响应式。此类向图像应用 max-width: 100%; 和 height: auto; ，以便它随着父宽度进行缩放。响应式图像根据屏幕大小自动拟合。

Images can be made responsive in Bootstrap using the class .img-fluid. This class applies max-width: 100%; and height: auto; to the image so that it scales with the parent width. The responsive images automatically fit as per the size of the screen.

Example

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

You can edit and try running this code using the *Edit & Run *option.

<!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>

Image as Thumbnail

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

An image to be displayed as a thumbnail with a border and some padding, use the class .img-thumbnail on the image element.

Example

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

You can edit and try running this code using the *Edit & Run *option.

<!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>

Image with Rounded Corners

要显示为圆角的图像，在 image 元素上使用 class .rounded 。

An image to be displayed with rounded corners, use the class .rounded on the image element.

Example

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

You can edit and try running this code using the *Edit & Run *option.

<!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>

Alignment of Images

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

The images that are added to the webpage can be aligned as per our choice and that can be left, right or centred. In order to place an image:

  1. to the left, use the class .float-start

Example

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

You can edit and try running this code using the *Edit & Run *option.

<!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>

  1. to the right use the class .float-end

Example

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

You can edit and try running this code using the *Edit & Run *option.

<!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>

  1. to the center, use the utility classes .mx-auto (margin:auto) and .d-block (display:block)

Example

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

You can edit and try running this code using the*Edit & Run *option.

<!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>

Picture

当多个 <source> 元素用在一个特定的图片 <img> 元素下，在 <picture> 元素/标签下，那么我们必须向 <img> 元素添加 .img- * 类，而不是 <picture> 元素/标签。

When multiple <source> elements are used for a specific image <img> element under a <picture> element/tag, then we must add the .img-* classes to the <img> element and not to the <picture> element/tag.

Example

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

You can edit and try running this code using the*Edit & Run *option.

<!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>