后端开发教程 - Java、Spring Boot 实战 - msg200.com
将 Bootstrap 5 与 Vue.js 结合使用
在 Vue 中安装 Bootstrap 5
在 Vue 中使用 Bootstrap 5
过去，为了将Bootstrap 与 Vue 一起使用，您必须使用第三方包装库，例如 bootstrap-vue。
但是，现在 Bootstrap 5 不再需要 jQuery，在你的 Vue 应用中使用它就容易多了，而且不会有任何冲突！😲 现在 Bootstrap 5 组件被编写为原生 JS 插件，你可以更好地与 Vue 的最佳模式和实践保持一致。
这也意味着可以使用 Bootstrap 5 组件，而无需像 bootstrap-vue 这样的第三方库。
在 Vue 中安装 Bootstrap 5
安装 bootstrap 就像在 Vue 项目中安装任何其他 JS 模块一样，使用npm install或将其添加到package.json.
npm install bootstrap
在 Vue 中使用 Bootstrap 5
在 Vue 中使用 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>
或者，您可以导入任何 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>
--
这是另一个组件化 Collapse JS 插件的示例：
const collapse = Vue.component('bsCollapse', {
template: `
<div>
<slot name="trigger"></slot>
<slot name="target"></slot>
</div>
`,
props: {
toggle: {
required: false,
default: false
},
id: {
required: true
}
},
mounted() {
var trigger = this.$slots['trigger'][0].elm
var target = this.$slots['target'][0].elm
target.classList.add('collapse')
target.setAttribute('id', this.id);
trigger.setAttribute('data-bs-target', '#' + this.id);
trigger.setAttribute('data-bs-toggle','collapse');
new Collapse(target, {toggle: this.toggle })
},
})
<bs-collapse id="collapse1">
<button class="btn btn-info" slot="trigger">
Bootstrap collapse
</button>
<div slot="target">Toggle the display of this collapsible content!</div>
</bs-collapse>
当然，使用类似的库bootstrap-vue仍然更容易一些，因为它们已经为你“包装”了所有 Bootstrap 组件。但如果你只使用 Bootstrap CSS，并且只需要少数 JS 组件的功能，这种技术会很有帮助。
此外，这里还有一些 Vue + Bootstrap 5 组件示例供您参考……
Vue Bootstrap 5 模态框
Vue Bootstrap 5 下拉菜单
Vue Bootstrap 5 工具提示
Vue Bootstrap 5 画布外