关于bootstrap: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…