BootstrapVue：Vue+BootStrapV4，构建响应式、移动优先项目

Vedu • 2020-12-01 07:49 • 资源分享 • 阅读 1427

介绍

BootStrap是世界上最受欢迎的构建响应式移动优先网站的框架，Vue是当前最流行的前端框架之一，BootstrapVue则是将两者相结合，使用BootstrapVue，可以使用Vue.js和前端CSS库–Bootstrap v4在Web上构建响应式，移动优先项目。BootstrapVue具有超过40个插件和超过75个自定义组件，为Vue.js提供了最全面的Bootstrap v4组件和网格系统实现之一。具有广泛的自动WAI-ARIA（无障碍）可访问性标记！

Vue BootStrapV4，构建响应式、移动优先项目——BootstrapVue

如何获取？

Github关键字：bootstrap-vue

组件介绍

BootstrapVue提供了丰富的组件和插件，已经基本满足我们日常开发的需求

Alerts

按钮

I am a Button I am a Link

卡片

轮播图

可自动或者手动切换

隐藏内容

轻松切换页面上几乎任何内容的可见性。包括制作手风琴的支持。

响应式嵌入

通过创建可在任何设备上缩放的内在比率，根据父级的宽度创建响应式视频或幻灯片嵌入

表单

模态框

表格

以上是选择性的预览一些组件，更多组件可以选择查看官网文档

安装使用

# With npm
npm install vue bootstrap-vue bootstrap
# With yarn
yarn add vue bootstrap-vue bootstrap

然后，在app入口点注册BootstrapVue插件：

// app.js
import Vue from \'vue\'
import BootstrapVue from \'bootstrap-vue\'
Vue.use(BootstrapVue)

并导入Bootstrap和BootstrapVue css文件：

// app.js
import \'bootstrap/dist/css/bootstrap.css\'
import \'bootstrap-vue/dist/bootstrap-vue.css\'

或者scss通过单个自定义SCSS文件导入Bootstrap和BootstrapVue 文件：

// custom.scss
@import \'node_modules/bootstrap/scss/bootstrap\';
@import \'node_modules/bootstrap-vue/src/index.scss\';
// app.js
import \'custom.scss\'

BootstrapVue还提供了和Nuxt.js、Vue CLI2、Vue CLI3一起使用的模板，用法很多，可以到Github上获取相关文档地址！

总结

Vue BootStrapV4，使构建响应式Web应用变得更加简单，虽然功能上并不是很强大，但是其主要还是界面上的优势，感兴趣的小伙伴可以学习一下！

内容出处：，

声明：本网站所收集的部分公开资料来源于互联网，转载的目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。如果您发现网站上有侵犯您的知识产权的作品，请与我们取得联系，我们会及时修改或删除。文章链接：http://www.yixao.com/share/16518.html

BootstrapVue：Vue+BootStrapV4，构建响应式、移动优先项目

介绍

如何获取？

相关特性

组件介绍

安装使用

总结

相关推荐

发表评论