用bootstrap搭建侧边栏

要注意:

标签的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>

基础效果如图:

相关推荐
古时的风筝9 分钟前
暴论:2025年,程序员必学技能就是MCP
前端·后端·mcp
古时的风筝10 分钟前
这编程圈子变化太快了,谁能告诉我 MCP 是什么
前端·后端·mcp
王月lydia14 分钟前
环境变量篇-vue3的H5项目从0到1工程化落地经验篇2
前端
赵要上天15 分钟前
利用TTP协议 ETag + 路由守卫 实现前端发版后通知用户更新得一个方案
前端
李剑一17 分钟前
写一个vitepress新建文章脚本,自动化创建链接,别再手写了!
前端·node.js·vitepress
火星思想17 分钟前
React如何实现时间切片
前端·react.js
小学生豆豆22 分钟前
eslint以及其扩展插件
前端
Electrolux29 分钟前
【前端bug】Safari的选区机制导致的前端@人组件的bug
前端
w236173460131 分钟前
Tomcat:从零理解Java Web应用的“心脏”
java·前端·tomcat
姝然_952734 分钟前
cursor vue3 rules
前端