bootstrap-vue的相关（安利向）

就在我头疼之际，一个神奇的东西出现了bootstrap-vue，他使用的是bootstrap v4

特此安利一波，网站为：https://bootstrap-vue.js.org

 

安装为

npm i bootstrap-vue

 

全部引入为

import Vue from 'vue'
//引入它
import BootstrapVue from 'bootstrap-vue'

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

//调用
Vue.use(BootstrapVue);

 

选择性引入为

//引入Card组件
import { Card } from 'bootstrap-vue/es/components';
//使用
Vue.use(Card);

　

使用,以常用的button组来说,直接就是,太方便了,而且bootstrap的样式通用

/*
*variant属性为颜色属性,
*to属性是路由专用属性,后面直接接路由的地址,点击后可以直接跳转,不用使用router-link,但router-view还是要的
*/
<b-button-group>
    <b-button variant="success">Success</b-button>
    <b-button variant="info" to="home">Home</b-button>
    <b-button variant="warning">Warning</b-button>
    <b-button variant="primary">Primary</b-button>
    <b-button variant="danger">Danger</b-button>
    <b-button variant="link">Link</b-button>
 </b-button-group>

 

还有dropdown,平时要写一大片,现在,而且更加的明了

<div>
  <b-dropdown text="下拉菜单" class="m-2">  //text属性是显示什么,class里的内容是自带的样式,等价于margin,最大为5
    <b-dropdown-item>我是1</b-dropdown-item>
    <b-dropdown-item>我是2</b-dropdown-item>
    <b-dropdown-item>我是3</b-dropdown-item>
    <b-dropdown-divider></b-dropdown-divider>   //分割线
    <b-dropdown-item>Something else here...</b-dropdown-item>
    <b-dropdown-item disabled>Disabled action</b-dropdown-item>
  </b-dropdown>
</div>

 

栅格系统,同样12格

<b-container>    //容器,相当于原先的<div class="container>
    <b-row>
        <b-col>1 of 3</b-col>
        <b-col cols="8">2 of 3</b-col>    //占8列
        <b-col>3 of 3</b-col>
    </b-row>

<b-row class="justify-content-md-center">　　//居中
        <b-col col lg="2">1 of 3</b-col>　　//lg 大屏下宽度
        <b-col cols="12" md="auto">Variable width content</b-col>　　//md-auto,中屏幕下内容填充大小
　　　　　<b-col col lg="2">3 of 3</b-col> </b-row>

</b-container>

　　

 

 

更多的东西还是要自己去看,虽然他没有汉化文档,但借助翻译工具,还是可以弄懂的,我就是.

有时间的话，我真的想做个中文教程的。

很多的组件的用法，个人感觉比原版bootstrap容易理解和用，

不过也看个人喜好吧。