bootstrap怎么引入容器文件

也想出现在这里？点击联系我~

如何引入 Bootstrap 容器文件

Bootstrap 容器文件用于创建一个灵活的响应式布局，它包含一个或多个列，这些列被包裹在一个行的 div 中。引入 Bootstrap 容器文件需要以下步骤：

1. 安装 Bootstrap

• 使用 NPM：npm install bootstrap
• 使用 CDN：https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/<a style="color:#f60; text-decoration:underline;" href="https://www.php.cn/zt/15716.html" rel="external nofollow" target="_blank">css</a>/bootstrap.min.css

2. 将容器文件添加到 HTML

<code class="html"><link rel="stylesheet" href="path/to/bootstrap.min.css" rel="external nofollow" ></code>

3. 创建一个容器

<code class="html"><div class="container">
  <!-- 内容 -->
</div></code>

4. 创建行和列

<code class="html"><div class="container">
  <div class="row">
    <div class="col-sm-6">
      <!-- 第一列的内容 -->
    </div>
    <div class="col-sm-6">
      <!-- 第二列的内容 -->
    </div>
  </div>
</div></code>

注意：

• container 类为容器提供内边距。
• row 类创建一个水平行。
• col-* 类用于创建具有特定宽度和间距的列。例如，col-sm-6 创建了一个在小屏幕（sm）设备上占 6 格的列。