在 Vue 3 中使用 Bootstrap 5

Question

我想在 Vue 3 中使用 Bootstrap 5。由于 Bootstrap 5 使用 vanilla JS（没有 JQuery），我可以直接在 a 中使用 Bootstrap 5 Vue 3 项目（不使用 Bootstrap-Vue）？有人可以指导我如何在 Vue 3 中使用 Bootstrap 5 吗？

Answer 1

Bootstrap 5 不再需要 jQuery 所以它更容易与 Vue 一起使用，并且不再需要像 bootstrap- 这样的库vue.

像安装 Vue 项目中的任何其他 JS 模块一样安装 bootstrap 使用 npm install 或将其添加到 package.json...

npm install --save bootstrap
npm install --save @popperjs/core

接下来，将BootstrapCSS和JS组件添加到Vue项目入口点（即：src/main.js）...

import "bootstrap/dist/css/bootstrap.min.css"
import "bootstrap"

然后，使用 Bootstrap 组件的最简单方法是通过 data-bs- 属性。例如，这里是 Bootstrap 折叠组件...

<button 
  class="btn btn-primary" 
  data-bs-target="#collapseTarget" 
  data-bs-toggle="collapse">
  Bootstrap collapse
</button>
<div class="collapse py-2" id="collapseTarget">
  This is the toggle-able content!
</div>

Demo with Navbar component

或，您可以导入任何 Bootstrap 组件并将它们“包装”为 Vue 组件。例如，这里是 Popover 组件...

import { Popover } from bootstrap;

const popover = Vue.component('bsPopover', {
  template: `
    <slot/>
  `,
  props: {
    content: {
      required: false,
      default: '',
    },
    title: {
      default: 'My Popover',
    },
    trigger: {
      default: 'click',
    },
    delay: {
      default: 0,
    },
    html: {
      default: false,
    },
  },
  mounted() {
    // pass bootstrap popover options from props
    var options = this.$props
    var ele = this.$slots.default[0].elm
    new Popover(ele,options)
  },
})

<bs-popover
  title="Hello Popover"
  content="This is my content for the popover!"
  trigger="hover">
    <button class="btn btn-danger">
      Hover for popover
    </button>
</bs-popover>

Demo | Read more

Answer 2

是的，您可以在没有 Bootstrap-Vue 的情况下使用 Bootstrap。使用 npm 安装这两个包：

npm install --save @popperjs/core bootstrap@next

将 Bootstrap 导入到 src/main.js:

import "bootstrap/dist/css/bootstrap.min.css";
import "bootstrap";

Vue 模板的用法示例：

<div class="dropdown">
    <button
      class="btn btn-secondary dropdown-toggle"
      type="button"
      id="dropdownMenuButton1"
      data-bs-toggle="dropdown"
      aria-expanded="false"
    >
      Check Bootstrap
    </button>
    <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
      <li><a class="dropdown-item" href="#">Action</a></li>
      <li><a class="dropdown-item" href="#">Another action</a></li>
      <li><a class="dropdown-item" href="#">Something else here</a></li>
    </ul>
  </div>

结果：

Answer 3

一旦您理解了 Bootstrap 模态的工作原理，就很容易实现这一点。 Bootstrap 模态有一个 div 元素，class 为 modal fade。当它被触发时，这个元素也会得到 show 和 d-block class。此外，body 标签得到额外的 class of modal-open。当模式关闭时，这个过程是相反的。了解这一点，我们可以轻松地在一个代码中实现 Bootstrap 5 个模态：

在您的代码中导入 Bootstrap 5 的 CDN。将 CSS 和 JS 添加到您的代码中。

我们的示例单页组件将如下所示：

<template>
<div>  
    <p>Test modal<a href="#" @click="modalToggle">now</a></p>
    <div>
        <button type="button" class="btn btn-primary" @click="modalToggle">My Modal</button>
            <div
            ref="modal"
            class="modal fade"
            :class="{ show: active, 'd-block': active }"
            tabindex="-1"
            role="dialog">
            <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                <h5 class="modal-title">Modal title</h5>
                <button
                    type="button"
                    class="close"
                    data-dismiss="modal"
                    aria-label="Close"
                    @click="modalToggle">
                    <span aria-hidden="true">&times;</span>
                </button>
                </div>
                <div class="modal-body">
                <p>Modal body text goes here.</p>
                </div>
            </div>
            </div>
        </div>
        <div v-if="active" class="modal-backdrop fade show"></div>
        </div>
</div>
</template>

这里我们使用基本的Bootstrap 5模态。

<script>
export default {
data() {
    return {
    active: false,
    }
},
methods: {
    modalToggle() {
    const body = document.querySelector("body")
    this.active = !this.active
    this.active ? body.classList.add("modal-open") : body.classList.remove("modal-open")
    },
},
}
</script>

在这里，我们有一个变量 active，它最初设置为 false。所以模态不会出现在页面加载中。单击 link 时，我们使用一种方法来切换此变量。这将从我们的 modalm 中删除 show 属性和 d-block class，并从 body 标签中删除 modal-open 属性。

Answer 4

请添加此包： npm install --save @popperjs/core

Answer 5

bootstrap 5 必须有运行的 popper，试试这个 npm :

npm install --save bootstrap 
npm i @popperjs/core

Answer 6

要使 bootstrap 与 SSR 一起工作，您可以 not:

import "bootstrap";

正如其他人所建议的那样，因为它会给你一个错误：

document is not defined

改为

npm install bootstrap

并且仅在您的样式标签中导入 bootstrap scss，以便您可以访问 bootstrap 变量等。

<style lang="scss">

@import 'bootstrap/scss/bootstrap';

.sticky-sidebar {
  z-index: $zindex-sticky;
  ...
}

</style>

然后只需添加 bootstrap bundle to your header。注意：您不必再添加 css，因为它已导入到您的组件中。

Answer 7

虽然 Bootstrap CSS 可以与 any 框架一起使用（React、Vue、Angular, etc), Bootstrap JavaScript 与它们不完全兼容.

这是Bootstrap 5 docs的官方推理：

While the Bootstrap CSS can be used with any framework, the Bootstrap JavaScript is not fully compatible with JavaScript frameworks like React, Vue, and Angular which assume full knowledge of the DOM. Both Bootstrap and the framework may attempt to mutate the same DOM element, resulting in bugs like dropdowns that are stuck in the “open” position.

文档声明使用替代 framework-specific 包而不是 Bootstrap JavaScript，例如 React Bootstrap， BootstrapVue 和 ng-bootstrap.

遗憾的是，BootstrapVue 仅与 Vue2/Nuxt2 兼容，Vue3/Nuxt3 尚无可用版本。

在 Vue 3 中使用 Bootstrap 5

Using Bootstrap 5 with Vue 3

vuejs3

bootstrap-5