BootstrapVue的使用《安装与通用典型属性举例》

Bootstrap官方出品：BootstrapVue去官网看看吧

一、Vue集成BootstrapVue：

• 安装：
  npm install vue bootstrap-vue bootstrap
• 引用：

  import Vue from 'vue' 
  import BootstrapVue from 'bootstrap-vue' 
  Vue.use(BootstrapVue) 
  

二、布局：

• BootstrapVue依旧是栅栏式布局，只是写法有点不一样了。 原生写法如下：

  <div class="container">
  	<div class="row">
  		<div class="col-6">
  			content1
  		</div>
  		<div class="col-6>
  			content2
  		</div>
  	</div>
  </div>
  

• BootstrapVue的写法如下：

  <b-container>
  	<b-row>
  		<b-col cols="6">
  			content1
  		</b-col>
  		<b-col cols="6">
  			content2
  		</b-col>
  	</b-row>
  </b-container>
  

三、主题等样式覆盖：

• 在node_modules目录下可以找到：
  

• 新建custom.scss：
  

• 引用custom.scss：

  import Vue from 'vue'
  import BootstrapVue from 'bootstrap-vue'
  import './assets/scss/custom.scss'
  
  Vue.use(BootstrapVue)
  

• 编写custom.scss覆盖上图中的_variables.scss中的变量：

  举例如下：

  $primary: #00B0F0 !default;
  

四、通用属性及使用举例：

• 对于组件使用颜色样式、大小：（可选值见_variables.scss）或者官方文档（快速通道）

  <b-button variant="primary" size="sm">Save</b-button>
  

  颜色样式variant的填充色常见可选值有：primary/secondary/success/danger/warning/info/light/dark
  颜色样式variant的描边色常见可选值有：outline-primary/outline-secondary/outline-success/outline-danger/outline-warning/outline-info/outline-light/outline-dark.
• 给col设置适应样式，如下：

  <b-col lg="6" sm="12" xl="4"></b-col>
  

  常见可选值有sm/lg/xl
• 对于组件Group，如：<b-button-group>/<b-form-group>/<b-input-group>等，size等通用属性会影响所有内部组件：

  <b-button-group size="sm">
     <b-button>Left</b-button>
     <b-button>Middle</b-button>
     <b-button>Right</b-button>
  </b-button-group>
  

  Group一般有内部组件的排列等布局属性，这类属性，直接加在组件上不需要给该类属性赋值，如指定按钮垂直排列：

  <b-button-group vertical>
      <b-button>Top</b-button>
      <b-button>Middle</b-button>
      <b-button>Bottom</b-button>
  </b-button-group>
  

基本的安装和通用典型属性和操作暂时写到这了。
下一篇：BootstrapVue的使用《关于Bootstrap工具样式-----display相关》（快速通道）