基於Vue的前端框架有很多，Element算一個，而BootstrapVue也可以非常不錯的一個，畢竟Bootstrap也是CSS中的大佬級別的，它和Vue的整合，使得開發起來更加方便了。BootstrapVue 是基於 Bootstrap v4 + Vue.js 的前端 UI 框架。它是流行的 Bootstrap 框架與 Vue.js 的整合。這個包稱為 BootstrapVue。它允許我們使用與 Bootstrap（v4）整合的自定義元件。

使用 BootstrapVue，任何人都可以從 Vanilla.js 或 jQuery 切換到 Vue.js，而無需擔心 Bootstrap 對 jQuery 的嚴重依賴，甚至無法找到解決方法。這就是 BootstrapVue 的救援方式。它有助於彌補這一差距，並允許 Vue 開發人員能夠輕鬆地在他們的專案中使用 Bootstrap。BootstrapVue不依賴Jquery。

1、BootstrapVue的安裝使用

我們假設你已經有Vue的專案環境，那麼BootstrapVue的安裝使用介紹就很容易了，直接使用npm安裝即可。

  1. npm install bootstra-vue bootstrap

上面的命令將會安裝BootstrapVue和Bootstrap包。 BoostrapVue包中包含所有BootstrapVue元件，常規Bootstrap包含CSS檔案。

接下來，讓我們設定剛剛安裝的BootstrapVue包。轉到你的main.js檔案並將這行程式碼新增到合適的位置，另外還需要將Bootstrap CSS檔案匯入到專案中。

  1. import BootstrapVue from 'bootstrap-vue'
  2. Vue.use(BootstrapVue)
  3.  
  4. import 'bootstrap/dist/css/bootstrap.css'
  5. import 'bootstrap-vue/dist/bootstrap-vue.css'

那麼一般簡單的main.js檔案內容如下所示。

  1. //src/main.js
  2. import Vue from 'vue'
  3. import App from './App.vue'
  4. import BootstrapVue from 'bootstrap-vue'
  5. import 'bootstrap/dist/css/bootstrap.css'
  6. import 'bootstrap-vue/dist/bootstrap-vue.css'
  7.  
  8. Vue.use(BootstrapVue)
  9. Vue.config.productionTip = false
  10.  
  11. new Vue({
  12.   render: h => h(App),
  13. }).$mount('#app')

如果我們專案中使用了其他元件模組，那麼這些可能會有所不同。

2、BootstrapVue的元件使用

學習一項新東西，我們一般先了解一下相關的文件。

GitHub庫的地址：https://github.com/topics/bootstrapvue

BootstrapVue的官網地址（可能受限無法訪問）：https://bootstrap-vue.js.org/

BootstrapVue的中文網站地址如下： https://code.z01.com/bootstrap-vue/

通過在Vue專案中引入對應的 BootstrapVue，那麼它的相關元件使用就參考官網的介紹瞭解即可。BootstrapVue中有很多和Bootstrap一樣的元件，不過標籤字首需要加上b-

例如對於常用的按鈕介面程式碼處理，如下所示。

  1. <div>
  2.   <b-button>Button</b-button>
  3.   <b-button variant="danger">Button</b-button>
  4.   <b-button variant="success">Button</b-button>
  5.   <b-button variant="outline-primary">Button</b-button>
  6. </div>

介面如下所示，很有Bootstrap的風格！我們可以看到原先Bootstrap上的html的button加多了一個字首b-,變為了b-button了。

卡片Card控制元件使用程式碼如下所示

  1. <div>
  2.   <b-card
  3.     title="Card Title"
  4.     img-src="https://picsum.photos/600/300/?image=25"
  5.     img-alt="Image"
  6.     img-top
  7.     tag="article"
  8.     style="max-width: 20rem;"
  9.     class="mb-2"
  10.   >
  11.     <b-card-text>
  12.       Some quick example text to build on the card title and make up the bulk of the card's content.
  13.     </b-card-text>
  14.  
  15.     <b-button href="#" variant="primary">Go somewhere</b-button>
  16.   </b-card>
  17. </div>

其中類class中的mb-2就是邊距的定義，參考說明如下所示。

另外可能還有接觸到 p-2,pt-2,py-2,px-2 等類似的定義，後面小節再行說明。

另外Flex的佈局也需瞭解下。

  1.       <div class="bg-light mb-3">
  2.         <div class="d-flex justify-content-start bg-secondary mb-3">
  3.           <div class="p-2">Flex item 1</div>
  4.           <div class="p-2">Flex item 2</div>
  5.           <div class="p-2">Flex item 3</div>
  6.         </div>
  7.         <div class="d-flex justify-content-end bg-secondary mb-3">
  8.           <div class="p-2">Flex item 1</div>
  9.           <div class="p-2">Flex item 2</div>
  10.           <div class="p-2">Flex item 3</div>
  11.         </div>
  12.         <div class="d-flex justify-content-center bg-secondary mb-3">
  13.           <div class="p-2">Flex item 1</div>
  14.           <div class="p-2">Flex item 2</div>
  15.           <div class="p-2">Flex item 3</div>
  16.         </div>
  17.         <div class="d-flex justify-content-between bg-secondary mb-3">
  18.           <div class="p-2">Flex item 1</div>
  19.           <div class="p-2">Flex item 2</div>
  20.           <div class="p-2">Flex item 3</div>
  21.         </div>
  22.         <div class="d-flex justify-content-around bg-light mb-3">
  23.           <div class="p-2">Flex item 1</div>
  24.           <div class="p-2">Flex item 2</div>
  25.           <div class="p-2">Flex item 3</div>
  26.         </div>
  27.       </div>

介面效果如下所示。

我們來一個展示柵格的例子，顯示卡片中圖片，文字等資訊。

  1.     <b-container>
  2.       <div v-if="list.length">
  3.         <b-row>
  4.           <template v-for="data in list">
  5.             <b-col sm="4" v-bind:key="data.index">
  6.               <b-card v-bind:title="data.strCategory" v-bind:img-src="data.strCategoryThumb" img-alt="Image" img-top tag="article" style="max-width: 20rem;" class="mb-2">
  7.                 <b-card-text>{{ `${data.strCategoryDescription.slice(0,100)}...` }}</b-card-text>
  8.                 <b-button href="#" variant="primary">View food</b-button>
  9.               </b-card>
  10.             </b-col>
  11.           </template>
  12.         </b-row>
  13.       </div>
  14.       <div v-else>
  15.         <h5>No meals available yet </h5>
  16.       </div>
  17.     </b-container>

整體介面效果如下所示

3、BootstrapVue的相關介紹

BootstrapVue的很多概念還是和Bootstrap的類似，畢竟Bootstrap的CSS已經是標準的了。不過我們需要了解相關的佈局、顏色、類定義等資訊，以確認他們之間的一些差異。

主題色彩

Bootstrap v4.4 SCSS中定義的預設顏色如下，所有主題顏色將自動作為所有BootstrapVue元件的color 變數提供。

顏色變數

 元件Size屬性

 間距處理

影響元素之間的間距是可以通過style的margin或padding屬性來實現，但這兩個屬性本意並不相同；margin影響的是本元素與相鄰外界元素之間的距離，這裡簡稱外邊距；padding影響的元素本身與其內部子元素之間的距離，簡稱為內填充。

bootstrap4提供了簡寫的class名，名稱分別以m-開頭和p-開頭的類。

一、影響距離大小的值有

0,1,2,3,4,5,auto

(1)、margin值有

class名

等價的style

m-0

等價於{margin:0 !important}

m-1

等價於{margin:0.25rem !important}

m-2

等價於{margin:0.5rem !important}

m-3

等價於{margin:1rem !important}

m-4

等價於{margin:1.5rem !important}

m-5

等價於{margin:3rem !important}

m-auto

等價於{margin:auto !important}

(2)、padding值有

class名

等價的style

p-0

等價於{padding:0 !important}

p-1

等價於{padding:0.25rem !important}

p-2

等價於{padding:0.5rem !important}

p-3

等價於{padding:1rem !important}

p-4

等價於{padding:1.5rem !important}

p-5

等價於{padding:3rem !important}

p-auto

等價於{padding:auto !important}

二、調整某一側的邊距

有幾個縮寫,t,b,l,r,x,y含義分別是top,bottom,left,right,left和right,top和bottom

（1）margin例子，距離大小可以0-5與auto,這裡只用期中一個值來說明含義

class名

等價的style

mt-2

{margin-top: 0.5rem !important}

mb-2

{margin-bottom: 0.5rem !important}

ml-2

{margin-left: 0.5rem !important}

mr-2

{margin-right: 0.5rem !important}

mx-2

{margin-right: 0.5rem !important;margin-left: 0.5rem !important}

my-2

{margin-top: 0.5rem !important;margin-bottom: 0.5rem !important}

(2)padding例子

class名

等價的style

pt-2

{padding-top: 0.5rem !important}

pb-2

{padding-bottom: 0.5rem !important}

pl-2

{padding-left: 0.5rem !important}

pr-2

{padding-right: 0.5rem !important}

px-2

{padding-right: 0.5rem !important;margin-left: 0.5rem !important}

py-2

{padding-top: 0.5rem !important;margin-bottom: 0.5rem !important}