Using Bootstrap 5 with Vue 3

我想使用启动5与 Vue 3。由于 Bootstrap 5使用普通的 JS (没有 JQuery) ，我可以在 Vue 3项目中直接使用 Bootstrap 5(不使用 Bootstrap-Vue)吗？有人能指导我如何使用与 Vue 3引导5？

111605 次浏览
小开
最佳答案

Bootstrap 5不再需要 jQuery，所以 Vue 更容易使用，也不再需要 Bootstrap-Vue 这样的库。

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

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-属性。

<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 组件。

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 | 继续读

小开

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

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

Import Bootstrap to 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

小开

一旦理解了 Bootstrap 模式的工作原理，就很容易实现这一点。Bootstrap 模态有一个包含 modal fade类的 div 元素。当它被触发时，这个元素也会得到 show和 d-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。因此，模态将不会显示在页面加载。在单击链接时，我们使用一个方法来切换这个变量。这将从我们的 modalm 中删除 show 属性和 d-block 类，并从 body 标记中删除 modal-open属性。

小开

please add this package : npm install --save @popperjs/core

小开

Bootstrap 5必须有 popper 才能运行，试试这个 npm:

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

要使引导工作与 战略科学军团你可以 没有:

import "bootstrap";

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

document is not defined

这不是一个最佳的解决方案，但它将工作

npm install bootstrap

并且只在您的 style 标签中导入 bootstrap scss，这样您就可以访问 bootstrap 变量等。

<style lang="scss">


@import 'bootstrap/scss/bootstrap';


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


</style>

然后加入引导程序 捆绑到你的头部。注意: 现在您不必添加 css，因为它已经导入到您的组件中了。

小开

虽然 Bootstrap CSS 可以与 任何框架(React，Vue，Angular 等)一起使用，但是 < strong > Bootstrap JavaScript 与它们并不完全兼容。

以下是 Bootstrap 5博士的官方推理:

虽然 Bootstrap CSS 可以与任何框架一起使用，但是 Bootstrap JavaScript 与诸如 React、 Vue 和 Angular 这样的 JavaScript 框架并不完全兼容，这些框架都假定对 DOM 有充分的了解。Bootstrap 和框架都可能试图改变相同的 DOM 元素，导致像下拉列表这样的 bug 停留在“打开”的位置。

文档状态使用替代框架特定的包，而不是 Bootstrap JavaScript，如 React Bootstrap、 BootstrapVue和 鞋带。

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


提交答案