回報問題編輯此頁面

開始使用

使用 BootstrapVue 入門，基礎來自全球最熱門的框架 - Bootstrap v4，使用 Vue.js 構建回應式、行動裝置優先的網站。

  • Vue.js v2.6 為必備，推薦使用 v2.6.12
  • Bootstrap v4.3.1 為必備，推薦使用 v4.6.1
  • Popper.js v1.16 必需用於捲動式功能表 (以及基於捲動式功能表的組件)，工具提示和提示視窗。推薦使用 v1.16.1
  • PortalVue v2.1 必需用於 快閃，推薦使用 v2.1.7
  • jQuery 不需要

查看 BootstrapVue 發佈版 v2.23.0 的新功能。

如果您從先前的 v2.0.0-rc.## 版本移轉，請參閱 v2.0.0 移轉指南。

文件章節

線上文件包含

  • 元件 - 元件和元件外掛程式的文件
  • 指令 - 指令和指令外掛程式的文件
  • 圖示 - 圖示和圖示外掛程式的文件 v2.2.0+
  • 參考 - 參考資訊和文件
  • 遊樂場 - 線上遊樂場
  • 佈景主題 - 佈景主題和資訊面板

先備知識

本 BootstrapVue 文件假設您熟悉 Vue 和 Bootstrap v4 CSS。認識這些的良好起點

文件資訊

在 BootstrapVue 的文件所舉出的許多範例中，您可能會看到 CSS 類別的使用，例如 ml-2、py-1 等。這些是 Bootstrap v4.6 的公用程式類別，有助於控制內邊距、外邊距、定位等。您可以在 公用程式類別 參考章節中找到這些類別的資訊。

本文件中的許多範例是即時的，可以在文件裡直接編輯以增進學習體驗（注意，由於 <template> 區段中使用了 ES6 JavaScript 程式碼，有些範例可能無法在 IE 11 中使用）。

BootstrapVue 也提供了一個 互動式遊樂場，讓您可以實驗各種元件，並將結果匯出到 JSFiddle、CodePen 和/或 CodeSandbox。

重要的 HTML 全域變數

Bootstrap v4 CSS 使用少數重要的全域樣式和設定，使用時需要了解，這些設定幾乎完全針對跨瀏覽器樣式標準化。有關詳細資訊，請參閱以下小節。

HTML5 文件類型

Bootstrap 要求使用 HTML5 文件類型。如果不使用，您可能會看到一些奇怪的不完整樣式。

<!doctype html>
<html lang="en">
  ...
</html>

響應式 meta 標籤

Bootstrap 首先針對行動裝置進行最佳化，再依需要使用 CSS 媒體查詢縮放元件。為確保所有裝置都正確顯示及可進行觸控縮放，請將 響應式視窗 meta 標籤新增到您的 <head>。

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

CSS 盒子大小調整

為了在 CSS 中進行更簡潔的調整，全域 box-sizing 值從 content-box 變更為 border-box。這能確保 padding 不會影響元素的最終預算寬度，但可能會導致某些第三方軟體（例如 Google 地圖和 Google 自訂搜尋引擎）出現問題。

在極少數需要覆寫它的時候，請使用類似以下的方法

.selector-for-some-widget {
  box-sizing: content-box;
}

使用上述程式碼片段，嵌套元素（包括透過 ::before 和 ::after 產生的內容）都將繼承對該 .selector-for-some-widget 指定的 box-sizing。

深入了解 CSS Tricks 中的盒子模型與調整。

重設樣式

為了改善跨瀏覽器顯示效果，Bootstrap v4.6 使用 Reboot 來修正瀏覽器和裝置間的不一致，同時也提供對常見 HTML 元素較見解的重設。

使用模組打包器

您很可能正在使用模組打包器，例如 Webpack、Parcel 或 rollup.js，這能讓您更輕鬆地將套件直接納入您的專案。為此，請使用 npm 或 yarn 來取得 Vue.js、Bootstrap v4 和 BootstrapVue 的最新版本

# With npm
npm install vue bootstrap bootstrap-vue

# With yarn
yarn add vue bootstrap bootstrap-vue

然後，在您的應用程式進入點（通常為 app.js 或 main.js）註冊 BootstrapVue

import Vue from 'vue'
import { BootstrapVue, IconsPlugin } from 'bootstrap-vue'

// Import Bootstrap and BootstrapVue CSS files (order is important)
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'

// Make BootstrapVue available throughout your project
Vue.use(BootstrapVue)
// Optionally install the BootstrapVue icon components plugin
Vue.use(IconsPlugin)

套用 Bootstrap 主題

如果您想要變更 Bootstrap 的預設樣式（例如 $body-color），您必須使用 Bootstrap 和 BootstrapVue 的 scss 檔案。

建立您自己的 scss 檔案（例如 app.scss），內含 您的自訂定義 以及 最後的 2 個 @import

// Define variable defaults
$body-bg: #000;
$body-color: #111;

// Then import Bootstrap and BootstrapVue SCSS files (order is important)
@import 'node_modules/bootstrap/scss/bootstrap.scss';
@import 'node_modules/bootstrap-vue/src/index.scss';

然後，將那一個 scss 檔案匯入您的專案

import Vue from 'vue'
import { BootstrapVue } from 'bootstrap-vue'

import './app.scss'

Vue.use(BootstrapVue)

不要將個別的 SCSS 檔案個別匯入至你的專案中，因為變數和函式將無法在檔案之間共用。

關於 Bootstrap 主題化的資訊，請查看 主題化 參考區段。

設定 Vue 匯入別名

BootstrapVue 與 PortalVue 需要存取共用的 Vue 參考（透過 import Vue from 'vue'）。

如果你使用特定的 Vue 組建（例如僅執行時期相對於編譯器 + 執行時期），你將需要在捆綁器設定中設定一個別名至 'vue'，以確保專案、BootstrapVue 與 PortalVue 使用同一版本的 Vue。如果你看到類似 "$attr and $listeners is readonly" 或 "Multiple instances of Vue detected" 的錯誤，那麼你將需要設定一個別名。

範例：Vue CLI 中的 Vue 別名，位於 vue.config.js

const path = require('path')

module.exports = {
  chainWebpack: config => {
    config.resolve.alias.set(
      'vue$',
      // If using the runtime only build
      path.resolve(__dirname, 'node_modules/vue/dist/vue.runtime.esm.js')
      // Or if using full build of Vue (runtime + compiler)
      // path.resolve(__dirname, 'node_modules/vue/dist/vue.esm.js')
    )
  }
}

範例：webpack.config.js 中的 Vue 別名

module.exports = {
  // ...
  resolve: {
    alias: {
      // If using the runtime only build
      vue$: 'vue/dist/vue.runtime.esm.js' // 'vue/dist/vue.runtime.common.js' for webpack 1
      // Or if using full build of Vue (runtime + compiler)
      // vue$: 'vue/dist/vue.esm.js'      // 'vue/dist/vue.common.js' for webpack 1
    }
  }
}

注意：如果專案有多個 webpack 設定檔案（例如 webpack.config.js、webpack.renderer.config.js、webpack.vendor.config.js、webpack.server.config.js、webpack.client.config.js 等），你將需要在全部設定檔中設定對應的別名。

關於設定別名的完整詳情，請參閱 Vue.js 指南，內含設定 webpack、rollup.js、Parcel 等的別名。

進階模組捆綁器用法

Webpack 和 Parcel 支援在從 scss 檔案匯入時，在 scss 模組前加上波浪符號路徑 (~)。

// Webpack example
@import '~bootstrap';
@import '~bootstrap-vue';
// Parcel example
@import '~bootstrap/scss/bootstrap.scss';
@import '~bootstrap-vue/src/index.scss';

關於如何組態 asset 讀取以及模組如何解析的更詳細資訊，請諮詢模組捆綁器的文件。

注意事項:

使用模組捆綁器進行 tree shaking

使用模組組建程序時，可以選擇性地僅載入特定組件群組（外掛程式）、組件和/或指令。請注意，樹狀搖晃僅適用於 JavaScript 程式碼，而不適用於 CSS/SCSS。

注意事項：最佳樹狀搖晃僅在 webpack 4 處於 production 模式且已啟用 javascript 最小化時才有效。

以 Vue 外掛程式形式呈現的組件群組和指令

您可以透過從 bootstrap-vue

// This imports all the layout components such as <b-container>, <b-row>, <b-col>:
import { LayoutPlugin } from 'bootstrap-vue'
Vue.use(LayoutPlugin)

// This imports <b-modal> as well as the v-b-modal directive as a plugin:
import { ModalPlugin } from 'bootstrap-vue'
Vue.use(ModalPlugin)

// This imports <b-card> along with all the <b-card-*> sub-components as a plugin:
import { CardPlugin } from 'bootstrap-vue'
Vue.use(CardPlugin)

// This imports directive v-b-scrollspy as a plugin:
import { VBScrollspyPlugin } from 'bootstrap-vue'
Vue.use(VBScrollspyPlugin)

// This imports the dropdown and table plugins
import { DropdownPlugin, TablePlugin } from 'bootstrap-vue'
Vue.use(DropdownPlugin)
Vue.use(TablePlugin)

以外掛程式形式載入時，大多數情況下都將載入所有子組件和相關指令。即載入 <b-nav> 時，所有 <nav-*> 子組件也會包含在內，此外還包括所有下拉子組件。組件簡寫別名（如有）也包含在外掛程式中。請參閱組件和指令文件取得詳細資訊。

還有兩個用於提供 $bvModal 和 $bvToast 注入的附加輔助外掛程式（如果您未在 ModalPlugin 或 ToastPlugin 外掛程式中使用），可從 'bootstrap-vue'

載入多個組件群組和/或指令群組外掛程式時，請在單一 import 陳述式中加入所有載入，以進行最佳樹狀搖晃。

個別組件和指令

如果您只想提取特定組件或一組組件，可以透過直接載入這些組件來執行此操作。

要挑選組件/指令，首先在使用該組件/指令的檔案中載入該組件/指令

// Place all imports from 'bootstrap-vue' in a single import
// statement for optimal bundle sizes
import { BModal, VBModal } from 'bootstrap-vue'

然後將其加入組件定義中

Vue.component('MyComponent', {
  components: { BModal },
  // Note that Vue automatically prefixes directive names with `v-`
  directives: { 'b-modal': VBModal }
  // ...
})

或在全球註冊這些組件/指令

Vue.component('BModal', BModal)
// Note that Vue automatically prefixes directive names with `v-`
Vue.directive('b-modal', VBModal)

Vue 允許使用各種組件和指令名稱語法，因此請隨時使用 kebab-casing（所示）、camelCasing、PascalCasing 和/或物件屬性簡寫（僅限組件）。

使用 BootstrapVue 原始程式碼建立較小的套件

在使用模塊打包器時，它們通常會預設使用 esm/ 模組化建置，這是 Babel 為我們的 支援的瀏覽器 預先轉譯過。

你可以透過在模塊打包器設定檔中將 'bootstrap-vue' 的別名設定為使用 BootstrapVue 原始檔案，並將 node_modules/bootstrap-vue/src/* 加入白名單，讓建置流程轉譯，來覆寫 esm/ 建置的使用。這樣可以針對目標瀏覽器/環境轉譯 BootstrapVue，並潛在減少套件大小 (而且只會包含 Babel 輔助工具函式庫一次)，代價是建置時間稍微變長。

Babel 轉譯的 webpack.config.js 範例

module.exports = {
  resolve: {
    alias: {
      // Alias for using source of BootstrapVue
      'bootstrap-vue$': 'bootstrap-vue/src/index.js'
    }
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        // Exclude transpiling `node_modules`, except `bootstrap-vue/src`
        exclude: /node_modules\/(?!bootstrap-vue\/src\/)/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['env']
          }
        }
      }
    ]
  }
}

你可能需要安裝 babel-core、babel-loader 和 babel-preset-env

# If using npm
npm install babel-core babel-loader babel-preset-env --save-dev

# If using yarn
yarn add babel-core babel-loader babel-preset-env --dev

更多詳細資訊請參閱

Nuxt.js 模組

BootstrapVue 提供了一個 Nuxt.js 模組，可以輕鬆將 BootstrapVue (或 BootstrapVue 的一部分) 匯入到你的 Nuxt.js 應用程式。

Nuxt.js 入門

建議使用 Nuxt.js 2.15.8 (或更新的版本)。

安裝相依套件

# With npm
npm install bootstrap-vue

# With yarn
yarn add bootstrap-vue

在你的 nuxt.config.js 檔案的模組區段中，加入 bootstrap-vue/nuxt。

這將包含 bootstrap.css 和 bootstrap-vue.css 預先編譯的預設 CSS。

module.exports = {
  modules: ['bootstrap-vue/nuxt']
}

請注意，這不會安裝圖示元件。若要了解如何透過 Nuxt.js 模組包含圖示，請參閱下面的 圖示區段。

使用自訂 Bootstrap SCSS

如果你使用自訂 Bootstrap SCSS，你可以透過將下列選項設定為 false 來停用自動包含 Bootstrap 和 BootstrapVue 的預編譯 CSS 檔案

module.exports = {
  modules: ['bootstrap-vue/nuxt'],
  bootstrapVue: {
    bootstrapCSS: false, // Or `css: false`
    bootstrapVueCSS: false // Or `bvCSS: false`
  }
}

BootstrapVue 的自訂 SCSS 依賴於 Bootstrap SCSS 變數和mixin，以及你可能設定的任何變數覆寫。你可以在專案的自訂 SCSS 檔案中包含 Bootstrap 和 BootstrapVue SCSS

// Custom Bootstrap variable overrides go first
$grid-breakpoints: (
  xs: 0,
  sm: 480px,
  md: 640px,
  lg: 992px,
  xl: 1300px
);
$enable-rounded: false;

// Then include the following
@import 'bootstrap/scss/bootstrap.scss';
@import 'bootstrap-vue/src/index.scss';

// And define any of your custom or additional CSS/SCSS here,
// or via an @import

在應用程式的 main 進入點中，包含單一的自訂 SCSS 檔 (在使用 sass-loader 時)

import 'custom.scss'

Nuxt.js 的 transformAssetUrls

BootstrapVue Nuxt 外掛程式模組會自動新增 BootstrapVue 特別的 transformAssetUrls 圖片 src 道具設定給您。

透過 Nuxt.js 進行樹狀搖晃

如果你想減少你的生產環境套件大小，是因為你只使用 BootstrapVue 外掛程式中的一部分，你可以設定 BootstrapVue componentPlugins 或 directivePlugins 的清單，你可以在 Nuxt.js 專案中安裝它們。請注意，樹狀搖晃只適用於 JavaScript 程式碼，而不適用於 CSS/SCSS。

module.exports = {
  modules: ['bootstrap-vue/nuxt'],
  bootstrapVue: {
    componentPlugins: [
      'LayoutPlugin',
      'FormPlugin',
      'FormCheckboxPlugin',
      'FormInputPlugin',
      'FormRadioPlugin',
      'ToastPlugin',
      'ModalPlugin'
    ],
    directivePlugins: ['VBPopoverPlugin', 'VBTooltipPlugin', 'VBScrollspyPlugin']
  }
}

提供 $bvModal 和 $bvToast 注入使用的兩個其他輔助外掛程式（如果你沒有使用 ModalPlugin 或 ToastPlugin 外掛程式），它們在 componentPlugins 選項中

你也可以選擇性地導入個別組件或指令，方法是設定 BootstrapVue components 或 directives 清單，你可以安裝它們到 Nuxt.js 專案中。

module.exports = {
  modules: ['bootstrap-vue/nuxt'],
  bootstrapVue: {
    components: ['BContainer', 'BRow', 'BCol', 'BFormInput', 'BButton', 'BTable', 'BModal'],
    directives: ['VBModal', 'VBPopover', 'VBTooltip', 'VBScrollspy']
  }
}

你可以自由搭配外掛程式導入和個別組件和指令導入。

請參閱每個 元件 和 指令 文件最底部的參考部分，以取得關於可用的外掛程式名稱（以及各個外掛程式包含哪些元件和指令）、元件和指令輸入名稱的詳細資訊。

請注意，當導入個別元件時，任何元件別名將不會可用。

附註： 最佳的樹狀搖晃僅在你的 Nuxt.js 應用程式處於 production 模式時運作。你可能會在不在 production 模式（例如 dev 模式）時注意到較大的套件大小。

如果你想把個別 BootstrapVue 元件導入到你 Nuxt 應用程式的特定頁面或元件中，你可以繞過 Nuxt.js 模組，改為追隨上方的 模組打包器 部分和 透過模組打包器進行樹狀搖晃 區段。或者你可能只需要在 Nuxt.js 模組設定中導入少數外掛程式（例如 LayoutPlugin），然後再導入其他元件或外掛程式到需要的地方。

圖示

當使用 Nuxt.js 模組時，圖示外掛程式 並非 自動安裝。你必須明確啟用 IconsPlugin，或指定你想導入哪些圖示元件。

所有圖示

module.exports = {
  modules: ['bootstrap-vue/nuxt'],
  bootstrapVue: {
    // Install the `IconsPlugin` plugin (in addition to `BootstrapVue` plugin)
    icons: true
  }
}

特定圖示

module.exports = {
  modules: ['bootstrap-vue/nuxt'],
  bootstrapVue: {
    // Add the desired icon components to the `components` array
    components: ['BIcon', 'BIconAlertFill', 'BIconCalendar', 'BIconGears']
  }
}

圖示外掛程式

module.exports = {
  modules: ['bootstrap-vue/nuxt'],
  bootstrapVue: {
    // Add the icon plugin to the `componentsPlugins` array
    componentPlugins: ['IconsPlugin']
  }
}

使用 Nuxt.js 傳遞自訂 BootstrapVue 組態

如果你需要傳遞自訂的 BootstrapVue 組態，你可以透過設定 nuxt.config.js 中的 config 屬性來達成

module.exports = {
  modules: ['bootstrap-vue/nuxt'],
  bootstrapVue: {
    config: {
      // Custom config options here
    }
  }
}

使用預先轉譯版的 BootstrapVue 來執行 Nuxt.js

Nuxt.js 模組使用預先轉譯版的 BootstrapVue 來加快開發的建置速度，並使用 BootstrapVue 的來源碼 (src/) 來提高成品建置的品質並縮小成品建置的檔案大小。

你可以使用 usePretranspiled 選項來覆寫這個選項。設定為 true 會一直使用預先轉譯的版本，而設定為 false 則會一直使用 src/。預設情況下，usePretranspiled 僅在開發模式下啟用。你不需要使用這個選項，因為預設值對於效能來說是最合適的。

Vue CLI 3

與 V2 不同的是，Vue CLI 3 不使用範本。

在 my-project 目錄中建立一個新的專案

npx @vue/cli create my-project

進入 my-project 目錄並安裝 bootstrap-vue

npm install bootstrap-vue

Vue CLI 預設使用 webpack，所以我們可以按照 webpack 的說明來註冊 BootstrapVue 外掛。

import Vue from 'vue'
import { BootstrapVue, BootstrapVueIcons } from 'bootstrap-vue'

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

Vue.use(BootstrapVue)
Vue.use(BootstrapVueIcons)

如需進一步設定 Vue CLI 3，以在各種 BootstrapVue 元件上使用專案相對路徑作為影像 src 屬性，請參閱 影像 src 路徑解析 參照頁面中的 Vue CLI 3 小節。

Vue CLI 3 外掛

或者，你可以使用 Bootstrap-Vue Vue CLI 3 外掛 來協助你設定你的應用程式。

vue create my-app
cd my-app
vue add bootstrap-vue

這會建立一個具有基本 BootstrapVue 設定的新應用程式，以便於開始你的專案。

未來，這個外掛將提供更多進階設定和範本的選項。

對於圖示支援，你可能需要編輯產生的組態檔。

瀏覽器

如果你沒有使用模組打包器或編譯程序，你可以在你的 HTML <head> 區段中加入 Bootstrap 和 BootstrapVue CSS 的 URL，接著是必要的 JavaScript 檔案。

當支援較舊的瀏覽器時（請參閱下方的 瀏覽器支援），你將需要在載入 Vue 和 BootstrapVue JavaScrip 檔案之前，包含一個 polyfill 來處理現代 JavaScript 功能。

<!-- Add this to <head> -->

<!-- Load required Bootstrap and BootstrapVue CSS -->
<link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap/dist/css/bootstrap.min.css" />
<link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.min.css" />

<!-- Load polyfills to support older browsers -->
<script src="https://polyfill.io/v3/polyfill.min.js?features=es2015%2CIntersectionObserver" crossorigin="anonymous"></script>

<!-- Load Vue followed by BootstrapVue -->
<script src="https://unpkg.com/vue@latest/dist/vue.min.js"></script>
<script src="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.min.js"></script>

<!-- Load the following for BootstrapVueIcons support -->
<script src="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue-icons.min.js"></script>

建置變體

選擇最適合你的建置環境/套件管理員，有助於減少套件大小。若你的套件管理員支援 esm 模組，系統會自動優先選擇它而非 commonjs。

模組 環境 樹狀搖動 套件路徑
ESM 模組 webpack 2+/rollup.js 是 esm/index.js
ESM 套件 webpack 2+/rollup.js 是 dist/bootstrap-vue.esm.js
commonjs2 webpack 1/... 否 dist/bootstrap-vue.common.js 或 dist/bootstrap-vue.common.min.js
UMD 瀏覽器 否 dist/bootstrap-vue.js 或 dist/bootstrap-vue.min.js

請注意 UMD（瀏覽器）模組不支援BootstrapVue icons。上面所列的所有其他模組都包含BootstrapVueIcons (IconsPlugin) 外掛（請注意，系統不會自動安裝 icons 外掛，必須透過 Vue.use() 明確安裝。請參閱 Icons 使用方式 部分以取得更多詳細資訊。

只有 icons 的模組

模組 環境 樹狀搖動 套件路徑
ESM 套件 webpack 2+/rollup.js 是 dist/bootstrap-vue-icons.esm.js
commonjs2 webpack 1/... 否 dist/bootstrap-vue-icons.common.js 或 dist/bootstrap-vue-icons.common.min.js
UMD 瀏覽器 否 dist/bootstrap-vue-icons.js 或 dist/bootstrap-vue-icons.min.js

ESM 模組建置和 ESM 套件（單一檔案）可使用 樹狀搖動，但使用 ESM 模組時，最終套件大小將會比較小，與 ESM 套件相較為。

上方的所有建置模組變體都已針對 BootstrapVue 支援的 瀏覽器進行預先轉譯。但是，如果你只鎖定較新的瀏覽器，你可能需要從 src/index.js（將 bootstrap-vue 別名設為 bootstrap-vue/src/index.js）匯入 BootstrapVue，並且將 bootstrap-vue/src 加入白名單，以便使用你的專案進行轉譯。這可以潛在地減少最終專案套件大小。請參閱上述 使用 BootstrapVue 源碼獲得較小的套件 部分以取得更多詳細資訊。

相依性

BootstrapVue 依賴 Popper.js（用於浮動提示、彈出視窗和下拉式選單定位）、PortalVue（用於烤麵包訊息）以及 vue-functional-data-merge（由我們的功能性元件使用）。這三個相依項包含在 BootstrapVue UMD 套件中，而 UMD（瀏覽器）圖示僅套件僅包含 vue-functional-data-merge。其他所有組建都不包含這些相依項。

移轉已使用 Bootstrap 的專案

如果您已使用 Bootstrap v4，可能需要對專案進行一些調整

  • 從頁面腳本或組建管線中移除 bootstrap.js 檔案
  • 如果只有 Bootstrap 依賴 jQuery，您可以安全地將其移除 — BootstrapVue 不會依賴 jQuery
  • 將您的原生 Bootstrap HTML 標記轉換為簡化的 BootstrapVue 自訂元件標記
  • 首先僅轉換為需要 Bootstrap 的 javascript 之互動控制項。

瀏覽器支援

CSS

BootstrapVue 應與 Bootstrap v4.6 CSS/SCSS 搭配使用。請參閱 瀏覽器和裝置，以進一步了解 Bootstrap v4 目前支援的瀏覽器。

JS

BootstrapVue 是使用 Vue.js 編寫的！因此，您專案和打包器所支援的瀏覽器取決於您。

BootstrapVue 使用以下功能和 API

  • ES6（例如 Array.from()、Array.isArray()、Object.assign()、Object.is() 等）
  • Promise
  • MutationObserver
  • IntersectionObserver（選用）

如果您想支援舊版的 IE、Android 和 iOS 裝置瀏覽器，您可能想使用 core-js 和 intersection-observer

npm install core-js regenerator-runtime intersection-observer

然後匯入應用程式主進入點中的多重填補

import 'core-js/stable'
import 'regenerator-runtime/runtime'
import 'intersection-observer' // Optional
import Vue from 'vue'
import BootstrapVue from 'bootstrap-vue'

如果使用已棄用 @babel/polyfill

npm install @babel/polyfill intersection-observer

然後匯入應用程式主進入點中的多重填補

import '@babel/polyfill'
import 'intersection-observer' // Optional
import Vue from 'vue'
import BootstrapVue from 'bootstrap-vue'

或者，使用 Polyfill.io 透過 HTML <head> 區段中的 <script> 標籤，動態提供特定於瀏覽器的內嵌程式碼。有關範例，請參閱上方 瀏覽器 區段。

工具支援

BootstrapVue 提供其他幫助檔案，可供熱門 IDE 編輯器自動完成。

VS Code + Vetur

如果您使用 VS Code 做為您的文字編輯器，BootstrapVue 會透過 dist/vetur-tags.json 和 dist/vetur-attributes.json 檔案提供元件屬性和指令的智能感知自動完成功能。

JetBrains WebStorm（和相容 IDE）

對於 WebStorm 編輯器（或相容的 Web 類型），BootstrapVue 提供 dist/web-types.json 檔案，用於元件屬性和指令的自動完成。