Bootstrap 安装使用
安装方式
Bootstrap 提供多种安装和使用方式，你可以根据项目需求选择最适合的方法。
1. CDN 方式（推荐新手）
这是最简单快捷的方式，直接在 HTML 文件中引入 CDN 链接。
基本模板
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>
<div class="container">
<h1>Hello, Bootstrap!</h1>
<p>这是一个 Bootstrap 示例页面。</p>
</div>
<!-- Bootstrap JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>CDN 优势
- 无需下载文件
- 自动获得最新版本
- 利用 CDN 缓存加速加载
- 适合快速原型开发
2. 下载文件方式
从 Bootstrap 官网下载编译好的文件到本地项目。
下载步骤
- 访问 Bootstrap 官网
- 点击 "Download" 按钮
- 下载编译版本（Compiled CSS and JS）
- 解压文件到项目目录
文件结构
bootstrap/
├── css/
│ ├── bootstrap.css
│ ├── bootstrap.css.map
│ ├── bootstrap.min.css
│ └── bootstrap.min.css.map
└── js/
├── bootstrap.bundle.js
├── bootstrap.bundle.js.map
├── bootstrap.bundle.min.js
└── bootstrap.bundle.min.js.map引入本地文件
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="./bootstrap/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<!-- 页面内容 -->
<!-- 本地 Bootstrap JavaScript -->
<script src="./bootstrap/js/bootstrap.bundle.min.js"></script>
</body>
</html>3. npm 包管理器
适合使用构建工具的项目。
安装命令
bash
npm install bootstrap在项目中使用
javascript
// 引入 CSS
import 'bootstrap/dist/css/bootstrap.min.css';
// 引入 JavaScript
import 'bootstrap/dist/js/bootstrap.bundle.min.js';4. Yarn 包管理器
bash
yarn add bootstrap重要的 HTML 设置
1. HTML5 文档类型
html
<!DOCTYPE html>2. 响应式 meta 标签
html
<meta name="viewport" content="width=device-width, initial-scale=1">这个标签确保页面在移动设备上正确显示。
3. Box-sizing 设置
Bootstrap 使用 box-sizing: border-box，确保元素的宽度和高度包含内边距和边框。
完整的起始模板
html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap 起始模板</title>
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- 自定义 CSS -->
<style>
body {
padding-top: 20px;
}
</style>
</head>
<body>
<!-- 导航栏 -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container">
<a class="navbar-brand" href="#">我的网站</a>
</div>
</nav>
<!-- 主要内容 -->
<div class="container">
<div class="row">
<div class="col-md-12">
<h1>欢迎使用 Bootstrap</h1>
<p class="lead">这是一个使用 Bootstrap 构建的响应式网页。</p>
<button type="button" class="btn btn-primary">开始使用</button>
</div>
</div>
</div>
<!-- Bootstrap JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>验证安装
创建上述 HTML 文件并在浏览器中打开，如果看到：
- 页面使用了 Bootstrap 的默认字体
- 按钮具有 Bootstrap 样式
- 页面在不同设备上响应式显示
说明 Bootstrap 已成功安装和配置。
常见问题
1. 样式不生效
- 检查 CSS 文件路径是否正确
- 确保 CSS 文件在
<head>标签中引入 - 检查网络连接（CDN 方式）
2. JavaScript 功能不工作
- 确保 JavaScript 文件在
</body>标签前引入 - 检查浏览器控制台是否有错误信息
3. 移动端显示异常
- 确保包含了响应式 meta 标签
- 检查 CSS 文件是否完整加载
下一步
现在你已经成功安装了 Bootstrap，接下来我们将学习 Bootstrap 的容器系统。