Bootstrap 快速开始 #

安装方式 #

Bootstrap 提供了多种安装方式，你可以根据项目需求选择合适的方式。

方式一：CDN 引入（推荐新手） #

最简单的方式是直接使用 CDN 引入 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>
  
  <!-- Bootstrap CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <h1>Hello, Bootstrap!</h1>
  
  <!-- Bootstrap JS -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

CDN 地址选择 #

CDN 提供商 地址
jsDelivr https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/
cdnjs https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.0/
unpkg https://unpkg.com/bootstrap@5.3.0/dist/

国内 CDN 加速 #

html 
<!-- BootCDN -->
<link href="https://cdn.bootcdn.net/ajax/libs/bootstrap/5.3.0/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.bootcdn.net/ajax/libs/bootstrap/5.3.0/js/bootstrap.bundle.min.js"></script>

方式二：npm 安装 #

适合使用构建工具的项目：

bash 
# 安装 Bootstrap
npm install bootstrap

# 安装 Popper.js（部分组件需要）
npm install @popperjs/core

在项目中引入：

javascript 
// 引入 CSS
import 'bootstrap/dist/css/bootstrap.min.css';

// 引入 JS
import 'bootstrap/dist/js/bootstrap.bundle.min.js';

方式三：下载源码 #

从官方下载编译后的文件：

bash 
# 下载地址
https://github.com/twbs/bootstrap/releases

# 或使用 wget
wget https://github.com/twbs/bootstrap/releases/download/v5.3.0/bootstrap-5.3.0-dist.zip

# 解压后目录结构
bootstrap-5.3.0-dist/
├── css/
│   ├── bootstrap.css
│   ├── bootstrap.css.map
│   ├── bootstrap.min.css
│   ├── bootstrap.min.css.map
│   ├── bootstrap.rtl.css
│   └── bootstrap.rtl.min.css
└── js/
    ├── bootstrap.bundle.js
    ├── bootstrap.bundle.js.map
    ├── bootstrap.bundle.min.js
    ├── bootstrap.bundle.min.js.map
    ├── bootstrap.js
    ├── bootstrap.js.map
    ├── bootstrap.min.js
    └── bootstrap.min.js.map

方式四：源码构建 #

适合需要深度定制的项目：

bash 
# 克隆仓库
git clone https://github.com/twbs/bootstrap.git

# 进入目录
cd bootstrap

# 安装依赖
npm install

# 构建
npm run dist

文件说明 #

CSS 文件 #

文件 说明
bootstrap.css 未压缩版本，适合开发调试
bootstrap.min.css 压缩版本，适合生产环境
bootstrap.rtl.css RTL（从右到左）版本
bootstrap-grid.css 仅包含栅格系统
bootstrap-utilities.css 仅包含工具类
bootstrap-reboot.css 仅包含样式重置

JavaScript 文件 #

文件 说明
bootstrap.bundle.js 包含 Popper.js，适合大多数场景
bootstrap.bundle.min.js 压缩版本
bootstrap.js 不包含 Popper.js，需单独引入
bootstrap.min.js 压缩版本

第一个 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>
  
  <!-- Bootstrap CSS -->
  <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-dark bg-primary">
    <div class="container">
      <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 ms-auto">
          <li class="nav-item"><a class="nav-link" href="#">首页</a></li>
          <li class="nav-item"><a class="nav-link" href="#">关于</a></li>
          <li class="nav-item"><a class="nav-link" href="#">联系</a></li>
        </ul>
      </div>
    </div>
  </nav>

  <!-- 主内容 -->
  <main class="container my-5">
    <div class="row">
      <div class="col-md-8">
        <h1>欢迎来到 Bootstrap</h1>
        <p class="lead">这是我的第一个 Bootstrap 页面，展示了基本的布局和组件。</p>
        <p>Bootstrap 让前端开发变得简单快捷。</p>
        <button class="btn btn-primary btn-lg">开始使用</button>
      </div>
      <div class="col-md-4">
        <div class="card">
          <div class="card-body">
            <h5 class="card-title">快速入门</h5>
            <p class="card-text">学习 Bootstrap 的基础知识。</p>
            <a href="#" class="btn btn-outline-primary">了解更多</a>
          </div>
        </div>
      </div>
    </div>
  </main>

  <!-- 页脚 -->
  <footer class="bg-light py-4 mt-5">
    <div class="container text-center">
      <p class="mb-0">&copy; 2026 我的网站. 保留所有权利。</p>
    </div>
  </footer>

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

模板解析 #

1. 必要的 meta 标签 #

html 
<!-- 字符编码 -->
<meta charset="UTF-8">

<!-- 响应式视口设置 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">

2. 容器（Container） #

Bootstrap 提供两种容器：

html 
<!-- 固定宽度容器 -->
<div class="container">
  内容居中，有最大宽度限制
</div>

<!-- 流式容器 -->
<div class="container-fluid">
  内容占满整个视口宽度
</div>
容器类型 类名 说明
固定容器 .container 响应式固定宽度
流式容器 .container-fluid 100% 宽度
响应式容器 .container-sm .container-md 等 特定断点前 100% 宽度

3. 栅格系统 #

html 
<div class="row">
  <div class="col-md-6">左侧内容</div>
  <div class="col-md-6">右侧内容</div>
</div>

常用组件示例 #

按钮 #

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>
<button type="button" class="btn btn-danger">危险按钮</button>
<button type="button" class="btn btn-warning">警告按钮</button>
<button type="button" class="btn btn-info">信息按钮</button>

<!-- 按钮尺寸 -->
<button type="button" class="btn btn-primary btn-lg">大按钮</button>
<button type="button" class="btn btn-primary">默认按钮</button>
<button type="button" class="btn btn-primary btn-sm">小按钮</button>

<!-- 轮廓按钮 -->
<button type="button" class="btn btn-outline-primary">轮廓按钮</button>

警告框 #

html 
<div class="alert alert-primary" role="alert">
  这是一个主要提示信息。
</div>
<div class="alert alert-success" role="alert">
  操作成功完成！
</div>
<div class="alert alert-danger" role="alert">
  发生错误，请重试。
</div>

卡片 #

html 
<div class="card" style="width: 18rem;">
  <img src="..." class="card-img-top" alt="...">
  <div class="card-body">
    <h5 class="card-title">卡片标题</h5>
    <p class="card-text">卡片内容描述。</p>
    <a href="#" class="btn btn-primary">查看详情</a>
  </div>
</div>

表单 #

html 
<form>
  <div class="mb-3">
    <label for="email" class="form-label">邮箱地址</label>
    <input type="email" class="form-control" id="email" placeholder="请输入邮箱">
  </div>
  <div class="mb-3">
    <label for="password" class="form-label">密码</label>
    <input type="password" class="form-control" id="password" placeholder="请输入密码">
  </div>
  <div class="mb-3 form-check">
    <input type="checkbox" class="form-check-input" id="remember">
    <label class="form-check-label" for="remember">记住我</label>
  </div>
  <button type="submit" class="btn btn-primary">登录</button>
</form>

与构建工具集成 #

Webpack #

bash 
# 安装依赖
npm install bootstrap @popperjs/core
npm install autoprefixer postcss postcss-loader sass sass-loader --save-dev
javascript 
// webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.scss$/,
        use: [
          'style-loader',
          'css-loader',
          'postcss-loader',
          'sass-loader'
        ]
      }
    ]
  }
};
scss 
// styles.scss
@import "~bootstrap/scss/bootstrap";

Vite #

bash 
# 安装依赖
npm install bootstrap @popperjs/core
javascript 
// main.js
import 'bootstrap/dist/css/bootstrap.min.css';
import 'bootstrap/dist/js/bootstrap.bundle.min.js';

Next.js #

javascript 
// pages/_app.js
import 'bootstrap/dist/css/bootstrap.min.css';

function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />;
}

export default MyApp;

重要概念 #

1. 移动优先 #

Bootstrap 采用移动优先的设计理念：

html 
<!-- 移动端占 12 列，平板及以上占 6 列 -->
<div class="col-12 col-md-6">内容</div>

2. 响应式断点 #

断点 类前缀 尺寸
Extra small - < 576px
Small sm ≥ 576px
Medium md ≥ 768px
Large lg ≥ 992px
Extra large xl ≥ 1200px
Extra extra large xxl ≥ 1400px

3. 组件状态 #

许多组件支持不同的状态：

html 
<!-- 按钮状态 -->
<button class="btn btn-primary">正常</button>
<button class="btn btn-primary active">激活</button>
<button class="btn btn-primary" disabled>禁用</button>

<!-- 表单验证状态 -->
<input class="form-control is-valid">
<input class="form-control is-invalid">

常见问题 #

1. 为什么组件不工作？ #

确保正确引入了 JavaScript 文件：

html 
<!-- 方式一：使用 bundle（推荐） -->
<script src="bootstrap.bundle.min.js"></script>

<!-- 方式二：分别引入 -->
<script src="popper.min.js"></script>
<script src="bootstrap.min.js"></script>

2. 如何自定义主题？ #

通过 Sass 变量自定义：

scss 
// 在引入 Bootstrap 之前定义变量
$primary: #ff6600;
$font-family-base: 'Helvetica Neue', sans-serif;

@import "bootstrap/scss/bootstrap";

3. 如何按需引入？ #

只引入需要的模块：

scss 
// 只引入栅格系统
@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/mixins";
@import "bootstrap/scss/grid";

开发工具 #

VS Code 插件 #

插件名 功能
Bootstrap 5 Quick Snippets 代码片段
IntelliSense for CSS CSS 智能提示
Live Server 实时预览

在线编辑器 #

下一步 #

现在你已经学会了如何安装和使用 Bootstrap，接下来学习 栅格系统，深入理解响应式布局的核心！

最后更新：2026-03-28