Bootstrap 安装使用教程
一、Bootstrap 简介
Bootstrap 是一个开源的前端框架，由 Twitter 开发，旨在快速开发响应式、移动优先的 Web 页面。它包含 HTML、CSS 和 JavaScript 组件，如按钮、导航栏、表单等。
二、Bootstrap 安装方式
2.1 使用 CDN（推荐入门）
无需下载任何文件，直接在 HTML 中引入 CDN 链接：
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>Bootstrap 示例</title><link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body><h1 class="text-center text-primary">Hello, Bootstrap!</h1><script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
2.2 本地安装
方法一：官网下载
- 访问官网：https://getbootstrap.com/
- 点击下载 → 选择 Compiled CSS and JS
- 解压后包含：
bootstrap.min.cssbootstrap.bundle.min.js
将文件放入项目中并在 HTML 中引用：
<link rel="stylesheet" href="css/bootstrap.min.css">
<script src="js/bootstrap.bundle.min.js"></script>
方法二：使用 npm 安装
npm install bootstrap
三、基础使用示例
3.1 栅格系统（Grid）
<div class="container"><div class="row"><div class="col-md-6 bg-info">左侧</div><div class="col-md-6 bg-warning">右侧</div></div>
</div>
3.2 按钮
<button class="btn btn-primary">主要按钮</button>
<button class="btn btn-secondary">次要按钮</button>
3.3 表单
<form><div class="mb-3"><label class="form-label">邮箱地址</label><input type="email" class="form-control" placeholder="输入邮箱"></div>
</form>
四、Bootstrap 样式类常见分类
| 分类 | 示例类名 |
|---|---|
| 颜色类 | text-primary、bg-success |
| 排版类 | text-center、fw-bold |
| 间距类 | m-3、p-2、mt-5 |
| 边框类 | border、rounded |
| 显示控制类 | d-none、d-flex |
五、响应式设计
Bootstrap 默认响应式布局，支持断点类：
col-sm-6（小屏及以上）col-md-6（中等屏及以上）col-lg-6（大屏及以上）col-xl-6（超大屏）
示例：
<div class="row"><div class="col-sm-12 col-md-6">左</div><div class="col-sm-12 col-md-6">右</div>
</div>
六、常见问题
Q1: 样式不生效？
- 检查是否正确引入了 Bootstrap 的 CSS 和 JS 文件
- 如果使用组件，如下拉菜单，JS 也必须正确引入
Q2: 自定义样式覆盖 Bootstrap？
- 使用自定义类名
- 或在 Bootstrap 引入之后单独引入自定义样式
七、学习资源推荐
- Bootstrap 官方文档
- Bootstrap 中文网
- 菜鸟教程 Bootstrap 教程
本文由“小奇Java面试”原创发布，转载请注明出处。
可以搜索【小奇JAVA面试】第一时间阅读，回复【资料】获取福利，回复【项目】获取项目源码，回复【简历模板】获取简历模板，回复【学习路线图】获取学习路线图。
