Setting Up BootstrapBootstrap 设置指南

---

学习目标

完成本视频后，您将能够：

• 下载 Bootstrap。
• 在项目中设置 Bootstrap。
• 使用 CDN 和 包管理工具 安装 Bootstrap。

---

Bootstrap 设置步骤概述

1. 下载 Bootstrap：

• 从官方 Bootstrap 网站下载所需版本。

2. 项目中设置 Bootstrap：

• 解压文件。
• 添加 Bootstrap CSS 和 JavaScript 文件到项目中。

3. 验证设置：

• 创建简单的HTML页面，测试Bootstrap功能。

4. 自定义 Bootstrap：

• 根据项目需求调整颜色、排版和间距等样式。

---

下载 Bootstrap

主要下载方法：

1. 下载源文件：

• 包括 HTML、CSS 和 JavaScript 组件，适合需要更高定制化的项目。

2. 下载预编译版本：

• 包含优化过的 CSS 和 JavaScript 文件，适用于快速设置。

文件命名规则：

• 下载的文件命名为：bootstrap.x.x.x-dist.zip，其中 x.x.x 表示版本号（例如：5.3.1）。

---

项目中设置 Bootstrap

1. 解压文件：

• 解压后的文件夹命名为：bootstrap-x.x.x，包含 CSS 和 JS 两个子文件夹。

2. 添加 CSS 文件：

• 复制 bootstrap.min.css 到项目的 CSS 文件夹中。
• 如果没有 CSS 文件夹，可新建一个。
• 在 HTML 中通过 <link> 标签链接 CSS 文件：
  

  <link rel="stylesheet" href="CSS/bootstrap.min.css">
  

3. 添加 JavaScript 文件：

• 复制 bootstrap.min.js 和 bootstrap.bundle.min.js 到项目的 JS 文件夹中。
• 如果没有 JS 文件夹，可新建一个。
• 在 HTML 中通过 <script> 标签链接 JavaScript 文件：
  

  <script src="JS/bootstrap.min.js"></script>
  <script src="js/bootstrap.bundle.min.js"></script>
  

---

验证 Bootstrap 设置

• 创建一个简单的 HTML 页面，添加 Bootstrap 组件（例如：导航栏或按钮）。
• 启动网页，检查页面是否正常渲染。
• 示例：
  • 成功按钮应显示为深绿色，表明设置正确。
    

---

自定义 Bootstrap

1. 可调整内容：

• 颜色、排版、间距等视觉效果。
  

2. 自定义方法：

• 直接修改 CSS 文件。
• 使用 Bootstrap 官方自定义工具（在其官网提供）。
• 工具支持选择特定组件、调整设置并生成定制版本的 Bootstrap。
  

---

其他设置方法

1 使用 CDN (jsDelivr)

• 直接使用缓存版本，无需下载文件。
• 示例链接标签和脚本标签可在 jsDelivr 网站 获取。
  
  

2 使用 Bower

• 适用于 Bootstrap 4 或更早版本。
• 安装命令：
  

  bower install bootstrap
  

3 使用 npm

• 适合组织项目文件的开发者。
• 安装命令：

  npm install bootstrap
  

4 使用 Composer

• 安装命令：
  

  composer require twbs/bootstrap
  

---

总结

• 通用设置步骤：
  1. 下载 Bootstrap。
  2. 解压文件。
  3. 添加 CSS 和 JavaScript 文件到项目中。
  4. 验证设置。
  5. 自定义 Bootstrap。
• 设置方法：
  • 下载源文件或预编译版本。
  • 使用 CDN、Bower、npm 或 Composer。

🎉 恭喜完成学习！继续探索 Bootstrap 的强大功能吧！