<!--使用.nav-pills类可以将导航设置为胶囊形状。
胶囊动态设置需要将data-toggle属性设置为data-toggle="pil-->
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0"/>
<title></title>
<link rel="stylesheet" href="css/bootstrap.css"/>
<script src="js/jquery.min.js"></script>
<script src="js/popper.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h1>胶囊导航</h1>
<ul class="nav nav-pills">
<li class="nav-item">
<a class="nav-link active" data-toggle="pill" href="#one-pill">胶囊1</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="pill" href="#two-pill">胶囊2</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="pill" href="#three-pill">胶囊3</a>
</li>
</ul>
<!--胶囊项对应的内容-->
<div class="tab-content">
<div class="tab-pane active" id="one-pill">胶囊1对应的内容: Lorem </div>
<div class="tab-pane" id="two-pill">
胶囊2对应的内容：Lorem </div>
<div class="tab-pane" id="three-pill">
胶囊3对应的内容：Lorem </div>
</div>
</div>
<br/><br/><br/><br/><br/><br/>
</body>
</html>
2731
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
