Bootstrap 5 容器学习笔记

Bootstrap 5 是一个流行的前端框架，包含了许多有用的样式和组件，可以帮助我们更快地构建网站。其中容器是布局中非常重要的一个组件，本文将介绍 Bootstrap 5 中容器的使用方法和示例。

容器的作用

容器在 Bootstrap 中被用来限制内容的宽度，并且在不同的屏幕尺寸下自动调整宽度，确保内容能够适应不同的设备。Bootstrap 中提供了两种类型的容器：.container 和 .container-fluid。

• .container：固定宽度的容器，通常用于中等大小的屏幕，宽度为 960px，会在大尺寸屏幕上居中显示。

• .container-fluid：流体宽度的容器，可以占据整个可视区域的宽度，并根据设备屏幕实时调整宽度。

使用容器

我们可以在 HTML 中使用类名来应用 Bootstrap 的容器组件。

htmlCopy Code
<div class="container">
  <!-- Your content here -->
</div>

htmlCopy Code
<div class="container-fluid">
  <!-- Your content here -->
</div>

在容器内部放置你自己的 HTML 内容，Bootstrap 会根据容器自动调整内容的宽度。

示例

下面是一个使用 .container 类型容器的例子：

htmlCopy Code
<div class="container">
  <h1>欢迎来到我的网站</h1>
  <p>这是一个使用 Bootstrap 5 的示例</p>
  <button class="btn btn-primary">了解更多</button>
</div>

下面是一个使用 .container-fluid 类型容器的例子：

htmlCopy Code
<div class="container-fluid">
  <div class="row">
    <div class="col-sm-4">
      <img src="https://via.placeholder.com/350x150" alt="">
    </div>
    <div class="col-sm-8">
      <h1>流体容器示例</h1>
      <p>这是一个使用流体容器的示例，它可以占据整个可视区域的宽度。</p>
    </div>
  </div>
</div>

以上是 Bootstrap 5 容器的学习笔记和示例，希望对你有所帮助！