网站首页 > 精选文章 正文
大家好,很高兴又见面了,我是"高级前端进阶",由我带着大家一起关注前端前沿、深入前端底层技术,大家一起进步,也欢迎大家关注、点赞、收藏、转发,您的支持是我不断创作的动力。
什么是 BootstrapVue
BootstrapVue provides one of the most comprehensive implementations of Bootstrap v4 for Vue.js. With extensive and automated WAI-ARIA accessibility markup.
借助 BootstrapVue,开发者可以使用 Vue.js 和世界上最流行的前端 CSS 库 Bootstrap v4 在 Web 上构建响应式、移动优先和 ARIA 可访问的项目。
BootstrapVue 拥有超过 85 个组件、 45 个可用插件、多个指令和 1200 多个图标,为 Vue.js v2.6 提供了最全面的 Bootstrap v4 组件和网格系统实现之一,并配有广泛且自动化的 WAI-ARIA 可访问性标记。
目前 BootstrapVue 在 Github 通过 MIT 协议开源,有超过 15k 的 star、2k 的 fork、175k 的项目依赖量、300 + 代码贡献值,是一个妥妥的前端优质开源项目。
如何使用 BootstrapVue
如果项目使用 Webpack、Parcel 或 rollup.js 等模块捆绑器,开发者可以轻松地将包直接包含到当前项目中。但是,开发者需要首先使用 npm 或 yarn 获取最新版本的 Vue.js、Bootstrap v4 和 BootstrapVue:
// With npm
npm install vue bootstrap bootstrap-vue
// With yarn
yarn add vue bootstrap bootstrap-vue
然后在应用程序入口点(通常是 app.js 或 main.js)中注册 BootstrapVue:
import Vue from 'vue'
import {BootstrapVue, IconsPlugin} from 'bootstrap-vue'
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'
// 让 BootstrapVue 在整个项目可用
Vue.use(BootstrapVue)
// BootstrapVue 的 icon 组件插件是可选的
Vue.use(IconsPlugin)
如果要更改 Bootstrap 的默认样式(例如 $body-color),则必须使用 Bootstrap 和 BootstrapVue 的 scss 文件。 创建自己的 scss 文件(例如 app.scss),其中包含 2 个 @import:
// 定义默认变量
$body-bg: #000;
$body-color: #111;
// 导入 Bootstrap 和 BootstrapVue SCSS 文件
// 注意顺序很重要
@import 'node_modules/bootstrap/scss/bootstrap.scss';
@import 'node_modules/bootstrap-vue/src/index.scss';
然后将该单个 scss 文件导入到项目中:
import Vue from 'vue'
import {BootstrapVue} from 'bootstrap-vue'
import './app.scss'
Vue.use(BootstrapVue)
BootstrapVue 还支持 Tree shaking、高级指令、Nuxt.js 集成等高级用法,这些示例可以参考文末资料自行学习,本文不再过多展开。
参考资料
https://github.com/bootstrap-vue/bootstrap-vue
https://bootstrap-vue.org/
https://bootstrap-vue.org/docs
猜你喜欢
- 2025-04-05 vue-cli-service不是内部或外部命令,也不是可运行的程序
- 2025-04-05 vue项目完整搭建步骤(如何使用vue构建项目)
- 2025-04-05 Node.js项目实践:构建可扩展的Web应用
- 2025-04-05 面试官:说说 Node. js 有哪些全局对象?
- 2025-04-05 vue报错信息-【crypto$2.getRandomValues is not a function】
- 2025-04-05 Vue.js 环境配置(vue.js部署)
- 2025-04-05 使用nvm管理node.js版本,方便vue2,vue3开发
- 2025-04-05 离线环境下运行Vue项目(vue3 离线文档)
- 2025-04-05 Vue 组件管理的新趋势!以后可能不再需要组件库了?
- 2025-04-05 Vue 技术栈(全家桶)(vue technology)
- 最近发表
- 标签列表
-
- 向日葵无法连接服务器 (32)
- git.exe (33)
- vscode更新 (34)
- dev c (33)
- git ignore命令 (32)
- gitlab提交代码步骤 (37)
- java update (36)
- vue debug (34)
- vue blur (32)
- vscode导入vue项目 (33)
- vue chart (32)
- vue cms (32)
- 大雅数据库 (34)
- 技术迭代 (37)
- 同一局域网 (33)
- github拒绝连接 (33)
- vscode php插件 (32)
- vue注释快捷键 (32)
- linux ssr (33)
- 微端服务器 (35)
- 导航猫 (32)
- 获取当前时间年月日 (33)
- stp软件 (33)
- http下载文件 (33)
- linux bt下载 (33)