vue项目集成booststrap

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>
</ul>

4.效果

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/453934.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Linux ---- Shell编程之免交互

一、Here Document 多行重定向 1、Here Document定义 使用I/O重定向的方式将命令列表提供给交互式程序标准输入的一种替代品Here Document 是标准输 入的一种替代品&#xff0c;可以帮助脚本开发人员不必使用临时文件来构建输入信息&#xff0c;而是直接就地生产出一个文件…

数据类型完整版

第三章 数据类型 3.1 Key操作 3.1.1 相关命令 序号命令语法描述1DEL key该命令用于在 key 存在时删除 key2DUMP key序列化给定 key &#xff0c;并返回被序列化的值3EXISTS key检查给定 key 是否存在&#xff0c;存在返回1&#xff0c;否则返回04EXPIRE key seconds为给定 k…

新兴人群消费观察:小红书话题浏览量20亿+,数据调研内容策略

近年&#xff0c;由“宅经济”延伸出的懒人经济持续高热。随现代生活观念和产品技术发展&#xff0c;“懒人经济”不止于家门&#xff0c;一波新兴人群正悄然发生变化……本期&#xff0c;笔者想就此进行小红书数据观察&#xff0c;挖掘其主流内容方向。 “新懒人主义”崛起&am…

《PCI Express体系结构导读》随记 —— 第II篇 第4章 PCIe总线概述(7)

接前一篇文章&#xff1a;《PCI Express体系结构导读》随记 —— 第II篇 第4章 PCIe总线概述&#xff08;6&#xff09; 4.1 PCIe总线的基础知识 与PCI总线不同&#xff0c;PCIe总线使用端到端的连接方式&#xff0c;在一条PCIe链路的两端只能各连接一个设备&#xff0c;这两个…

前端小案例——动态导航栏文字(HTML + CSS, 附源码)

一、前言 实现功能: 这案例是一个具有动态效果的导航栏。导航栏的样式设置了一个灰色的背景&#xff0c;并使用flex布局在水平方向上平均分配了四个选项。每个选项都是一个li元素&#xff0c;包含一个文本和一个横向的下划线。 当鼠标悬停在选项上时&#xff0c;选项的文本颜色…

19113133262(微信同号)【主题广范|见刊快】2024年新材料与应用化学国际学术会议(ICNMAC 2024)

【主题广范|见刊快】2024年新材料与应用化学国际学术会议(ICNMAC 2024) 2024 International Conference New Materials and Applied Chemistry(ICNMAC 2024) 一、【会议简介】 会议背景&#xff1a;随着科技的飞速发展&#xff0c;新材料与应用化学领域的研究成果日益丰富。为…

Golang专家级教程:crypto/rand 库的使用技巧与最佳实践

Golang专家级教程&#xff1a;crypto/rand 库的使用技巧与最佳实践 引言&#xff1a;为什么选择 crypto/randcrypto/rand 基本概念与原理1. 加密安全的伪随机数生成器&#xff08;CSPRNG&#xff09;2. 操作系统的随机数源3. 应用场景 如何使用 crypto/rand&#xff1a;基础示例…

canvas路径剪裁clip(图文示例)

查看专栏目录 canvas实例应用100专栏&#xff0c;提供canvas的基础知识&#xff0c;高级动画&#xff0c;相关应用扩展等信息。canvas作为html的一部分&#xff0c;是图像图标地图可视化的一个重要的基础&#xff0c;学好了canvas&#xff0c;在其他的一些应用上将会起到非常重…

InTouch WinCC多数据轴趋势曲线开发

InTouch新型报表&#xff0c;纯代码实现【免插件】 InTouch/WinCC通用报表控件CommReport V1.0.0发布 【InTouch】历史报警/历史事件插件-报表统计、分析、导出、打印&#xff08;图文讲解&#xff09;V2.1.6更新版下载 InTouch/WinCC/iFix/组态王 belt带图 InTouch 流水效…

精雕细琢的文档体验:Spring Boot 与 Knife4j 完美交汇

欢迎来到我的博客&#xff0c;代码的世界里&#xff0c;每一行都是一个故事 精雕细琢的文档体验&#xff1a;Spring Boot 与 Knife4j 完美交汇 前言Knife4j 与 Swagger 的区别1. 特性与优劣势对比&#xff1a;Knife4j&#xff1a;Swagger&#xff1a; 2. 选择 Knife4j 的理由&a…

JVM-双亲委派机制

双亲委派机制定义 双亲委派机制指的是&#xff1a;当一个类加载器接收到加载类的任务时&#xff0c;会自底向上查找是否加载过&#xff0c; 再由顶向下进行加载。 详细流程 每个类加载器都有一个父类加载器。父类加载器的关系如下&#xff0c;启动类加载器没有父类加载器&am…

CSS 闪电按钮效果

<template><view class="const"><div class="voltage-button"><button>闪电按钮</button><svg version="1.1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox=&q…