BootstrapVue中文官网

BootstrapVue介绍

Bootstrap是Twitter推出的一个用于前端开发的开源工具包。它由Twitter的设计师Mark Otto和Jacob Thornton合作开发,是一个CSS/HTML框架。

Vue 是一套用于构建用户界面的渐进式框架。

而两者的合体就是BootstrapVue，一个基于Vue.js 和Bootstrap v4开发的框架。采用BootstrapVue 构建响应式、移动优先、ARIA项目（Accessible Rich Internet Application，可访问的富媒体应用，即无障碍友好应用)，基于 Vue.js 和世界全球最受欢迎的 CSS 前端框架 — Bootstrap v4。

英文官网

https://bootstrap-vue.org/

安装使用

npm install bootstrap-vue

看一个BootstrapVue使用实例

vue代码如下：

<div>
  <b-button size="sm" @click="toggle">
    {{ show ? 'Hide' : 'Show' }} Alert
  </b-button>
  <b-alert v-model="show" class="mt-3" dismissible @dismissed="dismissed">
    Hello {{ name }}!
  </b-alert>
</div>

javascript代码如下：

  export default{
    data() {
        return {
          name: 'BootstrapVue',
          show: true
        }
      },
      watch: {
        show(newVal) {
          console.log('Alert is now ' + (newVal ? 'visible' : 'hidden'))
        }
      },
      methods: {
        toggle() {
          console.log('Toggle button clicked')
          this.show = !this.show
        },
        dismissed() {
          console.log('Alert dismissed')
        }
      }
  }