Can bootstrap and vue be used together?

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.

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

Here I choose the bootstrap3 version

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

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

Introduce BootstrapVue and Bootstrap CSS

2. Modify src/main.js

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

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>

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!