• 技术文章 >web前端 >html教程

    bootstrap-vue是什么

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

    本文尝试对各个组件进行试用,为了尽量减少其他因素干扰,仍然使用访问cdn的方式。如果你喜欢使用模块化打包工具,如webpack,官网有详细的文档可供参考。

    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是什么的详细内容,更多请关注php中文网其它相关文章!

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
    专题推荐:bootstrap-vue
    上一篇:bootstrap怎么下载 下一篇:html big标签怎么用
    VIP课程(WEB全栈开发)

    相关文章推荐

    • 【腾讯云】年中优惠,「专享618元」优惠券!• Bootstrap和JQuery UI之间的简单比较• Vue CLI3.0中使用jQuery和Bootstrap的教程(详细步骤)• bootstrap用什么软件• bootstrap怎么下载
    1/1

    PHP中文网