用bootstrap搭建侧边栏

embedded/2024/12/21 9:13:24/

要注意:
标签的id="v-pills-dataset1-tab"要和跳转内容的aria-labelledby="v-pills-dataset1-tab"一致
标签的aria-controls="v-pills-dataset1"要和跳转内容的id="v-pills-dataset1"一致

html"><!-- 左边的列(侧边栏,按钮样式) -->
<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>

基础效果如图:
在这里插入图片描述


http://www.ppmy.cn/embedded/147495.html

相关文章

python飞机大战游戏.py

python飞机大战游戏.py import pygame import random# 游戏窗口大小 WINDOW_WIDTH 600 WINDOW_HEIGHT 800# 颜色定义 BLACK (0, 0, 0) WHITE (255, 255, 255)# 初始化Pygame pygame.init()# 创建游戏窗口 window pygame.display.set_mode((WINDOW_WIDTH, WINDOW_HEIGHT))…

深度学习0-前置知识

一、背景 AI最大&#xff0c;它的目的是通过让机器模仿人类进而超越人类&#xff1b; ML次之&#xff0c;它是AI的一个分支&#xff0c;是让机器模仿人类的一种方法。开发人员用大量数据和算法“训练”机器&#xff0c;让机器自行学会如何执行任务&#xff0c;它的成功取决于…

Unity复刻胡闹厨房复盘 模块一 新输入系统订阅链与重绑定

本文仅作学习交流&#xff0c;不做任何商业用途 郑重感谢siki老师的汉化教程与代码猴的免费教程以及搬运烤肉的小伙伴 版本&#xff1a;Unity6 模板&#xff1a;3D 核心 渲染管线&#xff1a;URP ------------------------------…

ArcGIS;InVEST实践;生物多样性生境质量模型、固碳模块、城市热岛缓解(降温)模块

以InVEST模型结合实际项目进行由浅入深的实战技术讲解&#xff0c;针对学者的特点及需求进行分析&#xff0c;融合内容体系&#xff0c;对接工作实际项目及论文写作&#xff0c;解决参会者关注的重点及实际项目过程问题&#xff0c;采取逐步延伸的逻辑&#xff0c;不论您是小白…

[创业之路-201]:价值主张与APPEALS模型

目录 前言&#xff1a; 一、价值主张&#xff1a;产品的独特价值和竞争优势 二、APPEALS模型&#xff1a;用户最关心的8个维度的问题 三、价值主张与APPEALS模型的关系&#xff1a;配对 前言&#xff1a; 价值主张与APPEALS模型是两个在产品开发、市场营销和竞争分析中非常…

Spring Boot 中的 @Scheduled 定时任务以及开关控制

Scheduled注解是Spring框架&#xff08;包括Spring Boot&#xff09;中用于实现定时任务的一种方式。以下是对Scheduled注解的详细解析&#xff1a; 一、基本概念 Scheduled注解允许开发者在Spring容器中定义定时任务。通过简单地在一个方法上添加Scheduled注解&#xff0c;S…

矩阵:Input-Output Interpretation of Matrices (中英双语)

矩阵的输入-输出解释&#xff1a;深入理解与应用 在线性代数中&#xff0c;矩阵与向量的乘积 ( y A x y Ax yAx ) 是一个极为重要的关系。通过这一公式&#xff0c;我们可以将矩阵 ( A A A ) 看作一个将输入向量 ( x x x ) 映射到输出向量 ( y y y ) 的线性变换。在这种…

Java EE 初阶:线程(1)

线程的初步认识 1.什么是线程 一个线程就是一个“执行流”&#xff0c;每个进程之间都可以按照顺序执行自己的代码&#xff0c;多个线程之间同时执行着多份代码。 2.进程和线程的关系 进程我们可以理解为是资源分配的基本单位&#xff0c;是一个程序的运行实例。 线程我们…