介紹

BootStrap是世界上最受歡迎的構建響應式移動優先網站的框架，Vue是當前最流行的前端框架之一，BootstrapVue則是將兩者相結合，使用BootstrapVue，可以使用Vue.js和前端CSS庫--Bootstrap v4在Web上構建響應式，移動優先項目。BootstrapVue具有超過40個插件和超過75個自定義組件，為Vue.js提供了最全面的Bootstrap v4組件和網格系統實現之一。具有廣泛的自動WAI-ARIA（無障礙）可訪問性標記！

如何獲取？

Github關鍵字：bootstrap-vue

相關特性

• 響應式

移動優先的響應式布局

• 模塊化

僅導入所需的功能

• 可靠性

自動WAI-ARIA可訪問性標記

• 現代化

使用Vue.js v2.6和Bootstrap SCSS v4.3構建

• 可配置

使用SCSS變量和全局選項創建主題

• 開源免費

基於MIT許可證在GitHub上開源

組件介紹

BootstrapVue提供了豐富的組件和插件，已經基本滿足我們日常開發的需求

• Alerts

• 按鈕

 I am a Button
 I am a Link

• 卡片

• 輪播圖

可自動或者手動切換

• 隱藏內容

輕鬆切換頁面上幾乎任何內容的可見性。包括製作手風琴的支持。

• 響應式嵌入

通過創建可在任何設備上縮放的內在比率，根據父級的寬度創建響應式視頻或幻燈片嵌入

  type="iframe"
 aspect="16by9"
 src="你的資源URL"
 allowfullscreen
 >

• 表單

• 模態框

• 表格

以上是選擇性的預覽一些組件，更多組件可以選擇查看官網文檔

安裝使用

# With npm
npm install vue bootstrap-vue bootstrap
# With yarn
yarn add vue bootstrap-vue bootstrap

然後，在app入口點註冊BootstrapVue插件：

// app.js
import Vue from 'vue'
import BootstrapVue from 'bootstrap-vue'
Vue.use(BootstrapVue)

並導入Bootstrap和BootstrapVue css文件：

// app.js
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'

或者scss通過單個自定義SCSS文件導入Bootstrap和BootstrapVue 文件：

// custom.scss
@import 'node_modules/bootstrap/scss/bootstrap';
@import 'node_modules/bootstrap-vue/src/index.scss';
// app.js
import 'custom.scss'

BootstrapVue還提供了和Nuxt.js、Vue CLI2、Vue CLI3一起使用的模板，用法很多，可以到Github上獲取相關文檔地址！

總結

Vue+BootStrapV4，使構建響應式Web應用變得更加簡單，雖然功能上並不是很強大，但是其主要還是介面上的優勢，感興趣的小夥伴可以學習一下！