iT邦幫忙

2017 iT 邦幫忙鐵人賽
DAY 23
0
Modern Web

Vue.js 30天系列 第 23

Vue.js 23 - 現成UI - Bootstrap

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

Bootstrap 4

Bootstrap 3

雖然 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


上一篇
Vue.js 22 - 除錯工具 - vue-devtools
下一篇
Vue.js 24 - 現成UI - Material Design
系列文
Vue.js 30天30

尚未有邦友留言

立即登入留言