当前位置：首页 > article >正文

用bootstrap搭建侧边栏

article 2024/12/22 12:05:08

要注意：
标签的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>