vue项目集成booststrap

最新推荐文章于 2024-05-11 09:44:49 发布

小赖同学啊

最新推荐文章于 2024-05-11 09:44:49 发布

阅读量227

点赞数

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

本文链接：https://blog.csdn.net/testManger/article/details/136028816

版权

python 同时被 3 个专栏收录

126 篇文章 0 订阅 ¥99.90 ¥299.90

订阅专栏

超级会员免费看

测试平台

15 篇文章 1 订阅

订阅专栏

jquery

5 篇文章 0 订阅

订阅专栏

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

摘要由CSDN通过智能技术生成

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>

了解本专栏