<div id="body-content" class="container-fluid px-0">
<ul class="nav nav-tabs nav-fill" id="myTab" role="tablist">
<li class="nav-item" role="presentation">
<button class="nav-link active" id="content-tab" data-bs-toggle="tab" data-bs-target="#content-tab-pane" type="button" role="tab" aria-controls="content-tab-pane" aria-selected="true">內容</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="faq-tab" data-bs-toggle="tab" data-bs-target="#faq-tab-pane" type="button" role="tab" aria-controls="faq-tab-pane" aria-selected="false">問與答</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="compare-tab" data-bs-toggle="tab" data-bs-target="#compare-tab-pane" type="button" role="tab" aria-controls="compare-tab-pane" aria-selected="false">比較</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="research-tab" data-bs-toggle="tab" data-bs-target="#research-tab-pane" type="button" role="tab" aria-controls="research-tab-pane" aria-selected="false">文獻</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="case-tab" data-bs-toggle="tab" data-bs-target="#case-tab-pane" type="button" role="tab" aria-controls="case-tab-pane" aria-selected="false">個案</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="video-tab" data-bs-toggle="tab" data-bs-target="#video-tab-pane" type="button" role="tab" aria-controls="video-tab-pane" aria-selected="false">影片</button>
</li>
</ul>
<div class="tab-content" id="myTabContent">
<div class="tab-pane fade show active" id="content-tab-pane" role="tabpanel" aria-labelledby="content-tab" tabindex="0">
</div>
<div class="tab-pane fade" id="faq-tab-pane" role="tabpanel" aria-labelledby="faq-tab" tabindex="0">
</div>
<div class="tab-pane fade" id="compare-tab-pane" role="tabpanel" aria-labelledby="compare-tab" tabindex="0">
</div>
<div class="tab-pane fade" id="research-tab-pane" role="tabpanel" aria-labelledby="research-tab" tabindex="0">
</div>
<div class="tab-pane fade" id="case-tab-pane" role="tabpanel" aria-labelledby="case-tab" tabindex="0">
</div>
<div class="tab-pane fade" id="video-tab-pane" role="tabpanel" aria-labelledby="video-tab" tabindex="0">
</div>
</div>
</div>
#body-content {
width: 1024px;
max-width: 100%;
margin: 0 auto;
}
.nav-tabs .nav-link {
padding: 0.5rem 0.5rem;
}
.nav-tabs .nav-link.active {
border: 1px solid #2b324c;
background-color: #de9a4f;
color: #fff;
}
#myTab {
border-bottom: 1px solid #2b324c;
}
Required libraries:
//cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css
//cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js