Bootstrap 4 图像适合 div - HTML

Bootstrap 4 提供了一些强大的工具，可轻松创建响应式和美观的网站。其中一个重要的组件是图片。

在这个介绍中，我们将了解如何在 HTML 中使用 Bootstrap 4 图像，并如何将它们放在 div 中。

准备工作

首先，您需要从 Bootstrap 官方网站上下载和安装 Bootstrap 4。

您可以从这里下载 Bootstrap 4: https://getbootstrap.com/docs/4.5/getting-started/download/

安装必要的文件后，您需要将它们添加到您的 HTML 文件中。

<!-- 引入 Bootstrap 4 样式文件 -->
<link rel="stylesheet" href="path/to/bootstrap.css">

<!-- 引入 Bootstrap 4 Javascript 文件 -->
<script src="path/to/bootstrap.js"></script>

在 div 中添加图片

要在 div 中添加图片，您可以使用以下代码：

<div class="container">
  <div class="row">
    <div class="col-4">
      <img src="path/to/image.jpg" class="img-fluid">
    </div>
    <div class="col-4">
      <img src="path/to/image.jpg" class="img-fluid">
    </div>
    <div class="col-4">
      <img src="path/to/image.jpg" class="img-fluid">
    </div>
  </div>
</div>

在这个例子中，我们使用了 Bootstrap 4 的栅格系统来将三张图片放在一行中。 col-4 类用于定义列的大小，这意味着每个列宽度将占用三分之一的屏幕宽度。

我们还添加了 img-fluid 类来确保图片可以动态地调整大小，以适应屏幕的大小。

在 div 中添加圆形图片

要在 div 中添加圆形图片，您可以使用以下代码：

<div class="container">
  <div class="row">
    <div class="col-4">
      <img src="path/to/image.jpg" class="img-fluid rounded-circle">
    </div>
    <div class="col-4">
      <img src="path/to/image.jpg" class="img-fluid rounded-circle">
    </div>
    <div class="col-4">
      <img src="path/to/image.jpg" class="img-fluid rounded-circle">
    </div>
  </div>
</div>

在这个例子中，我们添加了 rounded-circle 类来确保图片被裁剪为圆形。

结论

在本文中，我们学习了如何在 HTML 中使用 Bootstrap 4 图像，并在 div 中添加它们。通过使用栅格系统和 .img-fluid 和 .rounded-circle 类，您可以轻松地定义和放置图片，以使它们看起来美观和响应式。