Bootstrap 5-两个导航一个选项卡-内容
Bootstrap是一种流行的前端开发框架，它提供了一套用于快速构建响应式网站和Web应用程序的工具和组件。Bootstrap 5是Bootstrap框架的最新版本，它引入了许多新特性和改进。
在Bootstrap 5中，可以使用导航和选项卡组件来创建具有多个导航和选项卡的页面。以下是一个完整的示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css">
<title>Bootstrap 5 - 两个导航一个选项卡</title>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container">
<a class="navbar-brand" href="#">导航1</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav1" aria-controls="navbarNav1" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav1">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">链接1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">链接2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">链接3</a>
</li>
</ul>
</div>
</div>
</nav>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container">
<a class="navbar-brand" href="#">导航2</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav2" aria-controls="navbarNav2" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav2">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">链接1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">链接2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">链接3</a>
</li>
</ul>
</div>
</div>
</nav>
<div class="container mt-4">
<div class="tab-content" id="myTabContent">
<div class="tab-pane fade show active" id="tab1" role="tabpanel" aria-labelledby="tab1-tab">
<h3>选项卡1</h3>
<p>这是选项卡1的内容。</p>
</div>
<div class="tab-pane fade" id="tab2" role="tabpanel" aria-labelledby="tab2-tab">
<h3>选项卡2</h3>
<p>这是选项卡2的内容。</p>
</div>
<div class="tab-pane fade" id="tab3" role="tabpanel" aria-labelledby="tab3-tab">
<h3>选项卡3</h3>
<p>这是选项卡3的内容。</p>
</div>
</div>
<ul class="nav nav-tabs mt-4" id="myTab" role="tablist">
<li class="nav-item" role="presentation">
<button class="nav-link active" id="tab1-tab" data-bs-toggle="tab" data-bs-target="#tab1" type="button" role="tab" aria-controls="tab1" aria-selected="true">选项卡1</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="tab2-tab" data-bs-toggle="tab" data-bs-target="#tab2" type="button" role="tab" aria-controls="tab2" aria-selected="false">选项卡2</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="tab3-tab" data-bs-toggle="tab" data-bs-target="#tab3" type="button" role="tab" aria-controls="tab3" aria-selected="false">选项卡3</button>
</li>
</ul>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>在上面的代码中，我们创建了两个导航栏和一个选项卡。每个导航栏都包含了多个链接，而选项卡则包含了多个选项卡面板。通过点击导航栏的链接或选项卡的按钮，可以切换显示相应的内容。
这个例子中使用了Bootstrap的导航栏（navbar）、导航链接（nav-link）、折叠按钮（navbar-toggler）、折叠内容（collapse）和选项卡（nav-tabs、tab-content）等组件。
这个示例可以在腾讯云的云服务器（CVM）上部署和运行。腾讯云的云服务器提供了高性能、可扩展和安全的云计算资源，适用于各种Web应用程序的部署和运行。您可以通过以下链接了解更多关于腾讯云云服务器的信息：
此外，腾讯云还提供了其他与云计算相关的产品和服务，例如对象存储（COS）、云数据库（CDB）、人工智能（AI）等。您可以根据具体需求选择适合的产品和服务。
相关·内容
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频活动推荐
腾讯云开发者
