经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » JS/JS库/框架 » JavaScript » 查看文章
使用BootstrapVue相关组件,构建Vue项目界面
来源:cnblogs  作者:伍华聪  时间:2021/6/15 9:11:03  对本文有异议

基于Vue的前端框架有很多,Element算一个,而BootstrapVue也可以非常不错的一个,毕竟Bootstrap也是CSS中的大佬级别的,它和Vue的整合,使得开发起来更加方便了。BootstrapVue 是基于 Bootstrap v4 + Vue.js 的前端 UI 框架。它是流行的 Bootstrap 框架与 Vue.js 的集成。这个包称为 BootstrapVue。它允许我们使用与 Bootstrap(v4)集成的自定义组件。

使用 BootstrapVue,任何人都可以从 Vanilla.js 或 jQuery 切换到 Vue.js,而无需担心 Bootstrap 对 jQuery 的严重依赖,甚至无法找到解决方法。这就是 BootstrapVue 的救援方式。它有助于弥补这一差距,并允许 Vue 开发人员能够轻松地在他们的项目中使用 Bootstrap。BootstrapVue不依赖Jquery。

1、BootstrapVue的安装使用

我们假设你已经有Vue的项目环境,那么BootstrapVue的安装使用介绍就很容易了,直接使用npm安装即可。

  1. npm install bootstra-vue bootstrap

上面的命令将会安装BootstrapVue和Bootstrap包。 BoostrapVue包中包含所有BootstrapVue组件,常规Bootstrap包含CSS文件。

接下来,让我们设置刚刚安装的BootstrapVue包。转到你的main.js文件并将这行代码添加到合适的位置,另外还需要将Bootstrap CSS文件导入到项目中。

  1. import BootstrapVue from 'bootstrap-vue'
  2. Vue.use(BootstrapVue)
  3. import 'bootstrap/dist/css/bootstrap.css'
  4. import 'bootstrap-vue/dist/bootstrap-vue.css'

那么一般简单的main.js文件内容如下所示。

  1. //src/main.js
  2. import Vue from 'vue'
  3. import App from './App.vue'
  4. import BootstrapVue from 'bootstrap-vue'
  5. import 'bootstrap/dist/css/bootstrap.css'
  6. import 'bootstrap-vue/dist/bootstrap-vue.css'
  7. Vue.use(BootstrapVue)
  8. Vue.config.productionTip = false
  9.  
  10. new Vue({
  11. render: h => h(App),
  12. }).$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-

例如对于常用的按钮界面代码处理,如下所示。

  1. <div>
  2. <b-button>Button</b-button>
  3. <b-button variant="danger">Button</b-button>
  4. <b-button variant="success">Button</b-button>
  5. <b-button variant="outline-primary">Button</b-button>
  6. </div>

界面如下所示,很有Bootstrap的风格!我们可以看到原先Bootstrap上的html的button加多了一个前缀b-,变为了b-button了。

卡片Card控件使用代码如下所示 

  1. <div>
  2. <b-card
  3. title="Card Title"
  4. img-src="https://picsum.photos/600/300/?image=25"
  5. img-alt="Image"
  6. img-top
  7. tag="article"
  8. style="max-width: 20rem;"
  9. class="mb-2"
  10. >
  11. <b-card-text>
  12. Some quick example text to build on the card title and make up the bulk of the card's content.
  13. </b-card-text>
  14.  
  15. <b-button href="#" variant="primary">Go somewhere</b-button>
  16. </b-card>
  17. </div>

 其中类class中的mb-2就是边距的定义,参考说明如下所示。

 

 另外可能还有接触到 p-2,pt-2,py-2,px-2 等类似的定义,后面小节再行说明。

另外Flex的布局也需了解下。

  1. <div class="bg-light mb-3">
  2. <div class="d-flex justify-content-start bg-secondary mb-3">
  3. <div class="p-2">Flex item 1</div>
  4. <div class="p-2">Flex item 2</div>
  5. <div class="p-2">Flex item 3</div>
  6. </div>
  7. <div class="d-flex justify-content-end bg-secondary mb-3">
  8. <div class="p-2">Flex item 1</div>
  9. <div class="p-2">Flex item 2</div>
  10. <div class="p-2">Flex item 3</div>
  11. </div>
  12. <div class="d-flex justify-content-center bg-secondary mb-3">
  13. <div class="p-2">Flex item 1</div>
  14. <div class="p-2">Flex item 2</div>
  15. <div class="p-2">Flex item 3</div>
  16. </div>
  17. <div class="d-flex justify-content-between bg-secondary mb-3">
  18. <div class="p-2">Flex item 1</div>
  19. <div class="p-2">Flex item 2</div>
  20. <div class="p-2">Flex item 3</div>
  21. </div>
  22. <div class="d-flex justify-content-around bg-light mb-3">
  23. <div class="p-2">Flex item 1</div>
  24. <div class="p-2">Flex item 2</div>
  25. <div class="p-2">Flex item 3</div>
  26. </div>
  27. </div>

界面效果如下所示。

我们来一个展示栅格的例子,显示卡片中图片,文字等信息。

  1. <b-container>
  2. <div v-if="list.length">
  3. <b-row>
  4. <template v-for="data in list">
  5. <b-col sm="4" v-bind:key="data.index">
  6. <b-card v-bind:title="data.strCategory" v-bind:img-src="data.strCategoryThumb" img-alt="Image" img-top tag="article" style="max-width: 20rem;" class="mb-2">
  7. <b-card-text>{{ `${data.strCategoryDescription.slice(0,100)}...` }}</b-card-text>
  8. <b-button href="#" variant="primary">View food</b-button>
  9. </b-card>
  10. </b-col>
  11. </template>
  12. </b-row>
  13. </div>
  14. <div v-else>
  15. <h5>No meals available yet ??</h5>
  16. </div>
  17. </b-container>

整体界面效果如下所示

 

3、BootstrapVue的相关介绍

BootstrapVue的很多概念还是和Bootstrap的类似,毕竟Bootstrap的CSS已经是标准的了。不过我们需要了解相关的布局、颜色、类定义等信息,以确认他们之间的一些差异。

主题色彩

Bootstrap v4.4 SCSS中定义的默认颜色如下,所有主题颜色将自动作为所有BootstrapVue组件的color 变量提供。

 

颜色变量

 

 组件Size属性

 

 间距处理

 影响元素之间的间距是可以通过stylemarginpadding属性来实现,但这两个属性本意并不相同;margin影响的是本元素与相邻外界元素之间的距离,这里简称外边距;padding影响的元素本身与其内部子元素之间的距离,简称为内填充。

bootstrap4提供了简写的class名,名称分别以m-开头和p-开头的类。

一、影响距离大小的值有

0,1,2,3,4,5,auto

(1)margin值有

class

等价的style

m-0

等价于{margin:0 !important}

m-1

等价于{margin:0.25rem !important}

m-2

等价于{margin:0.5rem !important}

m-3

等价于{margin:1rem !important}

m-4

等价于{margin:1.5rem !important}

m-5

等价于{margin:3rem !important}

m-auto

等价于{margin:auto !important}

(2)padding值有

class

等价的style

p-0

等价于{padding:0 !important}

p-1

等价于{padding:0.25rem !important}

p-2

等价于{padding:0.5rem !important}

p-3

等价于{padding:1rem !important}

p-4

等价于{padding:1.5rem !important}

p-5

等价于{padding:3rem !important}

p-auto

等价于{padding:auto !important}

二、调整某一侧的边距

有几个缩写,t,b,l,r,x,y含义分别是top,bottom,left,right,left和right,top和bottom

(1)margin例子,距离大小可以0-5与auto,这里只用期中一个值来说明含义

class名

等价的style

mt-2

{margin-top: 0.5rem !important}

mb-2

{margin-bottom: 0.5rem !important}

ml-2

{margin-left: 0.5rem !important}

mr-2

{margin-right: 0.5rem !important}

mx-2

{margin-right: 0.5rem !important;margin-left: 0.5rem !important}

my-2

{margin-top: 0.5rem !important;margin-bottom: 0.5rem !important}

(2)padding例子

 

class名

等价的style

pt-2

{padding-top: 0.5rem !important}

pb-2

{padding-bottom: 0.5rem !important}

pl-2

{padding-left: 0.5rem !important}

pr-2

{padding-right: 0.5rem !important}

px-2

{padding-right: 0.5rem !important;margin-left: 0.5rem !important}

py-2

{padding-top: 0.5rem !important;margin-bottom: 0.5rem !important}

 

原文链接:http://www.cnblogs.com/wuhuacong/p/14874239.html

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号