vue如何获取年月日_BootstrapVue——Vue和Bootstrap的相结合,构建响应式应用更简单...

介绍

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


7911d5f99e659eae3b20f1aadd0ab275.png

如何获取?

Github关键字:bootstrap-vue


d0bcda24d0e2ceb2d2109848ac4550ad.png

相关特性

  • 响应式

移动优先的响应式布局


  • 模块化

仅导入所需的功能


  • 可靠性

自动WAI-ARIA可访问性标记


  • 现代化

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


  • 可配置

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


  • 开源免费

基于MIT许可证在GitHub上开源

组件介绍

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

  • Alerts

1723ef130b768aaaf811100c18c27392.png

  • 按钮
I am a ButtonI am a Link

ae623bc67e2096195ea45e9f089084fb.png

  • 卡片

1364af429a3ffbd5d23faccb56e78997.png

  • 轮播图

可自动或者手动切换


99c2ae7d4a666db1eb3cef14543477e9.gif

  • 隐藏内容

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


3ed9af675b685e6e5b08abee8df57007.gif

  • 响应式嵌入

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


6a2731129202c4ff401eb5da3a805bd6.png


  • 表单

f75903018a58e1a7b26fc26859f39ee2.png

ed76daf7a0ea4d70f88ab7cafdb16259.png

  • 模态框

5303fb91801d3954c19b6336eb2a620c.png

  • 表格

6209be4dfce1b89a46879a070b10f6fb.png

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

安装使用

# With npmnpm install vue bootstrap-vue bootstrap# With yarnyarn add vue bootstrap-vue bootstrap

然后,在app入口点注册BootstrapVue插件:

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

并导入Bootstrap和BootstrapVue css文件:

// app.jsimport '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应用变得更加简单,虽然功能上并不是很强大,但是其主要还是界面上的优势,感兴趣的小伙伴可以学习一下!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/246132.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

cpu队列长度太长解决方法_CPU中的调试算法对比

批处理系统中采用的调度算法重要指标(吞吐量,周转时间,CPU利用率,公平平衡)非抢占式的先来先服务算法(FCFS):按照进程就绪的先后顺序使用CPU特点:公平,实现简单,但是长进程后面的短进程需要等待…

Mono,CLR,.net,Net Framework之间的关系

先粗略看下各自的意义: .Net:以下这些技术的统称。是一个平台,而.NET平台有一个实现标准,叫做.Net Standard;.Net Framework/.Net Core/Mono:实现了这个标准,其选择的组件不一定相同CLR&#x…

c++矩阵类_数据结构-JavaScript矩阵类的设计与实现

矩阵是线性代数课学习的重点内容之一,也是线性代数常见工具之一,在应用数学、统计分析、计算机科学、计算机图像处理级物理等多学科中均有应用。矩阵主要是指数据的行列排列的形式,由行row与列col所组成,在数学中M*N矩阵是指具有M…

GPU Skin

转自:http://geekfaner.com/unity/blog4_GPUSkin.html GPU Skin这门技术在端游时代属于标配,特别是MMO游戏,但是手游时代就要case by case了,因为手机的GPU资源还是很珍贵的(后处理之类的)。作为技术人员&…

button按钮onclick触发不了_单按钮启停:测试模拟脉冲发生器的动作

灯闪烁所模拟是PLC单方面向控件输出信号的过程,控件也可以向模拟PLC输出信号。做一个带反馈灯的按钮,被按下后点亮,再按一下熄灭,且使按钮自保需要一定的接触时间。对应的PLC程序需要一个脉冲发生器(假设地址为L602) 把按钮触点信…

图形学教程Lecture 2: Review of Linear Algebra知识点总结

视频链接:https://www.bilibili.com/video/BV1X7411F744?p2 课程主页链接:http://games-cn.org/intro-graphics/ 课件PPT链接:http://games-cn.org/graphics-intro-ppt-video/ 1. 点乘 2. 点乘应用 获得两个向量的夹角:衡量两…

code换取微信openid_「干货」微信支付前后端流程整理(Vue+Node)

作者:河畔一角转发链接:https://mp.weixin.qq.com/s/ANLjtieWELr39zhgRAeF1w前言最近有不少同学希望我能够把微信支付的前后端流程整理一下,"虽然买了课程,依然看的比较晕"。实际上,我在2019年下半年出了一篇…

Games101现代图形学入门Lecture 3: Transformation知识点总结

视频链接:https://www.bilibili.com/video/BV1X7411F744?p3 课程主页链接:http://games-cn.org/intro-graphics/ 课件PPT链接:http://games-cn.org/graphics-intro-ppt-video/ 1. 缩放矩阵 2. 反射矩阵 3. 切变矩阵 4. 旋转矩阵 5. 线性…

pytorch forward_pytorch使用hook打印中间特征图、计算网络算力等

0、参考https://oldpan.me/archives/pytorch-autograd-hookhttps://pytorch.org/docs/stable/search.html?qhook&check_keywordsyes&areadefaulthttps://github.com/pytorch/pytorch/issues/598https://github.com/sksq96/pytorch-summaryhttps://github.com/allensll…

Games101现代图形学入门Lecture 4: Transformation Cont知识点总结

视频链接:https://www.bilibili.com/video/BV1X7411F744?p4 课程主页链接:http://games-cn.org/intro-graphics/ 课件PPT链接:http://games-cn.org/graphics-intro-ppt-video/ 1. 3D变换 缩放和平移矩阵 旋转矩阵 欧拉角:rol…

Hash和红黑树以及其在C#中的应用

参考资料&#xff1a; .Net 中HashTable&#xff0c;HashMap 和 Dictionary<key,value> 和List<T>和DataTable的比较 - 王若伊_恩赐解脱 - 博客园 c#HashSet源码解析_fdyshlk的博客-CSDN博客_c# hashset 红黑树和哈希表的区别 - 安全技术 - 亿速云 一、基本概念…

networkx 标签_networkx绘制BA无标度网络

step1: 导入networkx复杂网络库、matplotlib.pyplot、pandasimport networkx as nximport matplotlib.pyplot as pltimport pandas as pdstep2: 绘制BA无标度网络Gnx.barabasi_albert_graph(1000,1) #generate BA networkposnx.spring_layout(G) #set layoutnodecolorG.degree(…

Unity URP中的多Pass Shader和Planer shadow

一 .Unity移动端软阴影技术总结&#xff1a; https://blog.csdn.net/jxw167/article/details/82422891 二. 平面阴影的原理 https://zhuanlan.zhihu.com/p/42781261 https://zhuanlan.zhihu.com/p/31504088 王者荣耀游戏使用的就是该方法&#xff0c;已经有上线产品验证过…

java连接mongodb_第78天: Python 操作 MongoDB 数据库介绍

MongoDB 是一款面向文档型的 NoSQL 数据库&#xff0c;是一个基于分布式文件存储的开源的非关系型数据库系统&#xff0c;其内容是以 K/V 形式存储&#xff0c;结构不固定&#xff0c;它的字段值可以包含其他文档、数组和文档数组等。其采用的 BSON(二进制 JSON )的数据结构&am…

URP中的2D Light光照在移动端不生效的问题

最近在尝试用URP推出的还在preview阶段的2D Render系统&#xff0c;发现2D光照在打成APK后失效&#xff0c;尝试了些方法后发现把2d光照用到的shader放进设置中的built in shader后可以解决问题&#xff1a;

大连开发区取暖费能微信支付吗_下半年教资报考人数增加,那到底能不能异地报考呢?...

想要每周获取两篇群文件快扫码进群吧~因为教师资格证认定的问题&#xff0c;最近教师资格证备考又被广大考生提上了日程&#xff0c;由于“先上岗&#xff0c;后考证”政策&#xff0c;小编预测下一年教师资格证考试的通过率肯定没有以前那么高了&#xff0c;不少人就想选择异地…

python3项目源代码下载_2019年最值得关注的34个Python开源项目——Let's go!

踏着人工智能、区块链的东风&#xff0c;近年来一路“横冲直撞”的 Python 在实现了从小众语言到主流的完美转身后&#xff0c;一头扎进了 2019&#xff0c;依旧没有透出丝毫停下来的架势&#xff0c;反倒有些越烧越热的味道。本文将为你介绍 2019 年最值得关注的 34 个 Python…

Unity 音频优化方案

参考资料&#xff1a; https://www.cnblogs.com/bearhb/p/11210136.html https://blog.csdn.net/chenfujun818/article/details/81710895 文件格式 mp3:失真小&#xff0c;适合音质要求高的文件&#xff0c;例如BGM wav:资源大&#xff0c;不推荐 ogg:压缩比高&#xff0c;适…

android home键后计时拉起app_使用React Native完成App软件

搭建开发环境安装react-native-cli&#xff1a;npm i -g react-native-cliAndroid SDK安装Android SDK并启动进行配置&#xff1a;配置环境变量export ANDROID_HOME~/Library/Android/sdk export PATH${PATH}:${ANDROID_HOME}/tools export PATH${PATH}:${ANDROID_HOME}/platfo…

Unity AssetBundle内存管理相关问题

AssetBundle机制相关资料收集 最近网友通过网站搜索Unity3D在手机及其他平台下占用内存太大. 这里写下关于Unity3D对于内存的管理与优化. Unity3D 里有两种动态加载机制&#xff1a;一个是Resources.Load&#xff0c;另外一个通过AssetBundle,其实两者区别不大。 Resources.L…