bootstrap4中css样式,vue项目中使用bootstrap4样式

vue项目中使用bootstrap4样式

2020年7月4日 18:43 by wst

bootstrap

前言

看过bootstrap4教程之后, 打算在vue项目中使用其样式。

经过调研，发现有集成好的插件bootstrap-vue，但看完BootstrapVue教程之后，感觉还是麻烦，组件标签变了，标签属性也变了又增加我的记忆负担。

我的目的很简单，只使用bootstrap4的样式。有如下方法：

1. 在index的head中引用bootstrap4的样式文件，代码中直接使用。

缺点：引用路径容易出问题，且最终部署是编译后的文件，路径更不容易把握；

2. 在main.js中引用css文件。

缺点：由于刚开始使用，暂未发现；

实现步骤

1. 安装vue，具体步骤这不再赘述，不会的详见vue安装教程。

2. 安装bootstrap库：npm install  bootstrap

3. 在代码(mian.js)中引入：

import Vue from 'vue'

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

import App from './App.vue'

// Vue.use(BootstrapVue)

// Vue.use(IconsPlugin)

Vue.config.productionTip = false

import 'bootstrap/dist/css/bootstrap.css'

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

new Vue({

render: h => h(App),

}).$mount('#app')

4. 在组件Search.vue中使用样式(如：class="jumbotron")：

Search Github Users

提交

Comment

×

Name

Email address

Comment

Close

Submit

Not Comment!