首页
/ 正文

vue bootstrap（保姆级教程）

更新时间: 2025-04-03 16:33:23

💡一则或许对你有用的小广告

欢迎加入小哈的星球 ，你将获得：专属的项目实战 / 1v1 提问 / Java 学习路线 / 学习打卡 / 每月赠书 / 社群讨论

新项目:《从零手撸：仿小红书（微服务架构）》 正在持续爆肝中，基于 Spring Cloud Alibaba + Spring Boot 3.x + JDK 17...，点击查看项目介绍 ;

《从零手撸：前后端分离博客项目（全栈开发）》 2 期已完结，演示链接： http://116.62.199.48/ ;

截止目前，星球内专栏累计输出 82w+ 字，讲解图 3441+ 张，还在持续爆肝中.. 后续还会上新更多项目，目标是将 Java 领域典型的项目都整一波，如秒杀系统, 在线商城, IM 即时通讯，权限管理，Spring Cloud Alibaba 微服务等等，已有 2900+ 小伙伴加入学习，欢迎点击围观

在现代 Web 开发中，前端框架与 UI 框架的结合是提升开发效率的关键。Vue.js 以其声明式语法和响应式数据绑定广受欢迎，而 Bootstrap 则凭借其直观的组件库和移动端优先的设计理念，成为快速构建美观界面的首选。Vue Bootstrap 作为两者的结合体，将 Bootstrap 的丰富组件与 Vue 的灵活性深度融合，为开发者提供了一套高效且易用的解决方案。本文将从零开始，通过循序渐进的方式，帮助读者掌握 Vue Bootstrap 的核心概念、使用技巧及实战案例，无论你是编程新手还是有一定经验的开发者，都能从中获得实用价值。

一、Vue Bootstrap 的核心优势

1.1 什么是 Vue Bootstrap？

Vue Bootstrap 是官方维护的 Vue.js 组件库，它将 Bootstrap 的 CSS 框架与 Vue 的组件化特性结合，提供了一系列封装好的 Vue 组件。这些组件不仅支持响应式设计，还通过 Vue 的数据绑定和事件系统实现了更直观的交互逻辑。

例如，传统的 Bootstrap 按钮需要手动绑定 JavaScript 事件，而在 Vue Bootstrap 中，只需通过 v-on 或 @ 简洁地声明点击事件：

<template>
  <b-button @click="handleClick">点击我</b-button>
</template>

1.2 为什么选择 Vue Bootstrap？

开箱即用的组件库：包含按钮、表单、导航栏、模态框等 100+ 组件，覆盖常见 UI 需求。
与 Vue 原生语法无缝集成：无需额外学习复杂 API，直接使用 Vue 的 v-model、v-if 等指令。
响应式优先：所有组件默认支持移动端适配，通过 breakpoints 配置可灵活控制显示逻辑。
主题自定义：基于 Sass 变量，可快速修改颜色、间距等样式，无需覆盖 CSS。

二、快速入门：安装与基础配置

2.1 安装 Vue Bootstrap

在 Vue 项目中，通过以下命令安装：

npm install vue-bootstrap bootstrap
yarn add vue-bootstrap bootstrap

安装完成后，需要在入口文件（如 main.js）中引入 Bootstrap 的 CSS 和 Vue Bootstrap 的组件：

import Vue from 'vue';
import { BootstrapVue, BootstrapVueIcons } from 'bootstrap-vue';
import 'bootstrap/dist/css/bootstrap.css';
import 'bootstrap-vue/dist/bootstrap-vue.css';

Vue.use(BootstrapVue);
Vue.use(BootstrapVueIcons);

2.2 第一个 Vue Bootstrap 组件

创建一个简单的按钮组件：

<template>
  <div>
    <b-button variant="primary">Primary 按钮</b-button>
    <b-button variant="danger">Danger 按钮</b-button>
  </div>
</template>

运行后，你会看到两个不同样式的按钮，通过 variant 属性即可快速切换 Bootstrap 的预设样式。

三、核心组件详解：从基础到进阶

3.1 常用组件：表单与导航

表单组件

Vue Bootstrap 的表单组件支持 v-model 双向绑定，例如：

<template>
  <b-form @submit="onSubmit">
    <b-form-input
      v-model="username"
      placeholder="请输入用户名"
      required
    ></b-form-input>
    <b-form-datepicker v-model="selectedDate"></b-form-datepicker>
    <b-button type="submit" variant="primary">提交</b-button>
  </b-form>
</template>

通过 b-form 包裹表单元素，可统一管理提交逻辑，而 b-form-datepicker 则提供了带验证的日期选择器。

导航栏组件

构建响应式导航栏：

<template>
  <b-navbar toggleable="lg" type="dark" variant="info">
    <b-navbar-brand href="#">Logo</b-navbar-brand>
    <b-navbar-toggle target="nav-collapse"></b-navbar-toggle>
    <b-collapse id="nav-collapse" is-nav>
      <b-navbar-nav>
        <b-nav-item href="#">首页</b-nav-item>
        <b-nav-item href="#">关于</b-nav-item>
      </b-navbar-nav>
    </b-collapse>
  </b-navbar>
</template>

此代码会生成一个在移动端可折叠的导航栏，通过 toggleable 属性控制折叠触发点。

3.2 进阶组件：模态框与表格

模态框（Modal）

通过 b-modal 组件实现动态内容：

<template>
  <div>
    <b-button v-b-modal.modal1>打开模态框</b-button>
    <b-modal id="modal1" title="提示">
      <p>这是模态框的内容</p>
      <template #modal-footer>
        <b-button @click="$bvModal.hide('modal1')">关闭</b-button>
      </template>
    </b-modal>
  </div>
</template>

v-b-modal 指令直接绑定按钮与模态框的显隐关系，而 #modal-footer 是插槽（slot）的语法，用于自定义底部按钮。

表格（Table）

结合 Vue 的响应式数据实现动态表格：

<template>
  <b-table :items="items" :fields="fields" striped hover>
    <template #cell(actions)="data">
      <b-button variant="danger" @click="deleteRow(data.index)">删除</b-button>
    </template>
  </b-table>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, name: "Alice", age: 25 },
        { id: 2, name: "Bob", age: 30 }
      ],
      fields: [
        { key: 'id', label: 'ID' },
        { key: 'name', label: '姓名' },
        { key: 'age', label: '年龄' },
        { key: 'actions', label: '操作' }
      ]
    };
  },
  methods: {
    deleteRow(index) {
      this.items.splice(index, 1);
    }
  }
};
</script>

通过 b-table 的 items 和 fields 属性绑定数据，配合插槽（#cell(actions)）实现行内操作按钮。

四、自定义主题与样式：超越默认样式

4.1 使用 Sass 变量覆盖样式

Vue Bootstrap 的主题基于 Sass，可以通过覆盖预定义变量来自定义颜色、间距等。例如，在项目中创建 variables.scss：

// 自定义按钮主色
$primary: #4CAF50;

// 修改全局间距
$spacer: 1.5rem !default;

然后在入口文件中引入：

import '@/assets/styles/variables.scss';
import 'bootstrap/scss/bootstrap';
import 'bootstrap-vue/src/index';

4.2 混合样式与 Vue 的动态绑定

结合 Vue 的 :class 或 :style 实现动态效果：

<template>
  <div>
    <b-button :variant="isActive ? 'success' : 'secondary'" @click="toggle">
      {{ isActive ? '激活' : '未激活' }}
    </b-button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isActive: false
    };
  },
  methods: {
    toggle() {
      this.isActive = !this.isActive;
    }
  }
};
</script>

通过 :variant 绑定动态值，按钮样式会根据 isActive 的状态实时变化。

五、进阶技巧与最佳实践

5.1 响应式布局的实现

利用 Vue Bootstrap 的 breakpoints 属性控制组件显示：

<template>
  <b-container fluid>
    <b-row>
      <b-col cols="12" md="6" lg="4">
        <!-- 响应式列内容 -->
      </b-col>
    </b-row>
  </b-container>
</template>

cols="12" 表示在移动端占满 12 列，md="6" 在中等屏幕（≥768px）占 6 列，lg="4" 在大屏幕（≥992px）占 4 列。

5.2 与 VueX 的状态管理集成

将 Vue Bootstrap 的组件与全局状态结合：

<template>
  <div>
    <b-input v-model="searchQuery" @input="search"></b-input>
    <b-list-group>
      <b-list-group-item v-for="item in filteredItems" :key="item.id">
        {{ item.name }}
      </b-list-group-item>
    </b-list-group>
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex';

export default {
  computed: {
    ...mapState(['items']),
    filteredItems() {
      return this.items.filter(item => 
        item.name.includes(this.searchQuery)
      );
    }
  },
  data() {
    return {
      searchQuery: ''
    };
  },
  methods: {
    ...mapActions(['fetchItems']),
    search() {
      // 可选：异步搜索逻辑
    }
  },
  created() {
    this.fetchItems();
  }
};
</script>

此示例通过 v-model 绑定输入框值，并利用计算属性 filteredItems 实现搜索过滤，同时通过 mapActions 调用 Vuex 的异步操作。

六、实战案例：构建一个动态表单

6.1 需求分析

创建一个包含以下功能的表单：

动态添加/删除字段
表单验证
提交后重置

6.2 代码实现

<template>
  <div>
    <b-form @submit.prevent="handleSubmit">
      <b-form-group label="姓名" label-for="name">
        <b-form-input
          id="name"
          v-model="formData.name"
          required
          placeholder="请输入姓名"
        ></b-form-input>
      </b-form-group>

      <b-form-group label="邮箱" label-for="email">
        <b-form-input
          id="email"
          v-model="formData.email"
          type="email"
          required
          placeholder="请输入邮箱"
        ></b-form-input>
      </b-form-group>

      <b-form-group label="技能列表">
        <div v-for="(skill, index) in formData.skills" :key="index">
          <b-input-group>
            <b-form-input v-model="skill.value"></b-form-input>
            <b-input-group-append>
              <b-button variant="danger" @click="removeSkill(index)">-</b-button>
            </b-input-group-append>
          </b-input-group>
        </div>
        <b-button @click="addSkill" variant="success">+ 添加技能</b-button>
      </b-form-group>

      <b-button type="submit" variant="primary">提交</b-button>
    </b-form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      formData: {
        name: '',
        email: '',
        skills: [{ value: '' }]
      }
    };
  },
  methods: {
    addSkill() {
      this.formData.skills.push({ value: '' });
    },
    removeSkill(index) {
      this.formData.skills.splice(index, 1);
    },
    handleSubmit() {
      if (this.formData.skills.length === 0) {
        alert('至少需要一项技能');
        return;
      }
      // 提交逻辑（如发送到 API）
      console.log('表单数据:', this.formData);
      this.resetForm();
    },
    resetForm() {
      this.formData = {
        name: '',
        email: '',
        skills: [{ value: '' }]
      };
    }
  }
};
</script>

6.3 功能解析

动态字段管理：通过 v-for 渲染技能列表，配合 addSkill 和 removeSkill 方法实现增删操作。
表单验证：通过 required 属性和 handleSubmit 方法中的逻辑，确保必填字段不为空。
响应式交互：按钮的 variant 属性通过状态动态变化，增强用户反馈。

结论

Vue Bootstrap 凭借其对 Vue.js 和 Bootstrap 优势的整合，为开发者提供了一站式构建现代 Web 应用的工具集。从基础组件的快速上手，到主题定制与状态管理的深度集成，它既降低了学习成本，又保留了灵活的扩展性。无论是搭建企业级管理后台，还是开发个人项目，Vue Bootstrap 都能通过简洁的 API 和丰富的文档，帮助开发者高效落地设计。

通过本文的案例和代码示例，读者可以逐步掌握从安装配置到复杂组件的使用技巧，并通过实战项目巩固知识。随着 Vue 生态的持续发展，Vue Bootstrap 也将在功能和性能上不断优化，成为前端开发中不可或缺的利器。

（全文约 1800 字）

vue bootstrap（保姆级教程）

一、Vue Bootstrap 的核心优势

1.1 什么是 Vue Bootstrap？

1.2 为什么选择 Vue Bootstrap？

二、快速入门：安装与基础配置

2.1 安装 Vue Bootstrap

2.2 第一个 Vue Bootstrap 组件

三、核心组件详解：从基础到进阶

3.1 常用组件：表单与导航

表单组件

导航栏组件

3.2 进阶组件：模态框与表格

模态框（Modal）

表格（Table）

四、自定义主题与样式：超越默认样式

4.1 使用 Sass 变量覆盖样式

4.2 混合样式与 Vue 的动态绑定

五、进阶技巧与最佳实践

5.1 响应式布局的实现

5.2 与 VueX 的状态管理集成

六、实战案例：构建一个动态表单

6.1 需求分析

6.2 代码实现

6.3 功能解析

结论

最新发布

jQuery EasyUI 树形菜单 – 树形网格添加分页（建议收藏）

jQuery EasyUI 树形菜单 – 树形网格惰性加载节点（保姆级教程）

jQuery EasyUI 表单 – 创建异步提交表单（长文解析）

jQuery EasyUI 表单 – 表单验证（长文解析）

jQuery EasyUI 表单 – 创建树形下拉框（ComboTree）（长文解析）

jQuery EasyUI 表单 – 格式化下拉框（ComboBox）（超详细）

jQuery EasyUI 表单 – 过滤下拉数据网格（ComboGrid）（一文讲透）

jQuery EasyUI 窗口 – 创建简单窗口（超详细）

jQuery EasyUI 基础插件 – Parser 解析器（手把手讲解）

jQuery EasyUI 基础插件 – Easyloader 加载器（手把手讲解）