Bootstrap layout + Vue

Time:2022-1-6

Want to develop a responsive layout page

1. Install bootstrap Vue

npm install bootstrap-vue bootstrap

1.1, in main Import in JS

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

2. Use

// 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 and col should be used in the container.
2.2. The circulating results are not arranged horizontally, as shown in the figure below
Bootstrap layout + Vue
2.3. Modify row and add attribute align-h = “start” class = “row” cols = “2” cols MD = “6”,
Cols indicates that the minimum container width is two in a row, and MD indicates medium width
2.4. Modify Col and put the loop into col.
After an individual checks: if there is only one value for loop div and col, he will occupy one line. If there are two cols under loop div, they will be placed in one line.
Finally, it is revised as follows:

<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>

The effect is shown in the figure:
Bootstrap layout + Vue

The above is the basic use of bootstrap-v layout.
The advantage of using bootstrap is that it can adapt to screens of different widths to facilitate the development of adaptive pages. It can also be easily modified for different widths.

Chinese documents of bootstrap Vue:https://code.z01.com/bootstra…