欢迎来到源码码网
帮助中心

源码码网

热门搜索: 淘宝客    商城小程序   
免费发布需求
免费发布商品

基于Vue+BootStrapV4的BootstrapVue构建响应式、移动项目

  • 时间:2020-09-28 12:26 编辑:admin 来源:源码码网 阅读:103
  • 扫一扫,手机访问
摘要:BootStrap是世界上最受欢迎的构建响应式移动优先网站的框架,Vue是当前最流行的前端框架之一,BootstrapVue则是将两者相结合,使用BootstrapVue,可以使用Vue.js和前端CSS库--Bootstrap v4在Web上构建响应式,移动优先项目。BootstrapVue具有超过40个插件和超过75个自定义组件,为Vue.js提供了最全面的Bootstrap v4组件和网格系统实现之一。具有广泛的自动WAI-ARIA(无障碍)可访问性标记!

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

BootstrapVue


如何获取?

Github关键字:bootstrap-vue

BootstrapVue

相关特性

  • 响应式

移动优先的响应式布局

  • 模块化

仅导入所需的功能

  • 可靠性

自动WAI-ARIA可访问性标记

  • 现代化

使用Vue.js v2.6和Bootstrap SCSS v4.3构建

  • 可配置

使用SCSS变量和全局选项创建主题

  • 开源免费

基于MIT许可证在GitHub上开源

组件介绍

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

  • Alerts


BootstrapVue


  • 按钮

<div>
 <b-button>I am a Button</b-button> <b-button href="#">I am a Link</b-button></div>

BootstrapVue

BootstrapVue


  • 轮播图

可自动或者手动切换

BootstrapVue


  • 隐藏内容

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

BootstrapVue


  • 响应式嵌入

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

BootstrapVue


<div>
 <b-embed type="iframe" aspect="16by9" src="你的资源URL" allowfullscreen ></b-embed></div>
  • 表单

BootstrapVue

  • 模态框

BootstrapVue

  • 表格

BootstrapVue

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

安装使用

# With npm
npm install vue bootstrap-vue bootstrap# With yarnyarn 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.jsimport 'custom.scss'

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

总结

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

源码码网软件教程,专注各种it开源项目分享!


  • 全部评论(0)
最新发布的资讯信息
【开发工具|建站cms】优客365开源导航网址源码1.4.8版本下载(2020-10-19 20:36)
【开发工具|建站cms】米拓CMS MetInfo7.2.0开源版本下载(2020-10-19 18:01)
【开发工具|建站cms】CmsEasy7.6.9.3开源版本下载(2020-10-19 17:48)
【开发工具|建站cms】帝国CMS7.5版本下载安装(2020-10-19 17:41)
【建站技巧|网站运营】帝国CMS7.5数据库恢复后后台登录提示账号或密码错误怎么解决(2020-10-19 17:27)
【开发工具|Android开发工具】android-ndk-r11b-windows-x86_64下载(2020-10-15 22:10)
【开发工具|Android开发工具】Android开发工具Android studio3.0版本下载(2020-10-15 22:06)
【开发工具|Android开发工具】Android studio3.5.2版本下载地址(2020-10-15 22:02)
【开发工具|java开发工具】java jdk8下载jdk-8u191-linux-x64下载(2020-10-15 21:57)
【开发工具|Android开发工具】Android开发 gradle-4.6-all版本下载(2020-10-15 21:52)
联系我们

QQ:2494243972、1105326722

投诉举报:1105326722@qq.com

广告合作:QQ 110532672

源码码网手机版二维码
联系客服
手机版
源码码网手机版二维码
扫一扫进手机版
返回顶部