Bootstrap官方版是一款流行的开源前端框架,用于快速构建响应式、移动优先的网站和 Web 应用。Bootstrap提供丰富的预置组件、强大的网格系统和灵活的定制选项,让开发者无需从零编写 CSS 即可打造现代化界面。Bootstrap进一步优化了 CSS 变量、深色模式等功能,大幅提升了开发效率和用户体验。
软件功能
一、使用 CSS 变量实时构建扩展
Bootstrap 5 持续优化 CSS 变量应用,覆盖全局主题、组件及工具类。在 :root 定义颜色、字体等数十个变量,全局可以使用;组件和工具类的变量限定于对应类名,便于灵活修改。
1、使用 CSS 变量
使用全局 :root 变量编写新样式,语法为 var(--bs-variableName),可被子元素继承。
2、通过 CSS 变量定制
覆盖全局、组件或工具类的变量值,即可定制 Bootstrap,无需重写规则。
二、使用 Sass 自定义一切
Bootstrap 基于 Sass 构建模块化架构,按需引入组件,自由启用渐变、阴影等全局样式,通过变量、映射、函数和混合宏轻松编写自定义 CSS。
1、完整引入 Bootstrap 的 Sass
导入一个样式表,即可使用全部 CSS 功能。
2、按需引入
最简定制方式——仅引入所需 CSS。
三、使用主题打造专属风格
Bootstrap主题市场提供高级主题,助你提升项目品质。主题基于 Bootstrap 扩展为独立框架,内置丰富组件、插件、文档及强大构建工具。
四、使用 Bootstrap 图标个性化项目
Bootstrap Icons 是开源 SVG 图标库,拥有 1,800+ 图标且持续更新。兼容所有项目,无论是否使用 Bootstrap。支持 SVG 和图标字体两种格式,矢量缩放,CSS 轻松定制。
使用说明
如何新建Bootstrap?
1、在项目根目录新建 index.html 文件,添加 <meta name="viewport"> 标签确保移动端正确响应。
2、在 <head> 中放入 <link> 标签引入 CSS,在 </body> 前放入 <script> 标签引入 JS 捆绑包(含 Popper,用于下拉菜单、弹窗和工具提示定位)。
也可单独引入 Popper 和 JS。若不需要下拉菜单、弹窗或工具提示,去掉 Popper 可节省部分体积。
3、你好,世界!在浏览器中打开页面查看效果。现在可以创建自定义布局、添加各类组件,并参考示例开始使用 Bootstrap 开发。
更新日志
层叠样式表
修复 color-contrast() 以符合 WCAG 2.1 标准
为输入搜索取消按钮设置光标指针
防止多行内容弹性容器中的旋转器失真
JavaScript
撤销"尝试显式将焦点返回下拉触发器"
文档
简化发布准备脚本
本地开发端口恢复为 9001
使用 Example 短代码替代 .bd-example class 的 div
修复开发模式下 SCSS 自动重新编译问题
添加 OSSF 评分卡
工作流:第三方操作使用 SHA-1
解压可下载示例 HTML 文件
为 Example 组件的按钮添加工具提示
MyGet 脚本迁移至 GitHub Actions
小范围示例代码优化
从文档中移除主题
发布 v5.3.8

phpstorm 2019 官方版
Rider 2019 最新版