bootstrap-vue简介

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(面包屑)：展示当前页的导航路径，告诉我们当前所在位置

注意：

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

注意：

通过variant属性可以定义按钮的语义样式。（default, primary, success, warning, info,danger）
通过size属性定义按钮的大小（sm,lg）,不指定会有默认的样式。
依然可以使用type属性（submit，reset，button）。
通过disabled添加禁用状态。
添加href或者to属性会生成button样式的a标签。
添加pressed属性控制按钮是否处于已点击的状态。使用sync修饰符可以将按钮的状态与vm中的数据进行同步。

5、Button group（按钮组）：将一组按钮放在一行或者一列，可帮助我们实现顶部导航栏或者tab切换效果。

注意：

6、Button toolbar（按钮工具栏）：用于将按钮组和输入框组放置在一行。

可以在工具条中将输入框组，下拉菜单和按钮组自由的组合在一起。还可以使用工具类对间距进行调整。

注意：

7、Cards（卡片）：卡片是一个可以灵活配置，扩展性良好的组件。是一种移动端友好的呈现方式。它可以设置头部，脚步，躯干部分可以使用其他的组件。最棒的是，如果设置了主题色，则它的内容会自动应用这个主题色。还有非常多属性项可以对组件呈现进行配置。

<b-card>的宽度默认是填满父容器的。当然你可以使用bootstrap-v4的样式类进行自定义。

注意：

组件默认的根节点标记是div，为组建指定tag属性，可以进行自定义。
通过title属性设置标题，sub-title属性设置子标题。
如果想在card组件中使用链接，可以使用b-link组件或其他标签,只需为标签指定样式类card-link。
可以在卡片中添加图片，添加img-src指向图片地址，img-alt图片替换文本,img-top/img-bottom 图片在顶部还是底部，默认是顶部。如果还添加overlay属性，则图片会作为卡片的背景图。
可以通过header和footer属性指定卡片头部，脚步的文本，复杂点的情况可以使用具名插槽。
躯干部分具有样式类.card-body，为卡片组件提供了一个具有内边距的区域。卡片组件的内容默认是放到躯干部分的。
可以为卡片组件设置no-body,来让躯干部分不被.card-body样式类修饰。此时，对卡片组件设置title和sub-title将不会呈现。
通过card-text,card-body,card-link这些类名，对卡片组件中的内容进行样式自定义。
还能通过bg-variant,border-variant设置各种变体色。更细致可以设置各个部分的遍体色，详情参照官网文档。
b-card-group可以将一组card放置在一行,默认是没有间距的。添加deck属性可以添加间距，通过columns属性可以实现瀑布流布局，详情参照官网文档。

8、Carousel（轮播图）:用于循环展示一系列内容。可以支持图片，文本和自定义的标记。还可以添加上一个/下一个的操作按钮和指示器。

注意：

轮播图不会自动标准化轮播项的尺寸，可以使用工具类或者自定义样式来调整内容的尺寸。如果全部使用图片，请确保图片都有一样的尺寸，至少要保证图片的长宽比例一致。
如果对于b-carousel-slide使用了img-src或者img-blank属性，我们在轮播图中通过img-width,img-height定义的尺寸会自动运用到每一项。
图片是响应式的，会自动缩放来填充父容器。
在b-carousel-slide内部，使用了b-img组件来展示图片。
通过interval属性设置轮播的时间间隔
controls属性设置轮播控件，indicators属性设置指示器，他们是我相互独立的
如果需要自定义元素的样式，请为carousel添加样式类，来形成命名空间，然后通过选择器的优先级来覆盖默认样式。
对组件使用v-model，它会绑定当前轮播项的索引（从0来时计数）

未完待续

为啥我无法插入iframe呢