bootstrap布局 + vue

想要开发一个响应式布局的页面

1，安装bootstrap-vue

npm install bootstrap-vue bootstrap

1.1，在main.js 里导入

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

2，使用

// home.vue
<b-container>
  <b-row>
    <div v-for="(item,index) in imgSrc" :key="index" class="gameBlock" >
      <b-col>
        <div class="gameName">
          <span >{{item.name}}</span>
        </div>
      </b-col>
    </div>
  </b-row>
</b-container>

2.1，row 和col 要在container 里面使用。
2.2，循环出来的结果没有横向排列，如下图

2.3，修改row 添加属性 align-h="start" class="row" cols="2" cols-md="6"，
cols 表示，最小容器宽度 一行排两个， md 表示中等宽度
2.4，修改 col ，将循环放到col 里。
个人经过查看之后：循环div ，col 只有一个值，他就会占据一行，如果循环div下有两个col ，这两个就会放一行。
最后修改为：

<b-container>
  <b-row align-h="start" class="row" cols="2" cols-md="6">
     <b-col v-for="(item,index) in imgSrc" :key="index" class="gameBlock" @click="handleShow(item)">
        <div class="gameName">
          <span >{{item.name}}</span>
       </div>
    </b-col>
  </b-row>
</b-container>

效果如图：

以上就是 bootstrap-v 布局的基本使用。
使用 bootstrap 的好处是，他可以自适应不同宽度的屏幕，方便开发自适应页面。针对不同的宽度也可以方便修改。

bootstrap-vue 的中文文档：https://code.z01.com/bootstra...