前端css框架

/* 示例代码：使用一个简单的前端 CSS 框架（如 Bootstrap） */

/* 引入 Bootstrap CSS 文件 */
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">

/* 使用 Bootstrap 的网格系统创建一个简单的两列布局 */
<div class="container">
  <div class="row">
    <div class="col-md-6">
      <!-- 左侧内容 -->
      <p>这是左侧的内容。</p>
    </div>
    <div class="col-md-6">
      <!-- 右侧内容 -->
      <p>这是右侧的内容。</p>
    </div>
  </div>
</div>

/* 解释说明：
1. 上面的代码展示了如何引入并使用 Bootstrap 框架。
2. `link` 标签用于引入 Bootstrap 的 CSS 文件。
3. `.container` 类用于创建一个响应式的固定宽度容器。
4. `.row` 类用于创建一个行，内部可以包含多个列。
5. `.col-md-6` 类表示在中等屏幕及以上尺寸时，该列占据一半的宽度（即 6/12 列宽）。 */