適用Vue2、Vue3 引入 Bootstrap 的安裝方式,不是BootstrapVue唷,兩個是不一樣的~
安裝 Bootstrap
步驟一
透過npm安裝
npm install bootstrap
透過yarn安裝
yarn add bootstrap
步驟二
需要將bootstrap引入 main.js 供全局做使用
/src/main.js
//vue2
import Vue from "vue";
import App from "./App.vue";
import "bootstrap/dist/css/bootstrap.min.css"
....//其他要引入的套件
new Vue({
el: "#app",
router,
components: { App },
template: "<App/>",
store,
});
import "bootstrap/dist/js/bootstrap.js"
//vue3
import { createApp } from "vue";
import App from "./App.vue";
import "bootstrap/dist/css/bootstrap.min.css"
....//其他要引入的套件
createApp(App).use(router).mount("#app");
import "bootstrap/dist/js/bootstrap.js"
然後就能根據 Bootstrap官網 的文件做使用啦!
要注意的是,bootstrap引入的css檔是在自訂css檔後面載入唷,所以在自己的css裡撰寫時要記得包個class,才不會被bootstrap的樣式蓋過去喔~~
官網: https://getbootstrap.com/
六角學院翻譯繁體中文文件: https://bootstrap5.hexschool.com/