Vue Bootstrap Vue.js中实现Bootstrap 3组件的高效方法

Vue-Bootstrap 是一个基于 Vue.js 框架的项目，将流行的 Bootstrap 3 UI库与 Vue 的强大功能相结合，提供了一套完整、易于使用的组件库，使得在Vue应用中实现Bootstrap设计风格变得更加高效。每个Bootstrap组件都被重新构建为Vue组件，以下是一些关键组件的使用方法：

安装Vue-Bootstrap

你可以通过npm或yarn安装该库：

npm install vue-bootstrap 

# 或者 

yarn add vue-bootstrap

安装完成后，在main.js中导入并使用Vue-Bootstrap：

import Vue from 'vue';

import BootstrapVue from 'bootstrap-vue';

Vue.use(BootstrapVue);

按需引入组件

如果你只想使用部分组件，可以按需引入：

import { Button, Navbar } from 'bootstrap-vue';

Vue.component(Button.name, Button);

Vue.component(Navbar.name, Navbar);

关键组件示例：

1. 导航栏（Navbar）：

<template>

  <b-navbar toggleable="lg" type="dark">

    <b-navbar-brand href="#">Vue-Bootstrapb-navbar-brand>

    <b-navbar-toggle target="nav-collapse">b-navbar-toggle>

    <b-collapse id="nav-collapse" is-nav="">

      <b-nav class="ml-auto">

        <b-nav-item href="#">Homeb-nav-item>

        <b-nav-item href="#">Aboutb-nav-item>

        <b-nav-item href="#">Contactb-nav-item>

      b-nav>

    b-collapse>

  b-navbar>

template>

1. 模态框（Modal）：

<template>

  <div>

    <b-button @click="modal.show = true" variant="primary">Open Modalb-button>

    <b-modal title="Hello World" v-model="modal.show">

      这是一个Vue-Bootstrap的模态框示例。

    b-modal>

  div>

template>

<script>

export default {

  data() {

    return {

      modal: { show: false },

    };

  },

};

script>

1. 按钮（Button）：

<b-button variant="primary">Primaryb-button>

<b-button variant="secondary">Secondaryb-button>

<b-button variant="success">Successb-button>

<b-button variant="danger">Dangerb-button>

1. 表格（Table）：

<b-table :items="items" hover="" striped="">b-table>

<script>

export default {

  data() {

    return {

      items: [

        { name: 'John', age: 30, active: true },

        { name: 'Jane', age: 25, active: false },

      ],

    };

  },

};

script>