⚡

BootstrapVue3组件库技能Skill bootstrap-vue3

这个技能提供了Bootstrap Vue 3组件库的全面指导，用于帮助开发者使用Vue.js和Bootstrap构建前端应用。它包括组件、网格系统、指令和API的详细说明，适用于前端开发、Vue 3集成、响应式布局等场景。关键词：Bootstrap Vue, Vue 3, 前端开发, 组件库, 响应式设计。

前端开发 0 次安装 0 次浏览 更新于 3/22/2026

名称: bootstrap-vue3 描述: 提供了Bootstrap Vue 3组件库的全面指导，包括Bootstrap组件、网格系统、工具和Vue 3集成。当用户询问Bootstrap Vue 3、需要在Vue 3中使用Bootstrap组件或实现响应式布局时使用。 许可证: 完整条款见LICENSE.txt

何时使用此技能

每当用户想要时使用此技能：

  • 使用Bootstrap Vue组件构建Vue 3应用程序
  • 使用Bootstrap UI组件（按钮、表单、表格、模态框等）
  • 使用Bootstrap网格创建响应式布局
  • 使用Bootstrap Vue指令（v-b-tooltip、v-b-popover、v-b-modal）
  • 使用Bootstrap样式实现表单
  • 在Bootstrap表格中显示数据
  • 创建模态框和警告框
  • 使用Bootstrap导航组件
  • 自定义Bootstrap主题
  • 从Bootstrap Vue 2.x迁移到3.0

如何使用此技能

此技能的组织方式与Bootstrap Vue 3.0官方文档结构相匹配（https://bootstrap-vue.org/docs, https://bootstrap-vue.org/docs/components）。在使用Bootstrap Vue 3.0时：

  1. 从用户请求中识别主题：

    • 快速开始 → examples/getting-started/installation.md 或 examples/getting-started/basic-usage.md
    • 按钮 → examples/components/button.md
    • 表单 → examples/components/form.md
    • 表格 → examples/components/table.md
    • 模态框 → examples/components/modal.md
    • 警告框 → examples/components/alert.md
    • 导航栏 → examples/components/navbar.md
    • 栅格 → examples/components/grid.md
    • 指令 → examples/directives/tooltip.md 或 examples/directives/modal.md

  2. 从examples/目录加载适当的示例文件：

    快速开始 - examples/getting-started/：

    • examples/getting-started/installation.md - 安装Bootstrap Vue和基本设置
    • examples/getting-started/basic-usage.md - 基本组件用法

    组件 - examples/components/：

    • examples/components/button.md - 按钮组件
    • examples/components/form.md - 表单组件
    • examples/components/input.md - 输入组件
    • examples/components/table.md - 表格组件
    • examples/components/modal.md - 模态框组件
    • examples/components/alert.md - 警告框组件
    • examples/components/navbar.md - 导航栏组件
    • examples/components/grid.md - 网格系统（容器、行、列）
    • examples/components/card.md - 卡片组件
    • examples/components/badge.md - 徽章组件
    • examples/components/dropdown.md - 下拉组件
    • examples/components/pagination.md - 分页组件
    • examples/components/tabs.md - 选项卡组件
    • examples/components/collapse.md - 折叠组件
    • examples/components/popover.md - 弹出框组件
    • examples/components/tooltip.md - 工具提示组件

    指令 - examples/directives/：

    • examples/directives/tooltip.md - v-b-tooltip指令
    • examples/directives/popover.md - v-b-popover指令
    • examples/directives/modal.md - v-b-modal指令
    • examples/directives/toggle.md - v-b-toggle指令

    高级 - examples/advanced/：

    • examples/advanced/theme-customization.md - 自定义Bootstrap主题
    • examples/advanced/composables.md - 使用组合式API（useToast、useModal）

  3. 遵循该示例文件中的具体指示，包括语法、结构和最佳实践

    重要注意事项：

    • 所有示例遵循Bootstrap Vue 3.0 API（Vue 3 + Bootstrap 5）
    • 示例使用组合式API语法
    • 每个示例文件包括关键概念、代码示例和要点
    • 始终检查示例文件以了解最佳实践和常见模式

  4. 需要时参考api/目录中的API文档：

    • api/components.md - 组件API参考
    • api/directives.md - 指令API参考
    • api/composables.md - 组合式API参考

  5. 使用templates/目录中的模板：

    • templates/project-setup.md - 项目设置模板
    • templates/component-template.md - 组件使用模板

文档映射（与官方文档一一对应）

指南：

组件：

示例和模板

此技能包括详细示例，组织方式与官方文档结构相匹配。所有示例都在examples/目录中（见上方映射）。

使用示例：

  • 从用户请求中识别主题
  • 从上方映射中加载适当的示例文件
  • 遵循文件中的指示、语法和最佳实践
  • 根据具体用例调整代码示例

使用模板：

  • 参考templates/目录中的模板以进行常见搭建
  • 根据具体需求和编码风格调整模板

API参考

详细的API文档可在api/目录中找到，组织方式与官方Bootstrap Vue 3.0 API文档结构相匹配：

组件API（api/components.md）

  • 所有组件属性和API
  • 组件事件和插槽
  • 组件类型和接口

指令API（api/directives.md）

  • 指令语法和用法
  • 指令修饰符
  • 指令选项

组合式API（api/composables.md）

  • useToast组合式API
  • useModal组合式API
  • usePopover组合式API

使用API参考：

  1. 识别需要帮助的API
  2. 从api/目录中加载相应的API文件
  3. 查找API签名、参数、返回类型和示例
  4. 参考链接的示例文件以了解详细用法模式
  5. 所有API文件都包含指向examples/目录中相关示例文件的链接

最佳实践

  1. 导入Bootstrap CSS：在入口文件中导入Bootstrap CSS
  2. 使用组合式API：对于Vue 3项目，优先使用组合式API
  3. 树摇优化：单独导入组件以进行更好的树摇优化
  4. 响应式设计：使用Bootstrap网格系统进行响应式布局
  5. 可访问性：遵循Bootstrap可访问性指南
  6. 主题自定义：使用Bootstrap变量进行一致的主题设置
  7. 指令：使用指令进行程序化组件控制
  8. 组合式API：使用组合式API进行程序化API访问
  9. 组件组合：组合组件以构建复杂UI
  10. 性能：通过树摇优化优化包大小

资源

关键词

Bootstrap Vue, Bootstrap Vue 3.0, Vue 3, Bootstrap 5, 组件, 按钮, 表单, 表格, 模态框, 警告框, 导航栏, 栅格, 指令, v-b-tooltip, v-b-popover, v-b-modal, 组合式API, useToast, useModal, 组件库