使用Bootstrap 5与Vue 3

Question

使用Bootstrap 5与Vue 3

155

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

- Aditya Sharma

请查看此链接：https://therichpost.com/how-to-add-bootstrap-5-in-vue-3-application/ - Therichpost

1

我已经为Vue 3设置了一个小型的样板文件，包括Bootstrap 5和其他一些组件。这可能会对您有所帮助 - https://github.com/howbizarre/starter-template_vue-3-vite-bootstrap-5-with-icons - howbizarre

8个回答

55

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

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

在 src/main.js 中引入 Bootstrap：

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>

结果：

- Muzaffer Kadir Yılmaz

3

Vue.js的代码在哪里？ - Shawn Shaw

@LaoShaw 没有额外的代码。一旦按照这个答案导入文件，您将在根应用程序托管的所有其他组件中拥有CSS。 - Nicholas

8

尽管bt5不使用jQuery，但它可能仍然使用一些直接修改DOM的本地JS代码，这将无法与Vue3的虚拟DOM配合使用。 - Shawn Shaw

添加popper.min.js怎么样？这不是必需的吗？很遗憾，上面显示的代码对我来说不起作用。HTML在DOM中，但当我点击按钮时，弹出窗口没有显示。 - ShadowGames

2

我收到了 npm ERR! notarget No matching version found for bootstrap@next. 的错误信息。 - rubebop

14

虽然Bootstrap CSS可以与任何框架（React、Vue、Angular等）一起使用，但Bootstrap JavaScript与它们不完全兼容。

以下是Bootstrap 5文档的官方解释:

尽管Bootstrap CSS可以与任何框架一起使用，但Bootstrap JavaScript与假定完全了解DOM的JavaScript框架（如React、Vue和Angular）不完全兼容。 Bootstrap和框架都可能试图改变相同的DOM元素，导致下拉菜单卡在“打开”位置的错误等问题。

文档指出，应该使用替代框架特定包而不是Bootstrap JavaScript，例如React Bootstrap、BootstrapVue和ng-bootstrap。

不幸的是，BootstrapVue只与Vue2/Nuxt2兼容，目前没有适用于Vue3/Nuxt3的版本。

- redshift

https://bootstrap-vue.org/vue3 - undefined

9

一旦您了解Bootstrap模态框的工作原理，就很容易实现它。Bootstrap模态框具有一个class为“modal fade”的div元素。当触发它时，该元素还会获得“show”和“d-block”类。此外，body标签会获得另一个class为“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。因此，模态框在页面加载时不会显示。单击链接时，我们使用一种方法来切换此变量。这将从我们的模态框中删除show属性和d-block类，并从body标签中删除modal-open属性。

- Joel G Mathew

3

Bootstrap 5必须使用Popper才能运行，可以尝试使用以下npm：

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

- salvo720

1

无论多晚，我还是要回答这个问题的，说不定几个月后我又会为另一个客户做同样的事情。

我正在将 StartBootstrap 的模板移植到 Vue 中，具体来说是 SB Admin 2 模板。起初，我无法使导航栏下拉菜单正常工作。结果发现，在 BS 4 和 BS 5 之间，数据属性发生了改变。

<a
            class="nav-link collapsed"
            href="#"
            data-toggle="collapse"
            data-target="#collapseTwo"
            aria-expanded="true"
            aria-controls="collapseTwo"
          >
            <i class="fas fa-fw fa-cog"></i>
            <span>Components</span>
          </a>
          <div
            id="collapseTwo"
            class="collapse"
            aria-labelledby="headingTwo"
            data-parent="#accordionSidebar"
          >
            <div class="bg-white py-2 collapse-inner rounded">
              <h6 class="collapse-header">Custom Components:</h6>
              <a class="collapse-item" href="buttons.html">Buttons</a>
              <a class="collapse-item" href="cards.html">Cards</a>
            </div>
          </div>

如果现有的data-属性之前引用了bootstrap功能，请将-bs添加到现有的data-属性中。请勿仅使用Cntrl-F和替换。

以下是上述示例的结果。


<a
            class="nav-link collapsed"
            href="#"
            data-bs-toggle="collapse"
            data-bs-target="#collapseTwo"
            aria-expanded="true"
            aria-controls="collapseTwo"
          >
            <i class="fas fa-fw fa-cog"></i>
            <span>Components</span>
          </a>
          <div
            id="collapseTwo"
            class="collapse"
            aria-labelledby="headingTwo"
            data-parent="#accordionSidebar"
          >
            <div class="bg-white py-2 collapse-inner rounded">
              <h6 class="collapse-header">Custom Components:</h6>
              <a class="collapse-item" href="buttons.html">Buttons</a>
              <a class="collapse-item" href="cards.html">Cards</a>
            </div>
          </div>

编辑：以上假设您已经按照此答案操作

https://dev59.com/alEG5IYBdhLWcg3weOkT#65555991

- DevOverlord

1

如果您正在使用 Bootstrap 的 sass 文件（请参考 https://getbootstrap.com/docs/5.2/customize/css-variables/），您可以轻松地去除 "-bs"。因此，无需更改任何代码，只需将 SASS 中的 $prefix 变量更改为 ""。 - mkours

0

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

- kiarash shamaii

-4

为了让Bootstrap与SSR配合使用，您不能：

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 包添加到您的头文件即可。注意：由于已在组件中导入CSS，因此现在无需添加CSS。

- Jens

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Zim · Accepted Answer

Bootstrap 5 不再需要 jQuery，因此与 Vue 结合使用更加容易，也不再需要像 bootstrap-vue 这样的库。

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

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

接下来，将Bootstrap CSS和JS组件添加到Vue项目的入口点(即：src/main.js)中...

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

那么，使用Bootstrap组件最简单的方法是通过data-bs-属性。例如，这里是Bootstrap Collapse组件...

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

带有Navbar组件的演示

或者，您可以导入任何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>

演示 | 阅读更多