用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>

基础效果如图:

相关推荐
爱摄影的程序猿3 分钟前
Python Web 框架 django-vue3-admin快速入门 django后台管理
前端·python·django
ashane131412 分钟前
Redis的一些高级指令
redis·git·bootstrap
洁洁!17 分钟前
数据采集助力AI大模型训练
前端·人工智能·easyui
MiyueFE26 分钟前
bpmn-js 源码篇9:Moddle - 对象格式的标准化定义库
前端·javascript
excel32 分钟前
webpack 核心编译器 七 节
前端
一只月月鸟呀39 分钟前
HTML中数字和字母不换行显示
前端·html·css3
天下代码客1 小时前
【八股】介绍Promise(ES6引入)
前端·ecmascript·es6
lb29171 小时前
CSS 3D变换,transform:translateZ()
前端·css·3d
啊阿狸不会拉杆1 小时前
第二十二章:Python-NLTK库:自然语言处理
前端·python·自然语言处理
萧寂1731 小时前
html实现手势密码
前端·css·html