用bootstrap搭建侧边栏
要注意:
标签的id="v-pills-dataset1-tab"要和跳转内容的aria-labelledby="v-pills-dataset1-tab"一致
标签的aria-controls="v-pills-dataset1"要和跳转内容的id="v-pills-dataset1"一致
<!-- 左边的列(侧边栏,按钮样式) -->
<div class="col-lg-3" style="padding-top: 20px;"><div class="nav flex-column nav-pills me-3" id="v-pills-tab" role="tablist" aria-orientation="vertical"><button class="nav-link active text-start" id="v-pills-dataset1-tab" data-bs-toggle="pill" data-bs-target="#v-pills-dataset1" type="button" role="tab" aria-controls="v-pills-dataset1" aria-selected="true" style="font-size: 1.5rem; font-weight: bold;">· CCTV</button><button class="nav-link text-start" id="v-pills-dataset2-tab" data-bs-toggle="pill" data-bs-target="#v-pills-dataset2" type="button" role="tab" aria-controls="v-pills-dataset2" aria-selected="false" style="font-size: 1.5rem; font-weight: bold;">· RSS</button><button class="nav-link text-start" id="v-pills-dataset3-tab" data-bs-toggle="pill" data-bs-target="#v-pills-dataset3" type="button" role="tab" aria-controls="v-pills-dataset3" aria-selected="false" style="font-size: 1.5rem; font-weight: bold;">· ASI</button><button class="nav-link text-start" id="v-pills-dataset4-tab" data-bs-toggle="pill" data-bs-target="#v-pills-dataset4" type="button" role="tab" aria-controls="v-pills-dataset4" aria-selected="false" style="font-size: 1.5rem; font-weight: bold;">· DATASET</button></div>
</div>
<!-- 右边的列(展示图片和文字) -->
<div class="col-md-6 col-lg-9 shadow" style="padding: 20px;"><div class="tab-content" id="databaseTabsContent"><div class="tab-content" id="v-pills-tabContent"><div class="tab-pane fade show active" id="v-pills-dataset1" role="tabpanel" aria-labelledby="v-pills-dataset1-tab">1111</div><div class="tab-pane fade" id="v-pills-dataset2" role="tabpanel" aria-labelledby="v-pills-dataset2-tab">2222</div><div class="tab-pane fade" id="v-pills-dataset3" role="tabpanel" aria-labelledby="v-pills-dataset3-tab">3333</div><div class="tab-pane fade" id="v-pills-dataset4" role="tabpanel" aria-labelledby="v-pills-dataset4-tab">4444</div></div></div>
</div>
基础效果如图:
相关文章:
用bootstrap搭建侧边栏
要注意: 标签的id"v-pills-dataset1-tab"要和跳转内容的aria-labelledby"v-pills-dataset1-tab"一致 标签的aria-controls"v-pills-dataset1"要和跳转内容的id"v-pills-dataset1"一致 <!-- 左边的列(侧边栏…...
手眼标定工具操作文档
1.手眼标定原理介绍 术语介绍 手眼标定:为了获取相机与机器人坐标系之间得位姿转换关系,需要对相机和机器人坐标系进行标定,该标定过程成为手眼标定,用于存储这一组转换关系的文件称为手眼标定文件。 ETH:即Eye To …...
巧记斜边函数hypot
hypot是一个数学函数,源于英文"hypotenuse(斜边)",hypot(a, b)返回直角边边长为a、b的直角三角形(right-angled triangle)的斜边长度。该函数定义在<math.h>头文件中,其功能相当…...
STM32单片机芯片与内部33 ADC 单通道连续DMA
目录 一、ADC DMA配置——标准库 1、ADC配置 2、DMA配置 二、ADC DMA配置——HAL库 1、ADC配置 2、DMA配置 三、用户侧 1、DMA开关 (1)、标准库 (2)、HAL库 2、DMA乒乓 (1)、标准库 ÿ…...
【程序人生】掌握一门编程语言
掌握一门编程语言不仅仅是能够编写正确的语法,它还涉及到对语言特性、工具链、最佳实践以及解决问题的能力有深入的理解。以下是衡量你是否掌握了某门编程语言的关键指标: 语法与基本概念 语法熟悉度:能够在不查阅文档的情况下写出正确的代码…...
数据库发生了死锁怎么办
当项目中存在公共的数据表,比如日志表,同时存在对这张表的读写操作,或者是对数据量较大的表加索引同时伴随其他并发操作,那么这张表就有较高概率发生死锁。 现象:对于这张表的任何操作都会被阻塞,项目出现…...
传递函数的幅值在0到1之间
为什么所有传递函数的幅值应该在 0 到 1 之间 在声学、振动学和信号处理等领域,传递函数的幅值表示系统对输入信号的响应幅度。在许多声学实验中,传递函数的幅值反映了声波的传输或反射特性。理论上,所有传递函数的幅值应当在 0 到 1 之间&a…...
[Unity Shader]【图形渲染】 数学基础4 - 矩阵定义和矩阵运算详解
矩阵是计算机图形学中的重要数学工具,尤其在Shader编程中,它被广泛用于坐标变换、投影变换和模型动画等场景。本文将详细介绍矩阵的定义、基本运算以及如何在Shader中应用矩阵,为初学者打下坚实的数学基础。 一、什么是矩阵? 矩阵是一个由数字排列成的长方形数组,通常记作…...
蓝桥杯练习生第四天
小蓝每天都锻炼身体。 正常情况下,小蓝每天跑 11 千米。如果某天是周一或者月初(11 日),为了激励自己,小蓝要跑 22 千米。如果同时是周一或月初,小蓝也是跑 22 千米。 小蓝跑步已经坚持了很长时间&#x…...
Jmeter压测实战:Jmeter二次开发之自定义函数
🍅 点击文末小卡片,免费获取软件测试全套资料,资料在手,涨薪更快 Jmeter是Apache基金会下的一款应用场景非常广的压力测试工具,具备轻量、高扩展性、分布式等特性。Jmeter已支持实现随机数、计数器、时间戳、大小写转换…...
梯度(Gradient)和 雅各比矩阵(Jacobian Matrix)的区别和联系:中英双语
雅各比矩阵与梯度:区别与联系 在数学与机器学习中,梯度(Gradient) 和 雅各比矩阵(Jacobian Matrix) 是两个核心概念。虽然它们都描述了函数的变化率,但应用场景和具体形式有所不同。本文将通过…...
[python SQLAlchemy数据库操作入门]-02.交易数据实体类建立
哈喽,大家好,我是木头左! 为了顺利地使用SQLAlchemy进行股票交易数据的处理,首先需要搭建一个合适的开发环境。这包括安装必要的软件包以及配置相关的依赖项。 安装Python及虚拟环境 下载并安装Python(推荐使用最新版)。创建一个新的虚拟环境以避免依赖冲突。python -m …...
python打包exe文件
由于用户需要,将采集数据解析成txt文件,为了方便使用,将python解析方法打包成exe文件供用户使用 安装环境 ./pip.exe install pyinstaller -i https://pypi.tuna.tsinghua.edu.cn/simplepython导入需要的包 import tkinter as tk from tkin…...
C# opencvsharp 流程化-脚本化-(2)ROI
ROI ROI也是经常需要使用的方法。特别是在图像编辑中。ROI又称感兴趣的区域,但是图像是矩阵是矩形的,感兴趣的是乱八七糟的,所以还有一个Mask需要了解一下的。 public class RoiStep : IImageProcessingStep{public ImageProcessingStepType…...
【Python】基于Python的CI/CD工具链:实现自动化构建与发布
《Python OpenCV从菜鸟到高手》带你进入图像处理与计算机视觉的大门! 解锁Python编程的无限可能:《奇妙的Python》带你漫游代码世界 在现代软件开发中,持续集成(CI)和持续交付(CD)已经成为提高开发效率和软件质量的重要实践。CI/CD流程帮助开发团队自动化构建、测试、…...
Flutter组件————Scaffold
Scaffold Scaffold 是一个基础的可视化界面结构组件,它实现了基本的Material Design布局结构。使用 Scaffold 可以快速地搭建起包含应用栏(AppBar)、内容区域(body)、抽屉菜单(Drawer)、底部导…...
2024年《网络安全事件应急指南》
在这个信息技术日新月异的时代,网络攻击手段的复杂性与日俱增,安全威胁层出不穷,给企事业单位的安全防护能力带 来了前所未有的挑战。深信服安全应急响应中心(以下简称“应急响应中心”)编写了《网络安全事件应急指南》…...
通过smem 定时检测系统内存占用情况
编写定时任务脚本 cat >> /usr/local/bin/smem.sh <<-"EOF"if [[ ! -d /var/log/smem ]];thenmkdir -p /var/log/smem fi smem -tk >> /var/log/smem/smem.log EOFchmod 755 /usr/local/bin/smem.sh配置定时任务 echo "" >> /et…...
京准电钟:电厂自控NTP时间同步服务器技术方案
京准电钟:电厂自控NTP时间同步服务器技术方案 京准电钟:电厂自控NTP时间同步服务器技术方案 随着计算机和网络通信技术的飞速发展,火电厂热工自动化系统数字化、网络化的时代已经到来。一方面它为控制和信息系统之间的数据交换、分析和应用…...
Face to face
1.西班牙添加5G volte 首先carrierconfig里使能 <boolean name"carrier_nr_available_bool" value"true" /> <boolean name"carrier_volte_available_bool" value"true" /> 其次 组件apn配置ims参数 2.印度j…...
C语言中的文件操作:基础与实践
欢迎来到我的:世界 希望作者的文章对你有所帮助,有不足的地方还请指正,大家一起学习交流 ! 目录 前言内容文件文件操作:数据库文件概述:文件的打开和关闭理解流的概念文件指针 文件的打开与关闭文件的读和写文件的顺序…...
从地铁客流讲开来:十二城日常地铁客运量特征
随着城市化进程的加速和人口的不断增长,公共交通系统在现代都市生活中扮演着日益重要的角色。地铁作为高效、环保的城市交通方式,已经成为居民日常出行不可或缺的一部分。本文聚焦于2024年10月28日至12月1日期间,对包括北上广深这四个超一线城…...
VMWare 的克隆操作
零、碎碎念 VMWare 的这个克隆操作很简单,单拎出来成贴的目的是方便后续使用。 一、操作步骤 1.1、在“源”服务器上点右键,选择“管理--克隆” 1.2、选择“虚拟机的当前状态”为基础制作克隆,如下图所示,然后点击“下一页” 1.3、…...
经济学 ppt 2 部分
前言 上一次复习经济学是好久之前了,看了第一章的 ppt ,好像重点就是谁是软件经济学之父。昨天老师讲了一下题型,20 分选择题, 20 分判断题,20 分计算题,6 6 8 三个计算题,25 分表格࿰…...
R(4.4.2)的下载与安装(Windows系统)
进入官网:https://www.r-project.org/ 首先点击CRAN链接,选择一个镜像链接地址 进入CRAN所显示页面如下: 选择China下的一个镜像站点,本文选择第一个 选择windows系统下载 点击“base” 下载: 打开下载的文件 默认中文…...
一文流:JVM精讲(多图提醒⚠️)
一文流系列是作者苦于技术知识学了-忘了,背了-忘了的苦恼,决心把技术知识的要点一笔笔✍️出来,一图图画出来,一句句讲出来,以求刻在🧠里。 该系列文章会把核心要点提炼出来,以求掌握精髓,至于其他细节,写在文章里,留待后续回忆。 目前进度请查看: :::info https:/…...
C盘下的文件夹
在Windows操作系统中,C盘通常是系统安装的盘符,其中包含了许多重要的文件夹和系统文件。以下是一些常见的文件夹:系统文件夹 Windows: 包含Windows操作系统的核心文件和组件。 Program Files: 存储大多数安装的软件程序。 Program Files (x86…...
视频直播点播平台EasyDSS与无人机技术的森林防火融合应用
随着科技的飞速发展,无人机技术以其独特的优势在各个领域得到了广泛应用,特别是在森林防火这一关键领域,EasyDSS视频平台与无人机技术的融合应用更是为传统森林防火手段带来很大的变化。 一、无人机技术在森林防火中的优势 1、快速响应与高…...
通过阿里云 Milvus 与 PAI 搭建高效的检索增强对话系统
背景介绍 阿里云向量检索服务Milvus版(简称阿里云Milvus)是一款云上全托管服务,确保了了与开源Milvus的100%兼容性,并支持无缝迁移。在开源版本的基础上增强了可扩展性,能提供大规模 AI 向量数据的相似性检索服务。相…...
Unity 3D饼状图效果
一. 效果展示 二.基础类 using System.Collections; using System.Collections.Generic; using UnityEngine;public class DrawCylinder : MonoBehaviour {// 网格渲染器MeshRenderer meshRenderer;// 网格过滤器MeshFilter meshFilter;// 用来存放顶点数据List<Vector3>…...
OpenHarmony-4.HDI 框架
HDI 框架 1.HDI介绍 HDI(Hardware Device Interface,硬件设备接口)是HDF驱动框架为开发者提供的硬件规范化描述性接口,位于基础系统服务层和设备驱动层之间,是连通驱动程序和系统服务进行数据流通的桥梁,是…...
ArcGIS Pro 3.4新功能2:Spatial Analyst新特性,密度、距离、水文、太阳能、表面、区域分析
Spatial Analyst 扩展模块在 ArcGIS Pro 3.4 中引入了新功能和增强功能。此版本为您提供了用于表面和区域分析的新工具以及改进的密度和距离分析功能,多种用于水文分析的工具性能的提高,一些新的太阳能分析功能。 目录 1.密度分析 2.距离分析 3.水文…...
GitLab分支管理策略和最佳实践
分支管理是 Git 和 GitLab 中非常重要的部分,合理的分支管理可以帮助团队更高效地协作和开发。以下是一些细化的分支管理策略和最佳实践: 1. 分支命名规范 • 主分支:通常命名为 main 或 master,用于存放稳定版本的代码。 • …...
uniapp自定义树型结构数据弹窗,给默认选中的节点,禁用所有子节点
兼容H5、安卓App、微信小程序 实现逻辑:给默认选中节点的所有子节点添加一个disabled属性,以此禁用子节点。 /components/sonTreeNode/sonTreeNode.vue 封装成组件 <template><view><view :class"[item,item.is_level1?pL1:item…...
方正畅享全媒体新闻采编系统 screen.do SQL注入漏洞复现
0x01 产品简介 方正畅享全媒体新闻生产系统是以内容资产为核心的智能化融合媒体业务平台,融合了报、网、端、微、自媒体分发平台等全渠道内容。该平台由协调指挥调度、数据资源聚合、融合生产、全渠道发布、智能传播分析、融合考核等多个平台组成,贯穿新闻生产策、采、编、发…...
5G 模组 RG500Q常用AT命令
5G 模组 RG500Q常用AT命令 5G 模组 RG500Q常用AT命令 at ATQNWPREFCFG\"mode_pref\",nr5g && sleep 1 at ATQNWPREFCFG\"nr5g_band\",79 && sleep 1 at atqnwlock\"commo…...
day38-SSH安全登录
机器准备 什么是SSH SSH 或 Secure Shell 协议是一种远程管理协议,允许用户通过 Internet 访问、控制和修改其远程服务器。 SSH 服务是作为未加密 Telnet 的安全替代品而创建的,它使用加密技术来确保进出远程服务器的所有通信都以加密方式进行。 SS…...
U盘出现USBC乱码文件的全面解析与恢复指南
一、乱码现象初探:USBC乱码文件的神秘面纱 在数字时代,U盘已成为我们日常生活中不可或缺的数据存储工具。然而,当U盘中的文件突然变成乱码,且文件名前缀显示为“USBC”时,这无疑给用户带来了极大的困扰。这些乱码文件…...
mac iterm2 使用 lrzsz
前言 mac os 终端不支持使用 rz sz 上传下载文件,本文提供解决方法。 mac 上安装 brew install lrzsz两个脚本 注意:/usr/local/bin/iterm2-send-zmodem.sh 中的 sz命令路径要和你mac 上 sz 命令路径一致。 /usr/local/bin/iterm2-recv-zmodem.sh 中…...
京东大数据治理探索与实践 | 京东零售技术实践
01背景和方案 在当今的数据驱动时代,数据作为关键生产要素之一,其在商业活动中的战略价值愈加凸显,京东也不例外。 作为国内领先的电商平台,京东在数据基础设施上的投入极为巨大,涵盖数万台服务器、数 EB 级存储、数百…...
应该连续学一个科目,还是多学科切换?
https://www.zhihu.com/question/333420829https://www.zhihu.com/question/333420829...
游戏何如防抓包
游戏抓包是指在游戏中,通过抓包工具捕获和分析游戏客户端与服务器之间传输的封包数据的过程。抓包工具可实现拦截、篡改、重发、丢弃游戏的上下行数据包,市面上常见的抓包工具有WPE、Fiddler和Charles Proxy等。 抓包工具有两种实现方式,一类…...
asp.net core发布配置端口号,支持linux
方式一,修改配置文件 appsettings.json 找到文件 appsettings.json, 添加如下节点配置,在linux环境需要设置0.0.0.0才可以正常代表本机,然后被其他机器访问,此处设置端口8000, "Kestrel": {&quo…...
基于linux下实现的ping程序(C语言)
linux下实现的ping程序 一、设计目的 PING程序是我们使用的比较多的用于测试网络连通性的程序。PING程序基于ICMP,使用ICMP的回送请求和回送应答来工作。由计算机网络课程知道,ICMP是基于IP的一个协议,ICMP包通过IP的封装之后传递。 课程设…...
109.【C语言】数据结构之求二叉树的高度
目录 1.知识回顾:高度(也称深度) 2.分析 设计代码框架 返回左右子树高度较大的那个的写法一:if语句 返回左右子树高度较大的那个的写法二:三目操作符 3.代码 4.反思 问题 出问题的代码 改进后的代码 执行结果 1.知识回顾…...
线段覆盖(c++)
题目描述 在一条数轴上,有 N 条线段,第 i 条线段的左端点是 si,右端点是 ei。如果线段有重叠(即使是端点重叠也算是重叠),则输出 “impossible”, 如果没有重叠则输出 “possible” 。 输入格式 多组…...
SSM 仓库管理系统
🥂(❁◡❁)您的点赞👍➕评论📝➕收藏⭐是作者创作的最大动力🤞 💖📕🎉🔥 支持我:点赞👍收藏⭐️留言📝欢迎留言讨论 🔥🔥&…...
基于Python3编写的Golang程序多平台交叉编译自动化脚本
import argparse import os import shutil import sys from shutil import copy2from loguru import loggerclass GoBuild:"""一个用于构建跨平台执行文件的类。初始化函数,设置构建的主文件、生成的执行文件名称以及目标平台。:param f: 需要构建的…...
SqlSugar查询达梦数据库遇到的异常情况(续)
之前的文章提到在SqlSugar的Where函数中使用!string.IsNullOrEmpty函数查询达梦数据库时,明明数据库中有数据但就是查不出来,但相同的代码在另一台电脑上就可以正常返回数据。 以下图中的两张表数据为例,执行下面的SQL语句无法查询到数据…...
企业电子投票系统 【源码+文档】
目 录 第1部分 概 述 第2部分 分析部分 2.1.功能需求 第3部分 系统设计 3.1.功能模块设计 3.2.数据库的设计 第4部分 系统开发 4.1.数据库 4.1&a…...