bootstrap 选项卡
时间: 2024-01-02 15:04:02 浏览: 23
以下是Bootstrap选项卡的基本用法演示:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap选项卡</title>
<!-- 引入Bootstrap的样式表 -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<h2>选项卡式导航</h2>
<ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link active" data-toggle="tab" href="#home">首页</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#about">关于</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#content">内容</a>
</li>
</ul>
<div class="tab-content">
<div id="home" class="tab-pane fade show active">
<h3>首页内容</h3>
<p>这是首页的内容。</p>
</div>
<div id="about" class="tab-pane fade">
<h3>关于内容</h3>
<p>这是关于页面的内容。</p>
</div>
<div id="content" class="tab-pane fade">
<h3>内容</h3>
<p>这是内容页面的内容。</p>
</div>
</div>
</div>
<!-- 引入jQuery -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<!-- 引入Popper.js -->
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@1.16.1/dist/umd/popper.min.js"></script>
<!-- 引入Bootstrap的JS -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>
```