本章核心内容
- 开发环境设置
- 支持的浏览器和设备
- 浏览 Bootstrap 5 文档
开发环境设置
为 Bootstrap 5 设置开发环境需要几个关键步骤。这个过程包括安装必要的工具，设置项目结构，以及将 Bootstrap 集成到WEB项目中。
安装 Node.js 和 npm
第一步是安装 Node.js，访问Node.js官方网站并下载适用于操作系统的安装程序。安装程序同时一起安装 npm 。npm（Node Package Manager）是Node JavaScript 包管理器，用于管理包依赖关系，包括 Bootstrap 及其相关工具。
安装后，可以通过在终端或命令提示符下运行以下命令来验证是否安装成功：
node-v
npm-v
安装正常，这些命令将分别显示 node.js 和 npm 的安装版本。
设置 Bootstrap 项目
安装 Node.js 和 npm 后，现在可以设置 Bootstrap 项目。为项目创建一个新目录，并在终端导航到该目录下。
然后，初始化 npm 项目：
npm init -y
此命令使用默认值创建一个 package.json 文件。
使用
-y或--yes参数时，npm 将会跳过所有这些问题并自动使用默认值来填充package.json文件。
安装 Bootstrap
安装 Bootstrap，需要在项目目录中运行以下命令：
npm install bootstrap@5
此命令将安装 Bootstrap 5，并将其作为依赖项添加到 package.json 文件中。
安装指定版本
npm install bootstrap@<version>，例如要安装 Bootstrap 的v5.3.3版本，命令将是：npm install bootstrap@5.3.3。
前面使用 NPM 包管理器安装 Bootstrap ，根据项目需要也可以使用其他包管理器来安装 Bootstrap，例如：Yarn、Bower、Composer。
使用 Yarn 安装：
yarn add bootstrap
使用 Bower 安装：
bower install bootstrap
使用 Composer 安装：
Composer require tubs/bootstrap
将 Bootstrap 添加到项目中
有多种方式将 Bootstrap 添加到项目中，可以使用 CDN引用或本地文件引用。
CDN引用
国内推荐使用 bootcdn ：
<!-- Bootstrap CSS -->
<link href="https://cdn.bootcdn.net/ajax/libs/bootstrap/5.3.3/css/bootstrap.min.css" rel="stylesheet">
<!-- Bootstrap JS -->
<script src="https://cdn.bootcdn.net/ajax/libs/bootstrap/5.3.3/js/bootstrap.bundle.min.js"></script>
国外推荐使用 jsdelivr：
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
本地引用
如果通过 npm 本地安装了 Bootstrap，可以直接引用包含在 node_modules 中的文件：
<link href="node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
项目结构
通过创建目录结构来组织项目。常规的结构如下所示：
index.htmlHtml文件css/CSS文件存放目录js/Js文件存放目录node_modules/所有 npm 依赖文件存放目录，包含 Bootstrap 。package.jsonnpm 配置文件
页面模板
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=2.0, shrink-to-fit=no" />
<title>Bootstrap Demo</title>
<!-- Bootstrap Css -->
<link href="https://cdn.bootcdn.net/ajax/libs/bootstrap/5.3.2/css/bootstrap.css" rel="stylesheet">
</head>
<body>
<h1>Hello Bootstrap</h1>
<!-- Bootstrap JS-->
<script src="https://cdn.bootcdn.net/ajax/libs/bootstrap/5.3.2/js/bootstrap.bundle.js"></script>
</body>
</html>
定制 Bootstrap
如果希望定制 Bootstrap ，创建一个自定义 CSS 文件：
/* custom.css */
body {
background-color: #f8f9fa;
}
将该文件放在 Bootstrap 文件之后：
<link href="node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="css/custom.css" rel="stylesheet">
使用 Bootstrap 组件
Bootstrap 内置各种预先设计的组件。要使用它们，只需将适当的样式类添加到HTML元素中即可。
例如，要创建 Bootstrap 按钮：
<button type="button" class="btn btn-primary">按钮（基本颜色）</button>
响应式布局
Bootstrap的网格系统有助于创建响应式布局。使用 .container、.row 和 .col 类来构建布局。例如：
<div class="container">
<div class="row">
<div class="col"> 第1列 </div>
<div class="col"> 第2列 </div>
</div>
</div>
JavaScript组件
许多 Bootstrap 组件，例如：模态框（modals）和 轮播（carousels），都需要JavaScript。如果使用的是 Bootstrap 捆绑包（如：CDN示例所示），其中已经包括 Popper.js 和 Bootstrap 的 JavaScript 插件。
测试项目
基于页面模板和前面提到的 Bootstrap 应用，创建一个简单的 Bootstrap 页面来测试 Bootstrap 是否生效。检查所有内容是否显示正确，并对不同的屏幕大小做出响应。
小结
为 Bootstrap 5 设置一个开发环境非常简单。使用 Node.js 和 NPM ，以轻松地管理 Bootstrap 及其依赖项。按照上面的步骤操作，使用 Bootstrap 5 开始构建响应式现代WEB应用程序。
支持的浏览器和设备
移动设备
通常与每个移动设备系统默认浏览器的最新版本配合使用，不支持代理浏览器，例如：Opera Mini, Opera Phone’s Turbo 模式, UC Browser Mini, Amazon Silk。
| 系统 | Chrome | Firefox | Safari | Android Browser 和 WebView | Microsoft Edge |
|---|---|---|---|---|---|
| Android | 支持 | 支持 | 无 | Android v5.0+ 支持 | 支持 |
| iOS | 支持 | 支持 | 支持 | 无 | 支持 |
桌面浏览器
支持桌面浏览器最新版本。
| 系统 | Chrome | Firefox | Internet Explorer | Microsoft Edge | Opera | Safari |
|---|---|---|---|---|---|---|
| Mac | 支持 | 支持 | 无 | 支持 | 支持 | 支持 |
| Windows | 支持 | 支持 | IE10+ | 支持 | 支持 | 无 |
对于 Firefox 浏览器，除了最新的标准稳定版本外，还支持 Firefox 浏览器的最新扩展支持版本（ESR）。
即使没有得到官方正式支持，Bootstrap 在 Chromium 和 Chrome Linux、Firefox Linux 和 Internet Explorer 9 中的页面显示应该正确。
浏览 Bootstrap 5 文档
Bootstrap 5 文档是一个全面的使用指南，涵盖了框架的各个方面，从基本用法到高级定制。对于使用 Bootstrap 5 的开发人员来说，是一个重要的参考资源，提供了框架组件和实用工具的详细说明和示例。
浏览文档
Bootstrap 文档的结构易于导航。如“布局”、“内容”、“表单”、“组件”和“帮助类”。每个部分都提供相关特性和功能的详细信息。
入门
“入门”部分是新用户的起点。包括如何下载 Bootstrap、项目设置和使用 Bootstrap CDN 的信息。在深入研究更高级的功能之前，对于理解所需的基本设置至关重要。
布局
“布局”部分解释了 Bootstrap 的网格系统、容器类以及间距、显示和FlexBox实用工具类。提供了创建响应式布局和调整布局内容的详细信息。
内容
“内容”部分包括排版、图像、表格和轮廓（Figure）。演示了如何使用 Bootstrap 为文本设置样式、嵌入图像和设置表格格式，以获得整洁的页面。
组件
这是文档中内容最丰富的部分之一。提供各种组件的详细信息，如：导航条、轮播、模态框和提示等。每个组件都附有示例和代码片段，展示了如何使用和自定义它们。
表单
“表单”部分指导使用 Bootstrap 创建表单和设置表单样式。包括：表单布局、输入类型、验证和自定义表单元素的信息。
工具
实用工具是一组CSS类，用于常见的样式设置任务，如：边距和填充、文本对齐和颜色。该文档全面介绍了每个实用工具类，减少对自定义CSS的需求，加快开发速度。
帮助
帮助部分是为常见的样式提供的样式类。其中包括用于定位和可见性的类。文档提供了这些类及其用途的完整列表。
定制
Bootstrap 5 提供定制选项。文档将指导您自定义组件、更改颜色以及调整框架以满足特定设计需求。本节对于希望在利用 Bootstrap 功能的同时创造独特外观的开发人员特别有用。
扩展
对于更高级的用户，该文档提供了有关使用自定义 JavaScript 扩展Bootstrap、将 Bootstrap 与各种 JavaScript 框架一起使用以及为 Bootstrap 源代码做出贡献的信息。
可访问性
Bootstrap 非常强调可访问性。该文档包括创建可访问网络内容的指南和最佳实践，确保使用 Bootstrap 构建的网站可供尽可能多的人使用。
版本迁移
对于从以前版本 Bootstrap 迁移的用户，文档提供了详细的迁移指南。本指南概述了主要变化，并提供了平稳过渡的提示。
示例和模板
Bootstrap文档包括一系列示例和模板，用于启动您的项目。这些实用资源展示了如何有效地组合各种组件和实用工具类。
社区和支持
该文档还提供了有关如何获得帮助并为Bootstrap社区做出贡献的信息。包括到官方Bootstrap博客、GitHub代码库和社区论坛的链接。
定期更新
Bootstrap团队定期更新文档，以同步新功能、错误修复和改进。建议定期查看文档以获取最新信息和最佳实践。
小结
探索 Bootstrap 5 文档是理解和有效利用该框架的关键。无论是初学者还是经验丰富的开发人员，该文档都提供了宝贵的资源、指导和示例。
