在Vue 3中使用Bootstrap 5

回答 7 浏览 10.8万 2021-01-03

我想在Vue 3中使用Bootstrap 5。由于Bootstrap 5使用vanilla JS(没有JQuery),我可以在Vue 3项目中直接使用Bootstrap 5吗(不使用Bootstrap-Vue)?谁能指导我如何在Vue 3中使用Bootstrap 5?

Aditya Sharma 提问于2021-01-03
看看这个。therichpost.com/how-to-add-bootstrap-5-in-vue-3-applicationTherichpost 2021-05-10
我为Vue 3与Bootstrap 5和其他一些东西设置了一个小模板。可能会对你有所帮助 - github.com/howbizarre/…howbizarre 2021-06-28
7 个回答
#1楼 已采纳
得票数 173

Bootstrap 5不再需要jQuery,所以它更容易与Vue一起使用,也不再需要bootstrap-vue这样的库了。

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

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的折叠组件...

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

带导航条组件的演示

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

演示|阅读更多

Zim 提问于2021-01-03
Zim 修改于2022-04-06
请您举例说明如何使用getbootstrap.com/docs/5.0/forms/select,而无需手动编写所有选项(反正它们是动态的),但类似于bootstrap-vue.org/docs/components/form-select#form-selectMarius 2021-06-14
遗憾的是,如果你使用的是TypeScript,这并不奏效:"TS7016。无法找到模块'bootstrap'的声明文件。Coreus 2021-07-02
请问你是如何在.vue组件文件中使用vue-class-component来包装bootstrap的呢?yossi elimelech 2021-07-29
我不认为你有一个使用Vue组成API的多页面应用程序的例子?我在让弹出式窗口工作时遇到了一些问题。mellows 2022-07-05
@ShadowGames -- 一个是JS的,另一个是CSS的。Zim 2022-07-15
#2楼
得票数 54

是的,你可以在没有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>

其结果是。

enter image description here

Muzaffer Kadir Yılmaz 提问于2021-02-26
user1338062 修改于2021-04-05
vuejs的代码在哪里?Lao Shaw 2021-11-16
@LaoShaw 没有额外的代码。一旦你导入了这个答案中的文件,你就可以在根应用程序托管的所有其他组件中获得CSS。Nicholas 2022-01-31
虽然bt5没有使用jquery,但bt5可能仍然使用一些直接修改DOM的本地js,这将无法与vue3'的虚拟DOM配合使用。Lao Shaw 2022-02-13
添加popper.min.js的情况如何?这不是必须的吗?不幸的是,上面显示的代码对我不起作用。HTML在DOM中,但当我点击按钮时,弹出窗口没有显示。ShadowGames 2022-07-15
#3楼
得票数 8

一旦你理解了Bootstrap模版的工作原理,就很容易实现这一点。Bootstrap模版有一个类为modal fade的div元素。当它被触发时,这个元素也会得到showd-block类。此外,body标签得到一个额外的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。所以模态不会在页面加载时显示出来。当点击一个链接时,我们使用一个方法来切换这个变量。这将从我们的模态中移除显示属性和d-block类,并从body标签中移除modal-open属性。

Joel G Mathew 提问于2021-06-20
#4楼
得票数 8

虽然Bootstrap的CSS可以与任何框架(React、Vue、Angular等)一起使用,但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.

文档指出,要使用其他特定框架的包来代替Bootstrap的JavaScript,如React BootstrapBootstrapVue,以及ng-bootstrap等。

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

redshift 提问于2022-05-18
#5楼
得票数 0

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

kiarash shamaii 提问于2022-02-22
#6楼
得票数 0

bootstrap 5必须要有popper才能运行,用这个npm试试。

npm install --save bootstrap 
npm i @popperjs/core
salvo720 提问于2022-02-22
salvo720 修改于2022-02-23
#7楼
得票数 -4

要使引导程序与 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 bundle添加到你的header注意:你不需要添加css,因为它已经被导入到你的组件中了。

Jens 提问于2022-03-10
Jens 修改于2022-07-03