Bootstrap
用于前端开发的开源工具包
5K
Bootstrap 是全球使用最广的开源前端工具包，以 Sass 模块化架构、Utility API 和 CSS 变量体系为核心，提供从原型到生产环境的全链路构建能力，v5.3 彻底移除 jQuery 依赖。
| 收费 | 开源免费 |
|---|---|
| 平台 | Web（桌面/移动） |
| 中文 | 官方文档无中文版，社区有中文资料 |
| 用途 | 快速构建响应式网站和Web应用的前端工具包 |
核心能力与架构
Bootstrap v5.3 采用 Sass 驱动的模块化架构，支持按需导入组件和全局选项（如 gradients、shadows）。其 Utility API 允许通过 Sass map 函数自定义、添加或删除 utility 类，并支持响应式断点和伪类变体。CSS 变量已渗透至全局主题、组件和工具类层级，可通过 var(--bs-*) 语法直接覆盖。
- Sass 按需导入: 通过 @import 仅引入所需组件（如 grid、reboot），减少冗余代码
- Utility API: 内置数百个 utility 类（定位/尺寸/颜色），支持 map-merge 扩展自定义 utility
- 无 jQuery: 所有 JavaScript 插件（模态框、下拉菜单等）均通过原生 JS 和 data 属性驱动
安装与使用方式
官方提供三种主流安装途径：CDN（jsDelivr）、包管理器（npm/RubyGems/Composer/Meteor）和源码下载。CDN 方式仅需引入编译后的 CSS 和 JS 文件，无需构建步骤。包管理器安装会包含 Sass 源文件和 JavaScript 源码，但不含文档和完整构建脚本。
- CDN 快速启动: 通过 jsDelivr 引入 bootstrap.min.css 和 bootstrap.bundle.min.js，支持 Popper 分离加载
- npm 安装: npm install bootstrap@5.3.8 获取 Sass 和 JS 源文件，需配合 Autoprefixer 和 Stylelint
- 框架集成: 官方提供 Webpack、Parcel、Vite、Vue、React 等 Starter 示例，可在 StackBlitz 在线编辑
- 版本切换: 官网支持 v5.3.x（最新）、v5.2.3、v5.1.3、v5.0.2 及 v4.6.x、v3.4.1、v2.3.2 历史版本
组件与插件生态
Bootstrap 内置 12 个 JavaScript 插件（Alert、Button、Carousel、Collapse、Dropdown、Modal、Navbar、Offcanvas、Popover、Scrollspy、Tab、Tooltip），均支持 data 属性 API 和程序化调用。组件库涵盖导航、表单、卡片、轮播、模态框等，且可通过 Utility API 和 CSS 变量快速定制外观。
- 响应式网格系统: 基于 12 列布局，支持 container/container-fluid 容器，自动适配桌面/平板/手机
- 表单组件: 包括 form control、select、checks/radios、range、input group、floating labels 和 validation
- 导航组件: Navbar、Navs & tabs、Breadcrumb、Pagination、Dropdown 等，支持响应式折叠
- 工具类: 提供 clearfix、color background、colored links、focus ring、icon link、position、ratio、stacks、stretched link、text truncation、vertical rule、visually hidden 等
- 第三方生态: 基于 Bootstrap 的管理框架如 AdminLTE（免费）、Metronic（商业收费）等
定制化与扩展
通过 Sass 变量覆盖和 CSS 变量重写可实现深度定制。官方提供全局 Sass 选项（如 $enable-shadows、$prefix），支持自定义前缀避免样式冲突。Utility API 允许开发者创建新 utility 类，例如添加 cursor 属性并设置响应式断点。
- CSS 变量覆盖: 直接在 body 或组件类上重写 --bs-body-font-family、--bs-table-color 等变量
- Utility API 扩展: 通过 map-merge 添加自定义 utility，例如 cursor: auto/pointer/grab 并支持 responsive
- 组件定制示例: 使用 nav-pills 配合 CSS 变量和 utility 类实现自定义导航样式（如圆角、阴影）
常见问题
Q1：Bootstrap v5.3 相比 v4 有哪些关键变化？
A1：v5.3 彻底移除 jQuery 依赖，所有 JavaScript 插件改为原生 JS；引入 CSS 变量体系（全局 :root 变量和组件级变量）；新增 Utility API 替代旧的 utility 生成方式；支持 RTL（从右到左）布局；改进颜色模式（Light/Dark/Auto）和 Accessibility（无障碍）支持。
Q2：如何在不使用构建工具的情况下快速使用 Bootstrap？
A2：通过 jsDelivr CDN 直接引入编译后的 CSS 和 JS 文件。在 HTML 的 <head> 中添加 <link> 标签引入 bootstrap.min.css，在 </body> 前添加 <script> 标签引入 bootstrap.bundle.min.js（包含 Popper）。无需 npm 或 Webpack，即可使用所有组件和插件。
Q3：Bootstrap 的 Utility API 能实现哪些自定义功能？
A3：Utility API 允许通过 Sass map 函数修改、添加或删除 utility 类。例如，可以新增一个 cursor utility（支持 auto、pointer、grab 值），并为其设置 responsive 断点（如 .cursor-lg-pointer）。同时支持伪类变体（如 :hover、:focus）和自定义类名。
更多同类工具与网站,可在其他框架分类继续挑选。
-
相关推荐
-
Svelte
一个用于构建 web 用户界面的框架。742 详情 -
Emberjs
Web应用程序开发的MVC框架672 详情 -
A Alpine.js
Alpine.js 通过简洁的指令在 HTML 中直接写交互逻辑，体积仅 10KB 左右，适合在不想引入完整框架的静态页面或小型项目中使用。123 详情 -
Mithril
Mithril 是一个只有 8KB 左右的现代 JavaScript 框架，提供虚拟 DOM、路由和 XHR 辅助，适合需要快速上手且保持高性能的单页应用。119 详情 -
Lit
Lit 通过简化的模板语法和高效的更新机制，让开发者快速构建符合 Web Components 标准的可复用组件，适合构建跨框架的 UI 库。147 详情 -
Learn Yjs by Jamsocket
Yjs 是多个客户端实时同步状态的 JS 库733 详情 -
Preact
React 的 3kb 轻量级替代方案，拥有相同的现代 API。770 详情 -
UIkit
非常优秀的 CSS 框架707 详情
评论
暂无评论