关于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...