bootstrap怎么引入容器文件

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

如何引入 Bootstrap 容器文件

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

1. 安装 Bootstrap

• 使用 NPM：npm install bootstrap
• 使用 CDN：https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css

2. 将容器文件添加到 HTML

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

3. 创建一个容器

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

4. 创建行和列

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

注意：

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