使用bootstrap-vue將bootstrap與vue.js集成

>本文使用bootstrap-vue探討了與vue.js集成的bootstrap，從而消除了對jQuery的需求。 React和Vue.js是流行的JavaScript框架，但Vue.js擁有更簡單的學習曲線和設置。 Bootstrap是一種廣泛使用的HTML/CSS框架，傳統上依賴於jQuery。 bootstrap-vue橋接此差距。

Bootstrap-vue的

關鍵優點：>

>將bootstrap和vue.js結合在一起，使用bootstrap組件作為vue組件。
>可通過NPM安裝，為項目腳手架提供Vue-CLI模板。
可以通過腳本標籤包含，簡化設置。
• 支持動態組件和事件處理的vue.js指令。
>
• Bootstrap的背景

：

Bootstrap由Mark Otto和Jacob Thornton創建，Bootstrap由於其移動響應設計，常見的UI組件和廣泛的瀏覽器支持而迅速獲得了知名度。 它已成為新的Web項目的標準。

連接bootstrap和vue.js：

> Bootstrap對jQuery的依賴與Vue.js的直接集成複雜化。 Bootstrap-vue和Vuestrap是解決方案，Bootstrap-vue是最新和流行的選擇。

詳細介紹bootstrap-vue： Bootstrap-vue

>命令行安裝（NPM）：

這將創建一個使用>模板的新項目。

>導入引導程序和bootstrap-vue樣式和組件。

包含前端代碼。

<code class="language-bash">npm i bootstrap-vue
npm i -g vue-cli
vue init bootstrap-vue/webpack-simple getting-started
cd getting-started
npm install
npm run dev</code>

腳本標籤安裝：

webpack-simple main.js>另外，在您的html中通過腳本標籤包括Bootstrap-vue：App.vue

考慮用於舊的瀏覽器支持。

>

與Bootstrap-Vue組件一起工作：

>

>使用Codepen的示例演示創建警報和列表視圖。

<code class="language-html"><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">

</code>

警報組件：

@babel/polyfill

這會產生不可否認的警報。 有關進一步的自定義選項，請參閱Bootstrap-Vue文檔。

>

>動態列表視圖組件：

使用>和

<code class="language-html"><b-alert show dismissible>Hello {{ name }}!</b-alert></code>

指令創建一個動態列表：

<code class="language-bash">npm i bootstrap-vue
npm i -g vue-cli
vue init bootstrap-vue/webpack-simple getting-started
cd getting-started
npm install
npm run dev</code>

徽章上的事件處理：

>

<b-badge></b-badge>可以與事件偵聽器一起使用：

<code class="language-html"><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">

</code>

這會在按鈕上遞增共享計數器。

結論： > bootstrap-vue簡化了將引導程序集成到vue.js項目中，為構建響應式和動態的Web應用程序提供了強大的組合。 提供的示例和進一步資源的鏈接使開發人員能夠快速啟動。

>

常見問題（常見問題解答）：

> FAQS部分在原始文本中已經寫得很好，並且已經寫得全面。 不需要更改。

以上是使用bootstrap-vue將bootstrap與vue.js集成的詳細內容。更多資訊請關注PHP中文網其他相關文章！