vue项目集成booststrap

小赖同学啊

于 2024-02-04 16:48:45 发布

阅读量379

点赞数

CC 4.0 BY-SA版权

分类专栏： python jquery 测试平台文章标签： vue.js javascript 前端

本文链接：https://blog.youkuaiyun.com/testManger/article/details/136028816

python 同时被 3 个专栏收录

193 篇文章 ¥99.90 ¥299.90

订阅专栏

超级会员免费看

jquery

28 篇文章

订阅专栏

测试平台

23 篇文章

订阅专栏

本文介绍了如何在Vue项目中集成Bootstrap，包括通过npm安装Bootstrap 4.3版本，然后在main.js中引入并实际应用，最后展示了集成后的效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.首先安装bootstrap

npm install bootstrap

我安装的是4.3的版本

2.在main.js中引用bootstrap

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

3.实例

<ul class="list-group list-group-horizontal" v-for="item in data" :key="item.id"  >
  <li class="list-group-item">{
  
  { item.nid }}</li>
  <li class="list-group-item"> {
  
  { item.name }}</li>
  <li class="list-group-item"> {
  
  { item.price }}</li>
  <li class="list-group-item">{
  
  { item.author }}</li>
&