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

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

一、Vue集成BootstrapVue：

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

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

二、布局：

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

  
  	
  
  		
  
  			content1
  		
  		
  
  			content1
  		
  		
  			content2
  		
  	
  
  

三、主题等样式覆盖：

• 在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）或者官方文档（快速通道）

  Save
  

  颜色样式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设置适应样式，如下：
  常见可选值有sm/lg/xl
• 对于组件Group，如：//等，size等通用属性会影响所有内部组件：

  
     Left
     Middle
     Right
  
  

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

  
      Top
      Middle
      Bottom
  
  

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