当前位置：首页 > news >正文

Vue项目集成bootstrap步骤及动态静态修改属性样式完整示例

news 2025/11/12 15:12:31

Vue + Bootstrap 完整集成与样式控制示例

一、集成步骤

安装

npm install bootstrap@5
# 如需 Vue 组件化封装，再加
npm install bootstrap-vue

全局引入（任选其一）

方式 A：直接在 main.js 里

import 'bootstrap/dist/css/bootstrap.min.css'
import 'bootstrap/dist/js/bootstrap.bundle.min.js'

方式 B：使用 bootstrap-vue 插件

import { createApp } from 'vue'
import App from './App.vue'
import BootstrapVue from 'bootstrap-vue'
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'createApp(App).use(BootstrapVue).mount('#app')

按需自定义（可选）
安装 Sass：

npm install sass sass-loader --save-dev

新建 src/assets/custom.scss：

$primary: #ff6347;
@import '~bootstrap/scss/bootstrap';

在 main.js 中引入：

import './assets/custom.scss'

二、静态与动态样式控制示例

静态 class

<template><div class="container"><h1 class="text-center text-primary">Hello Bootstrap</h1><button class="btn btn-outline-secondary">Static Button</button></div>
</template>

动态 class

<template><div :class="['btn', { 'btn-success': isActive, 'btn-warning': !isActive }]">Dynamic Class</div>
</template><script setup>
import { ref } from 'vue'
const isActive = ref(true)
setTimeout(() => { isActive.value = false }, 2000)
</script>

动态 style

<template><div :style="dynamicStyle">Dynamic Style</div>
</template><script setup>
import { ref, computed } from 'vue'
const fontSize = ref(16)
const color = ref('blue')const dynamicStyle = computed(() => ({fontSize: fontSize.value + 'px',color: color.value,padding: '1rem',backgroundColor: '#f5f5f5'
}))// 两秒后变大变红
setTimeout(() => {fontSize.value = 24color.value = 'red'
}, 2000)
</script>

数组语法合并多组样式

<template><div :style="[baseStyle, overrideStyle]">Merged Styles</div>
</template><script setup>
const baseStyle = { fontSize: '14px', color: 'gray' }
const overrideStyle = { fontSize: '20px', fontWeight: 'bold' }
</script>

三、常见问题速查