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.mzph.cn/news/672640.shtml

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

相关文章

(Python)字典列表数据本地存储工具

前言 一个简单的实现简便 "列表字典" 数据存储本地。 适合不会SQL但又想实现数据存储本地的同学。 操作使用都非常简单。 文件只做了简单的加密处理&#xff0c;如果需要复杂加密的同学可以修改加密函数。 温馨提示&#xff1a; 1.使用前&#xff0c;在项目目录…

CentOS7如何安装宝塔面板并实现固定公网地址远程访问

文章目录 一、使用官网一键安装命令安装宝塔二、简单配置宝塔&#xff0c;内网穿透三、使用固定公网地址访问宝塔 宝塔面板作为建站运维工具&#xff0c;适合新手&#xff0c;简单好用。当我们在家里/公司搭建了宝塔&#xff0c;没有公网IP&#xff0c;但是想要在外也可以访问内…

使用Spring AOP实现对外接口的日志自动打印

文章目录 一、引言二、使用AOP实现日志打印三、logback单独打印api调用信息 一、引言 相信我们都有过这样的经历&#xff0c;在提供第三方对外接口时&#xff0c;为了防止推诿扯皮&#xff0c;我们会在自己接口被调用时日志打印一下第三方的调用参数&#xff0c;再在业务逻辑结…

数据结构第十一天(栈)

目录 前言 概述 源码&#xff1a; 主函数&#xff1a; 运行结果&#xff1a; ​编辑 前言 今天简单的实现了栈&#xff0c;主要还是指针操作&#xff0c;soeasy! 友友们如果想存储其他内容&#xff0c;只需修改结构体中的内容即可。 哈哈&#xff0c;要是感觉不错&…

[React] ref属性

简介 ref 即 reference &#xff0c;是 React 提供给我们的安全访问 DOM 元素或者某个组件实例的句柄。 组件被调用时会新建一个该组件的实例&#xff0c;而 ref 就会指向这个实例。它可以是一个回调函数&#xff0c;这个回调函数会在组件被挂载后立即执行。 为了防止内存泄漏…

数论 之 欧拉函数篇

欧拉函数 定义&#xff1a;1 ∼ N 中与 N 互质的数的个数被称为欧拉函数&#xff0c;记为 ϕ(N) 公式&#xff1a;若 N p1^a1 * p2^a2 * … * pk^ak 所有的pi都是N的质因数 那么 ϕ(N) N * (p1-1)/p1 * (p2-1)/p2 * … *(pk-1)/pk; 性质 : 性质1&#xff1a;如果n是质数&…

【C生万物】C语言分支和循环语句

&#x1f4da;博客主页&#xff1a;爱敲代码的小杨. ✨专栏&#xff1a;《Java SE语法》 | 《数据结构与算法》 | 《C生万物》 ❤️感谢大家点赞&#x1f44d;&#x1f3fb;收藏⭐评论✍&#x1f3fb;&#xff0c;您的三连就是我持续更新的动力❤️ &#x1f64f;小杨水平有…

京东云StarDB for openGauss实现混合多云场景元数据安全可控

推进产业数字化&#xff0c;构筑数智供应链技术底座&#xff0c;绕不开全球信息技术基础三大件之一的数据库。以技术创新为手段&#xff0c;以满足未来业务需求为目标&#xff0c;京东云自主研发的分布式数据库StarDB在长期的业务实践过程中不断进化&#xff0c;在海量且复杂的…

深入理解网络编程之BIO和NIO

目录 原生JDK网络编程BIO BIO通信模型服务端代码 BIO通信模型客户端代码 伪异步模型服务端代码&#xff08;客户端跟之前一致&#xff09; 原生JDK网络编程NIO 什么是NIO&#xff1f; NIO和BIO的主要区别 阻塞与非阻塞IO NIO之Reactor模式 NIO中Reactor模式的基本组成…

零基础学Python之网络编程

1.什么是socket 官方定义&#xff1a; 套接字&#xff08;socket&#xff09;是一个抽象层&#xff0c;应用程序可以通过它发送或接收数据&#xff0c;可对其进行像对文件一样的打开、读写和关闭等操作。套接字允许应用程序将I/O插入到网络中&#xff0c;并与网络中的其他应用…

ChatGPT论文指南|ChatGPT论文写作过程中6个润色与查重提示词

论文完成初稿之后&#xff0c;一般情况下&#xff0c;宝子们还需要找专家给我们提出评审意见。找专家评审其实并不容易&#xff0c;即使对老师来说&#xff0c;找人评审论文也是一件苦活。我们这个时候可以通过文字提示让 ChatGPT充当我们的评审专家&#xff0c;为论文提出问题…

Json hijacking/Json 劫持注入漏洞原理以及修复方法

漏洞名称&#xff1a;Json hijacking 、Json劫持漏洞、Json注入攻击 漏洞描述&#xff1a; JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。易于人阅读和编写。同时也易于机器解析和生成&#xff0c;这种纯文本的数据交互方式由于可以天然的在浏览器中使用&a…

开源软件的未来发展趋势与应对新挑战和机遇

引言 开源软件&#xff0c;以其透明性、可协作性和成本效益&#xff0c;不仅仅是一种编写和分发软件的模式&#xff0c;更是一场日益扩展的技术革命。随着越来越多企业和个人用户认识到其潜在价值&#xff0c;我们有理由相信开源将继续推动软件行业的未来变革。本篇博文旨在预…

【操作系统·考研】I/O管理概述

1.I/O设备 1.1 块设备 信息交换以数据块为单位&#xff0c;它属于有结构设备。 块设备传输速率较高&#xff0c;可寻址&#xff0c;且可对该设备随机地的读写。 栗子&#x1f330;&#xff1a;磁盘。 1.2 字符设备 信息交换以字符为单位&#xff0c;属于无结构类型。 字符…

电力负荷预测 | 基于LSTM、TCN的电力负荷预测(Python)

文章目录 效果一览文章概述源码设计参考资料效果一览 文章概述 电力负荷预测 | 基于LSTM、TCN的电力负荷预测(Python) 源码设计 #------------------

一文彻底搞懂Redis的三种集群模式

文章目录 1. 主从模式1.1 基本原理1.2 工作机制1.3 优缺点 2. 哨兵模式2.1 基本原理2.2 工作机制2.3 优缺点 3. 集群模式3.1 基本原理3.2 工作机制3.3 优缺点 4. 总结 redis高可用的三种模式&#xff1a;主从模式&#xff0c;哨兵模式&#xff0c;集群模式。 所谓的高可用&…

如何修改远程端服务器密钥

前言 一段时间没改密码后&#xff0c;远程就会自动提示CtrlAltEnd键修改密码。但我电脑是笔记本&#xff0c;没有end键。打开屏幕键盘按这三个键也没用。 解决方法 打开远程 1、远程端WINC 输入osk 可以发现打开了屏幕键盘 2、电脑键盘同时按住CtrlAlt&#xff08;若自身电…

回溯法解决P2089 烤鸡问题太香啦,组合问题就用回溯法就对了!

学回溯的第二天&#xff0c;发现之前做过的一道洛谷的枚举题也可以用回溯法去解决&#xff0c;还是相当滴nice的。 先来看看leetcode上的这两道题 216.组合总和III 题目链接&#xff1a;216. 组合总和 III 思路就是比组合问题多了一个和为n的限制&#xff0c;大体还是可以…

嵌入式系统设计师

系列文章目录 1.元件基础 2.电路设计 3.PCB设计 4.元件焊接 5.板子调试 6.程序设计 7.算法学习 8.编写exe 9.检测标准 10.项目举例 11.职业规划 文章目录 第一章 计算机系统基础1、数值转换数的转换数据的存储单位 第一章 计算机系统基础 1、数值转换 数的转换 数据的存储…

解决“使用Edge浏览器每次鼠标点击会出现一个黑色边框”的问题

目录 一 问题描述 二 解决方案 三 方案来源 四 参考资料 & AI工具 一 问题描述 为了方便进行收藏夹同步&#xff0c;开始从Chrome浏览器切换到Edge浏览器。在使用Edge浏览器过程中发现“每次鼠标点击会出现一个黑色边框”&#xff08;效果如下图所示&#xff09;&#…