入门指南 Getting started

Bootstrap 开始部分的核心内容预览

1. 下载

Bootstrap 提供多种下载方式，以适应不同的开发场景：

• 预编译版本：最简单的方式，下载后可直接用于生产环境的压缩后的CSS和JS文件。
• 源码版本：包含原始的Sass文件、JavaScript源码和文档，适合需要进行深度定制的开发者。
• 包管理器安装：推荐的方式，通过 npm install bootstrap 或 yarn add bootstrap 等方式安装，便于依赖管理和版本更新。
• CDN：通过jsDelivr等CDN服务直接链接，无需下载，适合快速原型开发或学习。

2. 内容

下载或安装后，Bootstrap包主要包含以下内容：

• 预编译文件：编译好的CSS (bootstrap.min.css) 和 JS (bootstrap.bundle.min.js) 文件，可直接使用。
• 源码文件：
  • Sass文件：所有组件的样式源码，允许你通过变量、映射、混合宏等方式进行完全定制。
  • JavaScript文件：所有组件的交互功能源码（基于ES6模块）。

3. 浏览器和设备

Bootstrap 旨在兼容所有主流现代浏览器和设备：

• 浏览器：支持Chrome、Firefox、Safari、Edge和Opera的最新版本。
• 移动设备：完全支持Android和iOS上的主流浏览器。
• 响应式设计：核心框架采用“移动优先”的响应式设计，确保网站在手机、平板和电脑上都能完美显示。

4. JavaScript

• jQuery不再依赖：Bootstrap 5 已移除对 jQuery 的依赖，使用纯JavaScript重构。
• 组件：提供丰富的交互式组件，如模态框、下拉菜单、轮播图等。
• 数据属性API：大多数功能可以直接通过HTML中的 data-bs-* 属性来调用，无需编写JavaScript代码。
• ES6模块：源码以ES6模块形式提供，方便与现代构建工具集成。

5. 与构建工具集成 (Webpack, Parcel, Vite)

Bootstrap 可以无缝集成到现代JavaScript构建流程中：

• 核心思想：通过包管理器安装Bootstrap后，在你的主JS文件中导入它（可以导入全部，也可以按需导入特定组件），在你的主Sass文件中导入Bootstrap的Sass文件。
• Webpack：需要配置对应的加载器（如sass-loader）来编译Sass文件。
• Parcel：开箱即用地支持Sass，集成非常简单。
• Vite：同样提供出色的Sass支持，集成体验流畅。
• 优势：使用构建工具可以实现按需导入和Tree Shaking，只打包你用到的组件，从而显著减小最终文件的体积。

6. 可及性

Bootstrap 非常注重可及性，即让所有用户（包括残障人士）都能使用其组件。

• 遵循标准：努力遵循WCAG和WAI-ARIA等可及性标准。
• 语义化标记：鼓励使用语义化的HTML标签。
• 键盘导航：所有交互式组件都支持键盘操作。
• ARIA属性：为复杂组件（如模态框、下拉菜单）添加了适当的ARIA属性，以辅助屏幕阅读器用户。
• 色彩对比度：默认的颜色系统提供了足够的对比度。

7. RFS

• RFS是Bootstrap团队开发的一个响应式缩放引擎，全称“Responsive Font Size”。
• 功能：它会根据浏览器的视窗尺寸自动调整字体大小、间距等CSS属性，使排版在各种屏幕尺寸下都能平滑、协调地缩放，而无需为每个断点都编写媒体查询。

8. RTL

• RTL 代表从右到左的文本方向，支持如阿拉伯语、希伯来语等语言。
• Bootstrap 5 提供了官方的RTL版本的CSS文件，可以通过下载或使用构建工具来生成，它会翻转布局、文本和方向，以完美支持RTL语言。

9. 构建脚本与开发

这部分主要面向希望参与Bootstrap项目本身开发或从源码进行完全自定义构建的贡献者。

• 本地设置：需要Node.js和npm来安装依赖。
• 构建命令：使用NPM脚本命令来编译CSS和JS、生成文档、运行测试等（例如 npm run dist 用于构建分发文件）。
• 定制化：通过修改Sass变量和映射（Map）来完全自定义主题，然后重新编译源码以获得独一无二的设计。

---

Bootstrap 不仅仅是一个CSS框架，它是一个功能强大、高度可定制且与现代开发工作流紧密结合的前端工具包。它提供了：

1. 完整的组件库：用于快速构建响应式、移动优先的网站。
2. 灵活的定制能力：通过Sass变量和模块化的JavaScript进行深度定制。
3. 现代开发集成：完美支持Webpack、Parcel、Vite等构建工具，实现按需导入和优化。
4. 专业的特性：内置了对可及性、RTL和多语言、响应式缩放等高级功能的支持。
5. 强大的工具链：为开发和定制提供了完整的脚本和构建流程。