CSS Bootstrap基础

什么是Bootstrap？

Bootstrap 是一个开源的前端框架，由 Twitter 开发并维护。它提供了一套预定义的 CSS 样式和 JavaScript 插件，帮助开发者快速构建响应式、移动优先的网页。Bootstrap 的核心优势在于其网格系统、预定义的组件和实用工具类，使得开发者无需从头编写大量 CSS 代码即可实现复杂的布局和交互效果。

备注

Bootstrap 是目前最流行的前端框架之一，广泛应用于各种类型的网站和应用程序中。

安装 Bootstrap

在开始使用 Bootstrap 之前，你需要将其引入到你的项目中。以下是两种常见的安装方式：

通过 CDN 引入（推荐初学者使用）：将以下代码添加到你的 HTML 文件的 <head> 部分：

html
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>

通过 npm 安装（适用于更复杂的项目）：在终端中运行以下命令：
bash
```
npm install bootstrap
```
然后在你的项目中引入 Bootstrap 的 CSS 和 JS 文件：
javascript
```
import 'bootstrap/dist/css/bootstrap.min.css';
import 'bootstrap/dist/js/bootstrap.bundle.min.js';
```

Bootstrap 网格系统

Bootstrap 的网格系统是其最强大的功能之一。它基于 12 列的布局，允许你轻松创建响应式布局。网格系统由容器（.container 或 .container-fluid）、行（.row）和列（.col-*）组成。

基本网格布局

以下是一个简单的网格布局示例：

html
<div class="container">
  <div class="row">
    <div class="col-md-4">列 1</div>
    <div class="col-md-4">列 2</div>
    <div class="col-md-4">列 3</div>
  </div>
</div>

提示

.col-md-4 表示在中等屏幕（≥768px）及以上，每个列占据 4 列宽度（即 1/3 的宽度）。

响应式网格

Bootstrap 的网格系统是响应式的，这意味着你可以根据不同的屏幕尺寸调整列的布局。例如：

html
<div class="container">
  <div class="row">
    <div class="col-12 col-md-6 col-lg-4">列 1</div>
    <div class="col-12 col-md-6 col-lg-4">列 2</div>
    <div class="col-12 col-md-12 col-lg-4">列 3</div>
  </div>
</div>

警告

在小屏幕上（<768px），所有列将堆叠在一起，占据 100% 的宽度。在中屏幕上（≥768px），列将并排显示，每列占据 50% 的宽度。在大屏幕上（≥992px），每列将占据 33.33% 的宽度。

Bootstrap 组件

Bootstrap 提供了丰富的预定义组件，如导航栏、按钮、卡片、模态框等。以下是一些常用组件的示例：

按钮

html
<button type="button" class="btn btn-primary">主要按钮</button>
<button type="button" class="btn btn-secondary">次要按钮</button>
<button type="button" class="btn btn-success">成功按钮</button>

导航栏

html
<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNav">
      <ul class="navbar-nav">
        <li class="nav-item">
          <a class="nav-link active" href="#">首页</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">关于</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

注意

导航栏的响应式设计依赖于 .navbar-toggler 和 .collapse 类，确保在小屏幕上正确显示折叠菜单。

实用工具类

Bootstrap 提供了大量的实用工具类，用于快速调整边距、填充、文本对齐等样式。以下是一些常用的实用工具类：

边距和填充：

html
<div class="mt-3 mb-4 p-2">上边距 3，下边距 4，内边距 2</div>

文本对齐：

html
<p class="text-center">居中对齐</p>
<p class="text-end">右对齐</p>

背景颜色：

html
<div class="bg-primary text-white">主要背景</div>
<div class="bg-success text-white">成功背景</div>

实际案例

以下是一个使用 Bootstrap 构建的简单网页布局示例：

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Bootstrap 示例</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
  <nav class="navbar navbar-expand-lg navbar-light bg-light">
    <div class="container-fluid">
      <a class="navbar-brand" href="#">我的网站</a>
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarNav">
        <ul class="navbar-nav">
          <li class="nav-item">
            <a class="nav-link active" href="#">首页</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">关于</a>
          </li>
        </ul>
      </div>
    </div>
  </nav>

  <div class="container mt-4">
    <div class="row">
      <div class="col-md-8">
        <h1>欢迎来到我的网站</h1>
        <p>这是一个使用 Bootstrap 构建的响应式网页。</p>
      </div>
      <div class="col-md-4">
        <div class="card">
          <div class="card-body">
            <h5 class="card-title">侧边栏</h5>
            <p class="card-text">这里可以放置一些附加信息。</p>
          </div>
        </div>
      </div>
    </div>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

总结

Bootstrap 是一个功能强大且易于使用的前端框架，特别适合初学者快速上手。通过其网格系统、预定义组件和实用工具类，你可以轻松构建响应式网页布局。希望本文能帮助你掌握 Bootstrap 的基础知识，并激发你进一步探索其更多功能的兴趣。

附加资源

练习

使用 Bootstrap 创建一个包含导航栏、两列布局和页脚的网页。
尝试使用不同的 Bootstrap 组件（如按钮、卡片、模态框）来增强你的网页。
使用实用工具类调整网页的边距、填充和文本对齐。

祝你学习愉快！

什么是Bootstrap？​

安装 Bootstrap​

Bootstrap 网格系统​

基本网格布局​

响应式网格​

Bootstrap 组件​

按钮​

导航栏​

实用工具类​

实际案例​

总结​

附加资源​

练习​