文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

bootstrap-vue有什么作用

2024-04-02 19:55

关注

本篇内容主要讲解“bootstrap-vue有什么作用”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“bootstrap-vue有什么作用”吧!

    Bootstrap-Vue是一个ui组件库,遵循vue的组件化开发方式,使用Bootstrap样式控制组件外观,摒弃了对jquery的依赖。让我们在使用Vue.js的同时依然能够继续享有bootstrap样式的便利。

    1、Alerts(警告框):主要的使用场景为,针对用户的行为给出反馈。

    注意:

    应该总是使用show属性控制组件的可见性。

    给组件添加属性dismissible可以显示一个关闭按钮,它应该总是与dismissed事件一起使用,在dismissed事件中重置vm中控制alert显示属性的数据状态

    可以通过variant属性(primary,secondary,success,danger,warining,info)产生不同语义下的alert

    dismiss-count-down属性接受一个函数,可以帮助我们实现定时自动关闭的alert

    2、badge(徽章):允许我们为某些内容添加补充信息。

    注意:

    徽章会依据直接父元素的字号调节本身的字号大小,它使用em单位。

    通过variant属性可以定义徽章的语义样式。(default,primary,success,warning,info,danger)

    添加pill属性可以定义胶囊式的徽章(增强的圆角)

    通过href属性可以为徽章添加行为(跳转)

    如果需要圆形的徽章,参照css实现的圆形徽章

    3、Breadcrumb(面包屑):展示当前页的导航路径,告诉我们当前所在位置

    注意:

    路径的分隔符是通过指定伪元素::before的content属性,由css自动添加。

    items即路径上的各导航项,通过一个对象数组指定。可以给一个对象指定active属性,使其处于激活状态

    如果没有明确指定哪一项为激活状态,则认会为最后一项为默认激活状态。

    为导航项指定href或to属性可以添加导航行为。

    4、Button:基本的控件元素,用于触发行为。

    注意:

    通过variant属性可以定义按钮的语义样式。(default,primary,success,warning,info,danger)

    通过size属性定义按钮的大小(sm,lg),不指定会有默认的样式。

    依然可以使用type属性(submit,reset,button)。

    通过disabled添加禁用状态。

    添加href或者to属性会生成button样式的a标签。

    添加pressed属性控制按钮是否处于已点击的状态。使用sync修饰符可以将按钮的状态与vm中的数据进行同步。

到此,相信大家对“bootstrap-vue有什么作用”有了更深的了解,不妨来实际操作一番吧!这里是编程网网站,更多相关内容可以进入相关频道进行查询,关注我们,继续学习!

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-前端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯