Can bootstrap and vue be used together?-Front-end Q&A-php.cn

Can bootstrap and vue be used together?

青灯夜游

Release： 2021-11-10 10:15:20

Original

10948 people have browsed it

bootstrap and vue can be used together. Using bootstrap to write templates for vue can improve development efficiency; and vue specifically provides a bootstrap ui component library BootstrapVue, which is used to build on the web using Vue and Bootstrap 4. It is responsive and mobile-first. website.

Can bootstrap and vue be used together?

The operating environment of this tutorial: Windows7 system, vue2.9.6&&bootsrap4 version, DELL G3 computer

bootstrap and vue can be used together, both It is compatible and will not conflict. Using bootstrap to write Vue templates can improve development efficiency.

How to use Bootstrap in Vue

1. Install the bootstrap library:

In the root directory of the project, enter the command:

npm install bootstrap3 -S

Copy after login

Here I choose the bootstrap3 version

2, and then introduce bootstrap in the main.js file

Can bootstrap and vue be used together?

##3. Write Bootstrap in the template The html component structure can be

In addition, you can also use the BootstrapVue framework

vue has a dedicated ui component library BootstrapVue, which is based on the world's most popular framework Bootstrap v4. For building responsive, mobile-first sites on the web using Vue.js.

BootstrapVue is a front-end UI framework based on Bootstrap v4 Vue.js. As an introductory framework for learning the Vue.js framework itself, I think BootstrapVue is very good. The Bootstrap framework itself is lightweight, easy to learn, and very popular around the world with many third-party plugins and theme styles. As a progressive framework, Vue.js's core library only focuses on the view layer, which is not only easy to get started, but also easy to integrate with third-party frameworks or existing projects.

1. Install BootstrapVue

npm install bootstra-vue bootstrap axios

Copy after login

Introduce BootstrapVue and Bootstrap CSS

2. Modify src/main.js

import Vue from &#39;vue&#39;
import App from &#39;./App.vue&#39;
import BootstrapVue from &#39;bootstrap-vue&#39;
import &#39;bootstrap/dist/css/bootstrap.css&#39;
import &#39;bootstrap-vue/dist/bootstrap-vue.css&#39;
 
Vue.use(BootstrapVue)
Vue.config.productionTip = true
 
new Vue({
  render: h => h(App),
}).$mount(&#39;#app&#39;)

Copy after login

3. Modify src /components/HelloWorld.vue:

<template>
  <b-container fluid class="p-4">
    <b-row>
      <b-col sm="3" v-for="item in list" v-bind:key="item.index">
        <b-img thumbnail fluid :src="item.strCategoryThumb" v-bind="mainProps"></b-img>
      </b-col>
    </b-row>
  </b-container>
</template>
 
<script>
import axios from "axios"
 
export default {
  name: &#39;HelloWorld&#39;,
  data() {
    return {
      mainProps: {
        class: &#39;mb-2&#39;
      },
      list: []
    }
  },
  mounted() {
    axios
        .get("https://www.themealdb.com/api/json/v1/1/categories.php")
        .then(response => {
        this.list = response.data.categories
      })
        .catch(err => {
        console.log(err)
      })
  }
}
</script>

Copy after login

Recommended study: "

bootstrap usage tutorial"

The above is the detailed content of Can bootstrap and vue be used together?. For more information, please follow other related articles on the PHP Chinese website!