Bootstrap UI在2012-2019年大受欢迎,它独创的栅格布局深受广大前端开发者喜爱,因此有大量的移动端、pc端网站使用了Bootstrap UI。
到了2018年左右
vue在国内大火,之前那些jQuery一把梭的前端开发也纷纷主动或被动学习vue,新项目逐步抛弃了jQuery、Bootstrap,转而使用vue、Element UI、Ant Design Vue。
截至今日(2023-10-12)国内大部分网站的ui都已经被Element UI、Ant Design Vue占据,很少人会再提及或使用Bootstrap UI,只有之前那些基于Bootstrap UI的旧项目。
如果想用vue改造旧的Bootstrap项目,有2个方法:
- 自己封装基于Bootstrap UI的基础组件
- 使用其他基于Bootstrap UI的基础组件库 github上封装的比较完整的Bootstrap UI的基础组件库推荐:
- bootstrap-vue(支持vue2、vue3)
- bts-vue(仅支持vue3)
【bootstrap-vue】优缺点
- github仓库:github.com/bootstrap-v…
- 文档地址:bootstrap-vue.org/
优点
- 比较成熟(特别是vue2版本),有众多开发者维护
- 使用人数多,社区较完善,组件bug少,功能完善
- 组件多,指令多。bootstrap-vue有超过85个组件,45个插件/指令
- 支持vue2、vue3
- 原汁原味的bootstrap风格
缺点
- 文档全是英文,没有中文文档
- 部分组件不符合国内审美,如
Time、Form Timepicker、Form Datepicker - 表单校验不好用
- 缺少
Tree、TreeSelect、Cascader等与树状数据相关组件 - 原汁原味的bootstrap风格(可能不能拿来就用)。过渡效果比较生硬
【bts-vue】优缺点
- github仓库:github.com/941477276/b…
- 文档地址:941477276.github.io/bts-vue/doc…
优点
- 由国人开发,提供中/英文文档
- 组件符合国内审美,可以拿来就用。
- 组件保留了bootstrap风格,同时增加了自己的特色,组件过渡效果不生硬
- 拥有
Tree、TreeSelect、Cascader等与树状数据相关组件
缺点
- 仅支持vue3
- 还不成熟(处于能用阶段),使用人数少,社区不完善,开发者少
- 目前仅有42个基础组件(也算优点,没有多余的业务组件,减少代码体积)
- 国际化未处理好