設計網站原型或不需客製設計風格時，最常用 Bootstrap。

Bootstrap 4

• BootstrapVue (2.x)
• [Vuestrap Base Components]http://kzima.github.io/vuestrap-base-components/) (1.x)

Bootstrap 3

• VueStrap (1.x)

雖然 1.x Bootstrap 組件做得不錯，礙於大量使用$broadcast事件傳遞解耦合，往後不便升級，這篇將介紹BootstrapVue。

已提供組件

• Alerts
• Breadcrumb
• Buttons
• Button group
• Dropdowns
• Form Inputs
• Form Radio
• Form Checkbox
• Form Select
• Nav
• NavBar
• Pagination
• Tables (with pagination and custom rendering support)

安裝

$ npm i bootstrap-vue@latest
$ yarn add bootstrap-vue@latest

或是發問時透過CDN載入(放在vue主程式後)

使用方式

方案一 - 使用Vue Plugin，把所有組件註冊為全域。

import Vue from 'vue'
import BootstrapVue from 'bootstrap-vue';

/* 註冊所有組件為全域 */
Vue.use(BootstrapVue);

方案二 - 手動註冊
你可能用到一小部分而已，只載你用到的組件。

import Vue from 'vue';
import Alert from 'bootstrap-vue/components/alert.vue'

/* 註冊Alert為全域組件 */
Vue.use('bAlert',Alert);

/* 註冊Alert為局部組件 */
export default {
  components: {bAlert:Alert}
}

註冊後可在模板內使用

<b-alert :show="show" state="success" dismissible>
  This is an alert
</b-alert>
<button type="button" @click="toggleAlert">toggle</button>

new Vue({
    data: {
        show: false;
    },
    methods: {
        toggleAlert: function() {
            this.$set('show', true)
        }
    }
})

Alert - 參考文件

BootstrapVue尚有部分組件開發中，若專案用得到，可以先抓來魔改。
https://github.com/bootstrap-vue/bootstrap-vue/tree/master/components