Bootstrap 是一个用于构建和定制网站的前端工具包,官网将其定位为可扩展、包含多种功能的 frontend toolkit。它把预构建网格系统、界面组件、Sass 架构、CSS 变量和 JavaScript 插件组合在一起,帮助开发者从基础布局、视觉样式到交互行为搭建项目。Bootstrap 当前页面展示的版本为 v5.3.8,既可以通过 npm、RubyGems、Composer 或 Meteor 安装源文件,也可以通过 CDN 引入编译后的 CSS 与 JavaScript,还能下载源代码使用。
核心功能
预构建网格系统与界面组件
Bootstrap 提供预构建的 grid system,并配套多种可直接使用的组件。官网示例涵盖导航、按钮、下拉菜单、标签页、表格相关样式以及其他页面构建所需的界面元素,开发者可以将组件组合到网页项目中。组件的样式还可以和工具类、CSS 变量结合,继续调整颜色、尺寸、间距、阴影和其他视觉表现。
Sass 模块化定制
Bootstrap 使用 Sass 构建模块化架构。开发者可以导入完整的 Bootstrap Sass,也可以只引入需要的函数、变量、映射、混入、根样式、工具类和具体组件,从而选择项目实际使用的 CSS 内容。官网示例展示了如何在导入 Bootstrap 前覆盖 $primary、启用阴影以及设置 CSS 前缀,也支持通过 Sass 变量、maps、functions 和 mixins 编写自定义 CSS。
CSS 变量与主题样式
Bootstrap 5 为全局主题样式、单个组件和工具类提供 CSS 变量。官网说明这些变量可以在 :root 层级使用,组件和工具类则会在相关 class 范围内使用作用域变量。开发者可以通过 var(--bs-variableName) 引用全局变量,也可以覆盖全局、组件或 utility class 的变量,而不必重新声明每一条 CSS 规则;示例涉及字体、行高、背景色、表格颜色和边框颜色等设置。
Utility API 与工具类扩展
Bootstrap 5 的 Utility API 基于可定制的 Sass map,用来添加、移除或修改 utility classes。官网列出的工具类覆盖定位、尺寸、颜色和效果等方向,并支持让工具类具备响应式行为、增加伪类变体或使用自定义名称。开发者还可以通过 Sass map functions 创建项目自己的 utility,例如增加响应式的 cursor 工具类,再将其应用到组件或其他页面元素上。
JavaScript 交互插件
Bootstrap 提供不依赖 jQuery 的 JavaScript 插件,包含可切换的隐藏元素、modal、offcanvas 菜单、popover、tooltip 等交互能力。其 JavaScript 采用 HTML-first 方式,几乎所有插件都支持 data API,开发者可以在 HTML 元素上添加 data 属性来启用行为。官网还提供按需引入单个插件、以模块方式使用以及通过 programmatic API 控制插件的方式;现有插件包括 Alert、Button、Carousel、Collapse、Dropdown、Modal、Offcanvas、Popover、Scrollspy、Tab、Toast 和 Tooltip。
使用方式
Bootstrap 支持多种接入方式。开发者可以通过 npm、RubyGems、Composer 或 Meteor 安装源 Sass 与 JavaScript 文件,也可以使用 jsDelivr CDN,只引入编译后的 CSS 或 JavaScript;官网还提供 Webpack、Parcel 和 Vite 的入门指南。项目也可以直接下载源代码,或使用 Examples repo 中的示例启动。JavaScript 插件既能通过 HTML data 属性使用,也能单独引入并以模块或 programmatic API 的方式调用。官网正文未说明注册要求,也未提到需要自备模型 Key。
适用人群与场景
前端开发者可以使用 Bootstrap 的网格系统和预构建组件搭建响应式网站页面;需要统一视觉规范的项目可以通过 Sass、CSS 变量和工具类调整颜色、字体、阴影、前缀及组件样式;需要页面交互的开发者可以使用不依赖 jQuery 的下拉菜单、模态框、轮播、折叠区、标签页、提示框和通知插件;希望按项目拆分资源的开发者则可以只导入所需 Sass 组件或单独引入 JavaScript 插件。
注意事项
官网当前页面展示 Bootstrap v5.3.8,同时单独提供了 Bootstrap 3 与 4 的安全更新入口。通过 package manager 安装时,文档说明这类安装不包含 documentation 或完整的 build scripts;使用 CDN 时则主要引入编译后的 CSS 或 JavaScript。官网正文没有给出价格、免费额度或付费档位信息。