載說明：原創不易，未經授權，謝絕任何形式的轉載
你想輕松地創建令人驚嘆且響應式的在線應用程序嗎？使用BootstrapVue，您可以快速創建美觀且用戶友好的界面。這個開源工具包是基于Vue.js和Bootstrap構建的，非常適合開發現代Web應用程序。本文將介紹其基礎知識，讓您可以開始使用這個強大的框架。
BootstrapVue是一個流行的開源前端框架，它結合了Bootstrap（一個前端UI框架）和vue.js（一個漸進式JavaScript框架），用于創建可重用的UI組件和Web應用程序。
它被設計為高度可定制，允許開發人員輕松修改組件的外觀和行為，以適應其項目的特定需求。它還包括對CSS預處理器（如Sass和Less）的支持，使得定制組件的樣式變得容易。
第一步是創建一個Vue.js項目。這對于您集成BootstrapVue至關重要。通過在終端中運行以下命令來創建一個Vue.js項目。
vue create my-project注意：BootstrapVue目前不支持Vue.js 3的穩定版本。您需要將其與vue2-3遷移構建集成以使其正常工作。然而，由于該方法存在已知限制，不建議這樣做。不過，您可以按照這里的步驟使用vue2-3遷移構建來創建一個新的應用程序。
https://v3-migration.vuejs.org/migration-build.html
然后使用 cd my-project 導航到您的項目目錄。現在可以繼續集成 BootstrapVue。有兩種將 BootstrapVue 集成到您的 Vue.js 項目中的方法：
根據您使用的軟件包管理器運行以下命令之一：
# With npm
npm install bootstrap bootstrap-vue
# With yarn
yarn add bootstrap bootstrap-vue訪問CdnJS網站獲取當前CDN鏈接，然后打開公共文件夾中的 index.html 文件，并添加以下代碼：
<!-- Add Bootstrap and Bootstrap-Vue CSS in the <head> section -->
<link
rel="stylesheet"
href="https://unpkg.com/bootstrap/dist/css/bootstrap.min.css"
/>
<link
rel="stylesheet"
href="https://unpkg.com/bootstrap-vue/dist/bootstrap-vue.min.css"
/>
<!-- Add Vue and BootstrapVue scripts just before the closing </body> tag -->
<script src="https://unpkg.com/vue@2.6.14/dist/vue.min.js"></script>
<script src="https://unpkg.com/bootstrap-vue@2.21.2/dist/bootstrap-vue.min.js"></script>以上代碼將把每個包的最小化和最新版本拉入我們的項目中，干凈簡潔！
對于本文，我們將一直使用軟件包管理器。讓我們繼續設置已安裝的BootstrapVue軟件包。
為了設置Bootstrap和BootstrapVue包，我們剛剛安裝了。在src文件夾中，您會找到 main.js 文件。按照下面的方式導入BootstrapVue及其CSS文件：
import Vue from 'vue'
// Import BootstrapVue
import { BootstrapVue } from 'bootstrap-vue'
// Import Bootstrap and BootstrapVue CSS files ( ensure to follow the order)
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'
// Make BootstrapVue available throughout your project
Vue.use(BootstrapVue)在上面的代碼中，我們使用 Vue.use() 函數在應用程序的入口點注冊了BootstrapVue，以便我們的應用程序可以識別它。
如果你曾經使用過Bootstrap，你就會知道它使用了一些預構建的組件。BootstrapVue也是如此。BootstrapVue組件是專門為Vue.js構建的，使它們更容易使用和集成到你的Vue.js應用程序中。
一些受歡迎的BootstrapVue組件包括按鈕、表單、模態框、工具提示、導航菜單、輪播圖等等。BootstrapVue還包括一些在標準Bootstrap中不可用的獨特組件，例如BTable組件用于創建動態和交互式表格。
BootstrapVue還包括一系列的實用類和混合類，可以進一步定制組件的外觀和行為。這使得創建高度定制和獨特的網站和應用程序成為可能，使其脫穎而出。
讓我們來探索一些基本的BootstrapVue組件，包括按鈕、表單和卡片。
BootstrapVue提供了多種按鈕組件，可用于創建具有不同樣式和功能的不同類型的按鈕。最基本的按鈕組件是 b-button ，可用于創建一個簡單的可點擊按鈕。
這是一個例子：
<template>
<div class="m-5 d-flex justify-content-center">
-<b-button variant="primary">Click me!</b-button>
</div>
</template>;上面的代碼將創建一個帶有文本“點擊我！”的主色按鈕，因為 variant 屬性設置為 primary 。您可以通過指定其他變體值（例如 danger 或 success ）來更改按鈕的顏色和樣式。
BootstrapVue還提供了其他按鈕組件，可用于創建下拉菜單、切換按鈕等等。您可以通過BootstrapVue文檔了解更多關于按鈕組件的信息。
https://bootstrap-vue.org/docs/components/button
BootstrapVue提供了各種表單組件，可用于創建具有不同類型的輸入字段、標簽和驗證的表單。最基本的表單組件是 b-form-input ，可用于創建簡單的文本輸入字段。
這是一個例子：
<template>
<div class="m-5">
<b-form @submit="onSubmit" @reset="onReset" v-if="show">
<b-form-group
id="input-group-1"
label="Email address:"
label-for="input-1"
description="We'll never share your email with anyone else."
>
<b-form-input
id="input-1"
v-model="form.email"
type="email"
placeholder="Enter email"
required
></b-form-input>
</b-form-group>
<b-form-group id="input-group-2" label="Your Name:" label-for="input-2">
<b-form-input
id="input-2"
v-model="form.name"
placeholder="Enter name"
required
></b-form-input>
</b-form-group>
<b-form-group id="input-group-3" label="Food:" label-for="input-3">
<b-form-select
id="input-3"
v-model="form.food"
:options="foods"
required
></b-form-select>
</b-form-group>
<b-form-group id="input-group-4" v-slot="{ ariaDescribedby }">
<b-form-checkbox-group
v-model="form.checked"
id="checkboxes-4"
:aria-describedby="ariaDescribedby"
>
<b-form-checkbox value="me">Check me out</b-form-checkbox>
<b-form-checkbox value="that">Check that out</b-form-checkbox>
</b-form-checkbox-group>
</b-form-group>
<b-button type="submit" variant="primary">Submit</b-button>
<b-button type="reset" variant="danger">Reset</b-button>
</b-form>
</div>
</template>
<script>
export default {
data() {
return {
form: {
email: "",
name: "",
food: null,
checked: [],
},
foods: [
{ text: "Select One", value: null },
"Carrots",
"Beans",
"Tomatoes",
"Corn",
],
show: true,
};
},
methods: {
onSubmit(event) {
event.preventDefault();
alert(JSON.stringify(this.form));
},
onReset(event) {
event.preventDefault();
// Reset our form values
this.form.email = "";
this.form.name = "";
this.form.food = null;
this.form.checked = [];
// Trick to reset/clear native browser form validation state
this.show = false;
this.$nextTick(() => {
this.show = true;
});
},
},
};
</script>上面的代碼將創建一個簡單的表單，請求用戶的電子郵件、姓名和食品選擇。我們可以根據需要隨時自定義此表單。
BootstrapVue提供了其他表單組件，可用于創建單選按鈕、復選框、下拉菜單等。它通過 v-validate 指令、 ValidationProvider 和 ValidationObserver 組件提供表單驗證功能。
BootstrapVue提供了多種卡片組件，可用于樣式化文本、標題和圖像。最基本的卡片組件是 b-card ，可用于顯示圖像、標題和文本。
<template>
<div class="m-5 d-flex justify-content-center">
<b-card
title="Card Title"
img-src="https://images.unsplash.com/photo-1653387137517-fbc54d488ed8?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MjB8fHZ1ZXxlbnwwfHwwfHw%3D&auto=format&fit=crop&w=500&q=60"
img-alt="Image"
img-top
tag="article"
style="max-width: 20rem"
class="mb-2"
>
<b-card-text>
You can add some text in your card to suit your use case
</b-card-text>
<b-button href="#" variant="primary">Go somewhere</b-button>
</b-card>
</div>
</template>上面的代碼將使用 b-card 組件創建一個帶有圖像、標題和一些文本的卡片組件。
BootstrapVue提供了其他的卡片組件，可以用來創建標題、段落、列表等等。BootstrapVue還提供了一個用于卡片相關樣式的實用類系統，您可以應用常見的樣式，如文本顏色、字體粗細和文本對齊。
模態框是在當前頁面上顯示內容的一種流行方式。BootstrapVue提供了一個組件，可以用來創建具有各種功能的模態框，例如顯示/隱藏模態框、更改其大小和添加自定義內容。
<template>
<div
class="d-flex justify-content-center align-items-center"
style="height: 100vh"
>
<b-button variant="primary" @click="showModal = true">Open Modal</b-button>
<b-modal v-model="showModal" title="My Modal">
<p>Hello, world!</p>
</b-modal>
</div>
</template>
<script>
export default {
data() {
return {
showModal: false,
};
},
};
</script>上面的代碼將創建一個按鈕，當點擊時，將顯示一個帶有標題“我的模態框”和文本“你好，世界！”的模態對話框。
BootstrapVue還提供其他與模態框相關的組件，可用于創建確認對話框、可滾動的模態框等。BootstrapVue還提供了在模態框顯示或隱藏之前和之后觸發操作的事件。
旋轉木馬（幻燈）是一種流行的方式，用于在旋轉的旋轉木馬中顯示一系列圖像或其他內容。BootstrapVue提供了一個組件，可以用于創建具有各種功能的旋轉木馬，例如自動播放、導航控制和指示器。
<template>
<div
class="d-flex justify-content-center align-items-center"
style="height: 100vh"
>
<b-carousel
id="carousel-1"
v-model="slide"
:interval="4000"
controls
indicators
background="#ababab"
img-width="1024"
img-height="480"
style="text-shadow: 1px 1px 2px #333"
@sliding-start="onSlideStart"
@sliding-end="onSlideEnd"
class="w-75"
>
<!-- Text slides with image -->
<b-carousel-slide
caption="Our First slide"
text="A beautiful day in the streets"
img-src="https://picsum.photos/1024/480/?image=57"
></b-carousel-slide>
<!-- Slides with custom text -->
<b-carousel-slide img-src="https://picsum.photos/1024/480/?image=62">
<h1>Welcome to BootstrapVue</h1>
</b-carousel-slide>
<!-- Slides with just an image -->
<b-carousel-slide
text="my text"
img-src="https://picsum.photos/1024/480/?image=64"
></b-carousel-slide>
<!-- Slides with img slot -->
<!-- Note the classes .d-block and .img-fluid to prevent browser default image alignment -->
<b-carousel-slide>
<template #img>
<img
class="d-block img-fluid w-100"
width="1024"
height="480"
src="https://picsum.photos/1024/480/?image=50"
alt="image slot"
/>
</template>
</b-carousel-slide>
</b-carousel>
</div>
</template>這段代碼將創建一個輪播，其中包含三個幻燈片，每個幻燈片都包含一張圖片和一個標題。BootstrapVue還提供了其他與輪播相關的組件，可以用于創建幻燈片轉換、淡入淡出轉換，并提供事件，可以在每個幻燈片顯示之前和之后觸發操作。
工具提示是一種流行的方式，當用戶懸停在元素上時，可以顯示附加信息。BootstrapVue提供了一個 b-tooltip 組件，可用于創建具有各種功能的工具提示，例如更改位置、添加自定義內容以及控制何時顯示工具提示。
<template>
<div
class="d-flex justify-content-center align-items-center"
style="height: 100vh"
>
<b-button variant="primary" v-b-tooltip.hover.top="'Hello, world!'"
>Hover me!</b-button
>
</div>
</template>這段代碼將創建一個按鈕，當鼠標懸停在上面時，將顯示一個帶有文本“Hello, world!”的工具提示。
BootstrapVue還提供了其他與工具提示相關的組件，可以用于創建帶有HTML內容的工具提示，以編程方式顯示/隱藏工具提示等。
自定義BootstrapVue組件可以讓您根據特定需求調整組件的外觀和行為。現在，讓我們使用示例來學習如何自定義兩個BootstrapVue組件：按鈕和模態框。
BootstrapVue為按鈕提供了許多自定義選項，例如更改大小、顏色和形狀，以及添加自定義類或樣式。
這是一個使用BootstrapVue類來改變按鈕顏色和形狀的示例：
<template>
<div class="m-5">
<b-button variant="primary" class="rounded-pill"
>Primary Pill Button</b-button
>
<b-button variant="danger" class="rounded-0">Danger Square Button</b-button>
</div>
</template>這段代碼將創建兩個按鈕，一個是主要顏色和圓形形狀的按鈕，另一個是危險顏色和方形形狀的按鈕。 rounded-pill 和 rounded-0 類是 BootstrapVue 類，用于控制按鈕的邊框半徑。
您還可以通過使用 class 或 style 屬性向按鈕添加自定義類或樣式
<template>
<div class="m-5 d-flex justify-content-center">
<b-button
variant="success"
class="my-custom-class"
style="font-size: 1.2rem"
>Customized Button</b-button
>
</div>
</template>這段代碼將創建一個帶有自定義類 my-custom-class 和自定義樣式 font-size: 1.2rem; 的成功按鈕。
BootstrapVue為模態框提供了許多自定義選項，例如更改大小、位置、背景和添加自定義內容或樣式。
這是一個使用BootstrapVue屬性更改模態框大小和位置的示例：
<template>
<div
class="d-flex justify-content-center align-items-center"
style="height: 100vh"
>
<b-button variant="primary" @click="showModal = true">Open Modal</b-button>
<b-modal v-model="showModal" title="My Modal" size="lg" centered>
<p>Hello, world!</p>
</b-modal>
</div>
</template>
<script>
export default {
data() {
return {
showModal: false,
};
},
};
</script>點擊后，此代碼將創建一個按鈕，該按鈕將顯示一個標題為“我的模態框”，文本為“你好，世界！”的模態對話框，具有較大的尺寸和居中位置。
您還可以通過使用插槽或 style 屬性向模態框添加自定義內容或樣式
<template>
<div class="d-flex justify-content-center m-5">
<b-button variant="primary" @click="showModal = true">Open Modal</b-button>
<b-modal v-model="showModal" title="My Modal">
<template #default>
<h2>Custom Heading</h2>
<p>This is some custom content.</p>
</template>
<template #modal-footer="{ ok }">
<b-button @click="ok()">Custom OK Button</b-button>
</template>
<template #modal-body="{ css }">
<p :style="css">This paragraph has custom CSS.</p>
</template>
</b-modal>
</div>
</template>
<script>
export default {
data() {
return {
showModal: false,
};
},
};
</script>這段代碼將創建一個帶有自定義標題和內容、確定按鈕以及帶有自定義 CSS 的段落的模態對話框。
BootstrapVue提供了強大的樣式功能，可以讓您輕松地使用CSS來為組件添加樣式。在本文中，我們將解釋如何使用CSS來為BootstrapVue組件添加樣式。
BootstrapVue組件具有一組默認樣式，您可以輕松自定義。您可以通過向組件添加 class 或 style 屬性來應用樣式：
<template>
<div class="m-5">
<b-button
variant="primary"
class="my-custom-class"
style="background-color: red"
>Custom Button</b-button
>
</div>
</template>在上面的代碼中，我們給按鈕添加了一個自定義的類 my-custom-class 和一個自定義的樣式 background-color: red 。這將把按鈕的背景顏色改為紅色。
BootstrapVue還支持使用Sass和Less等CSS預處理器。使用預處理器可以編寫更強大和模塊化的CSS代碼。要在BootstrapVue中使用預處理器，您只需將預處理器文件包含在項目中，并將其導入到您的代碼中即可：
/* In your main.scss file */
@import "~bootstrap/scss/bootstrap";
@import "~bootstrap-vue/src/index.scss";一旦導入預處理器文件，您可以使用它們的功能來為組件設置樣式。例如，在Sass中，您可以使用變量來定義顏色和其他屬性：
$primary-color: #007bff;
.custom-button {
background-color: $primary-color;
border-radius: 0.25rem;
}在這個例子中，我們定義了一個變量來表示主要顏色，并使用它來為一個自定義類的按鈕進行樣式設置。這將使按鈕具有一個背景顏色為 #007bff （即主要顏色）和一個邊框半徑為 0.25rem 的效果。
有時候你可能想要為一個組件應用樣式，但只想讓這些樣式影響該組件，而不影響頁面上的其他組件。這種情況下，你可以使用作用域樣式，這些樣式只會應用于特定的組件及其子組件。
在BootstrapVue中使用作用域樣式，您可以在組件的 <style> 標簽中添加 scoped 屬性
<template>
<div class="m-5">
<b-button variant="primary" class="my-custom-class m-2"
>Custom Button</b-button
>
<b-button variant="primary">Custom Button</b-button>
<b-button variant="primary">Custom Button</b-button>
</div>
</template>
<style scoped>
.my-custom-class {
background-color: red;
}
</style>
在這個例子中，我們給 <style> 標簽添加了 scoped 屬性，并為 my-custom-class 類定義了樣式。這個樣式只會應用于這個組件中的按鈕，而不會應用于頁面上的其他按鈕。
在本文中，我們介紹了BootstrapVue的基礎知識，包括安裝和設置、配置和使用。我們探討了一些關鍵組件，如按鈕、模態框、工具提示等。
BootstrapVue是一個強大的工具，可以幫助開發人員快速、輕松地創建漂亮、響應式的Web應用程序。無論您是構建一個簡單的網站還是一個復雜的Web應用程序，它都可以幫助您入門，并使構建用戶界面變得更加容易。
由于文章內容篇幅有限，今天的內容就分享到這里，文章結尾，我想提醒您，文章的創作不易，如果您喜歡我的分享，請別忘了點贊和轉發，讓更多有需要的人看到。同時，如果您想獲取更多前端技術的知識，歡迎關注我，您的支持將是我分享最大的動力。我會持續輸出更多內容，敬請期待。
Bootstrap是用于開發響應式和移動優先的網站的CSS框架。Bootstrap增加了一個功能，人們可以使用Bootstrap提供的優質圖標。這些圖標可以用SVG或網頁字體格式。
Bootstrap提供了一千多個高質量的圖標，你可以在你的項目中使用它們。你還可以根據需要改變這些圖標的顏色和大小。
是什么讓Bootstrap框架中的圖標與眾不同，我們為什么要使用它？
<i class="bi-class-name"></i><i>元素是一個容器元素，用于添加Bootstrap圖標。字符串’bi-‘總是附在圖標的類名之前。它指的是Bootstrap圖標。類名基本上是我們正在使用的圖標的類別。Bootstrap為我們提供了許多類別的圖標，如Facebook、Twitter、地球、星星和搜索等。
<!DOCTYPE html>
<html>
<head>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href=
"https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css">
<!--Bootstrap Icons CSS -->
<link rel="stylesheet" href=
"https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css">
</head>
<body class="container">
<h2>Welcome To GFG</h2>
<p>
The below button is using the bi-search
class to display the search icon.
</p>
<!-- We made a button on which Bootstrap
icon of 'search' class present -->
<button type="submit" class="btn btn-primary">
<span class="bi-search"></span>
Search
</button>
</body>
</html>Bootstrap 圖標庫 已被發布到了 npm，但是仍然可以手動下載并安裝。
通過 npm 安裝 Bootstrap 圖標庫，包括 SVG 圖片、sprite 圖標和圖標字體。
npm i bootstrap-iconsGitHub 上有所有已發布的版本，并且在壓縮包內包含了所有 SVG 格式的圖標、許可證和 readme 文件。package.json 文件也被包含在內，不過這些 npm 腳本主要用于我們的開發流程。
利用我們提供的公共 CDN 服務并將圖標字體的樣式表添加到網站的 <head> 標簽內（或通過 CSS 的 @import 指令加載）就能立即使用 Bootstrap 圖標庫了。
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.2/font/bootstrap-icons.css">@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.2/font/bootstrap-icons.css");Bootstrap 圖標庫的所有圖標都是 SVG 格式的，因此你可以通過以下幾種方式將它們添加到你的 HTML 中，具體使用哪種方式取決于你的項目是如何設置的。我們建議設置 width: 1em（以及可選的 height: 1em），便于你通過 font-size 屬性重置圖標的大小。
將圖標嵌入你的 HTML 頁面中（與引用外部圖像文件相反）。如下例子中我們對 width 和 height 屬性進行了重新設置。
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="currentColor" class="bi bi-chevron-right" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z"/></svg>利用 SVG sprite 和 <use> 元素即可插入任何圖標。使用圖標的文件名作為片段標識符（例如 toggles 就是 #toggles）。SVG sprites 允許你像 <img> 元素一樣引用外部文件，并支持 currentColor 的功能以便主題化。
注意！ 在 chrome 瀏覽器中，<use> 不能跨域使用。
<svg class="bi" width="32" height="32" fill="currentColor">
<use xlink:href="bootstrap-icons.svg#heart-fill"/>
</svg>
<svg class="bi" width="32" height="32" fill="currentColor">
<use xlink:href="bootstrap-icons.svg#toggles"/>
</svg>
<svg class="bi" width="32" height="32" fill="currentColor">
<use xlink:href="bootstrap-icons.svg#shop"/>
</svg>將 Bootstrap 圖標庫 的 SVG 文件復制到你所選擇的目錄中，并像引用普通圖片一樣通過 <img> 元素引入 SVG 圖標。
<img src="/assets/img/bootstrap.svg" alt="Bootstrap" width="32" height="32">Bootstrap 圖標庫還提供了圖標字體文件，并且包括了每個圖標及其對應 class 名稱。通過在頁面中引入圖標字體文件，然后根據需要為 HTML 標簽添加對應的 class 名稱即可（例如 <i class="bi-alarm-clock"></i>）。
使用 font-size 和 color 樣式屬性可以更改圖標的外觀。
<i class="bi-alarm"></i>
<i class="bi-alarm" style="font-size: 2rem; color: cornflowerblue;"></i>你還可以在 CSS 中使用 SVG 圖標（當指定十六進制顏色值時 務必對某些字符進行轉義，例如將 # 字符替換為 %23）。如果未指定 <svg> 元素的 width 和 height 屬性，則圖標將填滿所有可用空間。
如果需要使用 background-size 來調整圖標的大小，則必須設置 viewBox 屬性。請注意，xmlns 屬性是必需的。
.bi::before {
display: inline-block;
content: "";
vertical-align: -.125em;
background-image: url("data:image/svg+xml,<svg viewBox='0 0 16 16' fill='%23333' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' d='M8 9.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3z' clip-rule='evenodd'/></svg>");
background-repeat: no-repeat;
background-size: 1rem 1rem;
}可以通過設置 .text-* 類或自定義 CSS 來改變顏色
<svg class="bi bi-exclamation-triangle text-success" width="32" height="32" fill="currentColor" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
...
</svg>對與純裝飾性圖標，請添加 aria-hidden="true" 屬性。否則，請提供適當的替代性文本。根據添加圖標的方法和使用位置（例如，作為獨立的圖片，或者作為按鈕等類似組件上的唯一內容），有多種使用方式。以下是幾個示例：
<!-- alt="..." on <img> element -->
<img src="/assets/img/bootstrap.svg" alt="Bootstrap" ...><i class="bi-github" role="img" aria-label="GitHub"></i><svg class="bi" ... role="img" aria-label="Tools">
<use xlink:href="bootstrap-icons.svg#tools"/>
</svg><!-- aria-label="..." on the control -->
<button ... aria-label="Mute">
<svg class="bi bi-volume-mute-fill" aria-hidden="true" ...>
...
</svg>
</button>SVG 是非常棒的技術，但仍然存在一些需要處理的怪異行為。考慮到 SVG 有多種使用方式，我們在代碼中沒有包含以下這些屬性和處理手段。
已知問題包括：