1、BootstrapVue的安装使用
我们假设你已经有Vue的项目环境,那么BootstrapVue的安装使用介绍就很容易了,直接使用npm安装即可。
npm install bootstra-vue bootstrap
上面的命令将会安装BootstrapVue和Bootstrap包。 BoostrapVue包中包含所有BootstrapVue组件,常规Bootstrap包含CSS文件。
接下来,让我们设置刚刚安装的BootstrapVue包。转到你的main.js文件并将这行代码添加到合适的位置,另外还需要将Bootstrap CSS文件导入到项目中。
import BootstrapVue from ‘bootstrap-vue’
Vue.use(BootstrapVue)
import ‘bootstrap/dist/css/bootstrap.css’
import ‘bootstrap-vue/dist/bootstrap-vue.css’
那么一般简单的main.js文件内容如下所示。
复制代码
//src/main.js
import Vue from ‘vue’
import App from ‘./App.vue’
import BootstrapVue from ‘bootstrap-vue’
import ‘bootstrap/dist/css/bootstrap.css’
import ‘bootstrap-vue/dist/bootstrap-vue.css’
Vue.use(BootstrapVue)
Vue.config.productionTip = false
new Vue({
render: h => h(App),
}).$mount(’#app’)
复制代码
如果我们项目中使用了其他组件模块,那么这些可能会有所不同。
2、BootstrapVue的组件使用
学习一项新东西,我们一般先了解一下相关的文档。
GitHub库的地址:https://github.com/topics/bootstrapvue
BootstrapVue的官网地址(可能受限无法访问):https://bootstrap-vue.js.org/
BootstrapVue的中文网站地址如下: https://code.z01.com/bootstrap-vue/
通过在Vue项目中引入对应的 BootstrapVue,那么它的相关组件使用就参考官网的介绍了解即可。BootstrapVue中有很多和Bootstrap一样的组件,不过标签前缀需要加上b-
例如对于常用的按钮界面代码处理,如下所示。
复制代码
卡片Card控件使用代码如下所示
复制代码
<b-button href="#" variant="primary">Go somewhere</b-button>
其中类class中的mb-2就是边距的定义,参考说明如下所示。
另外可能还有接触到 p-2,pt-2,py-2,px-2 等类似的定义,后面小节再行说明。
另外Flex的布局也需了解下。
复制代码
复制代码
界面效果如下所示。
我们来一个展示栅格的例子,显示卡片中图片,文字等信息。
复制代码
{{
${data.strCategoryDescription.slice(0,100)}...
}}
View food
No meals available yet 😢
复制代码
USB Microphone https://www.soft-voice.com/
Wooden Speakers https://www.zeshuiplatform.com/
亚马逊测评 www.yisuping.cn
深圳网站建设www.sz886.com