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

如何獲?。?/h1>

Github關(guān)鍵字：bootstrap-vue

相關(guān)特性

• 響應式

移動優(yōu)先的響應式布局

• 模塊化

僅導入所需的功能

• 可靠性

自動WAI-ARIA可訪問性標記

• 現(xiàn)代化

使用Vue.js v2.6和Bootstrap SCSS v4.3構(gòu)建

• 可配置

使用SCSS變量和全局選項創(chuàng)建主題

• 開源免費

基于MIT許可證在GitHub上開源

組件介紹

BootstrapVue提供了豐富的組件和插件，已經(jīng)基本滿足我們?nèi)粘ｉ_發(fā)的需求

• Alerts

• 按鈕

<div>
 <b-button>I am a Button</b-button> <b-button href="#">I am a Link</b-button></div>

• 輪播圖

可自動或者手動切換

• 隱藏內(nèi)容

輕松切換頁面上幾乎任何內(nèi)容的可見性。包括制作手風琴的支持。

• 響應式嵌入

通過創(chuàng)建可在任何設(shè)備上縮放的內(nèi)在比率，根據(jù)父級的寬度創(chuàng)建響應式視頻或幻燈片嵌入

<div>
 <b-embed type="iframe" aspect="16by9" src="你的資源URL" allowfullscreen ></b-embed></div>

• 表單

• 模態(tài)框

• 表格

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

安裝使用

# With npm
npm install vue bootstrap-vue bootstrap# With yarnyarn 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.jsimport 'custom.scss'

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

總結(jié)

Vue+BootStrapV4，使構(gòu)建響應式Web應用變得更加簡單，雖然功能上并不是很強大，但是其主要還是界面上的優(yōu)勢，感興趣的小伙伴可以學習一下！

源碼碼網(wǎng)軟件教程，專注各種it開源項目分享！