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;但是想要在外也可以访问内…

数据结构第十一天(栈)

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

[React] ref属性

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

【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;为论文提出问题…

【操作系统·考研】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;&#…

去照片背景的方法有哪些?分享这些简单的方法给你

在忙碌的日常工作中&#xff0c;不少朋友经常需要整理大量的图片素材。有时候&#xff0c;我们需要将那些带有背景色的图片转换成透明素材&#xff0c;这样在其他场合使用起来会更加方便。那么&#xff0c;有没有一种简便的方法&#xff0c;能将图片的背景去掉&#xff0c;轻松…

重学Java 13.面向对象.1

在熟悉的事物中循环 ——24.2.7 一、static关键字 1.static关键字的介绍以及基本使用 1.概述&#xff1a;static是一个静态关键字 2.使用&#xff1a; a.修饰一个成员变量&#xff1a; static 数据类型 变量名 b.修饰一个方法&#xff1a; 修饰符 static 返回值类型 方法名&am…

【办公技巧】如何设置Word文档部分内容无法编辑?

工作中&#xff0c;我们可能会在word中制作一些请柬、表格之类的&#xff0c;有些文件内容不想要进行修改&#xff0c;为了防止他人随意修改内容。我们可以设置限制编辑&#xff0c;可以对一部分内容设置限制编辑&#xff0c;具体方法如下&#xff1a; 我们将需要将可以编辑的…

作业2.6

一、填空题 1、一个类的头文件如下所示&#xff0c;num初始化值为5&#xff0c;程序产生对象T&#xff0c;且修改num为10&#xff0c;并使用show()函数输出num的值10。 #include <iostream.h> class Test { private: static int num; public: Test(int); void sh…