在nav导航栏 class类中在 增加了 navbar-brand 居然自动左右分栏了,好奇怪,特此记录.
整个代码使用的菜鸟里面的 实例导航条,不过,竖着处理了,具体代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>这是navbar测试文件</title>
<link rel="stylesheet" href="css3/bootstrap.css">
<script src="js3/jquery-3.5.1.js"></script>
<script src="js3/bootstrap.js"></script>
</head>
<body>
<div class="container">
<h2>动态标签</h2>
<p><strong>提示:</strong> 与 .tab-pane 和 data-toggle="tab" (data-toggle="pill" ) 一同使用, 设置标签页对应的内容随标签的切换而更改。</p>
<ul class="nav nav-tabs nav-stacked navbar-brand " role="tabs">
<li class="active"><a data-toggle="tab" href="#home">首页</a></li>
<li><a data-toggle="tab" href="#menu1">菜单 1</a></li>
<li><a data-toggle="tab" href="#menu2">菜单 2</a></li>
<li><a data-toggle="tab" href="#menu3">菜单 3</a></li>
</ul>
<div class="tab-content">
<div id="home" class="tab-pane fade in active">
<h3>首页</h3>
<p>菜鸟教程 —— 学的不仅是技术,更是梦想!!!</p>
</div>
<div id="menu1" class="tab-pane fade">
<h3>菜单 1</h3>
<p>这是菜单 1 显示的内容。这是菜单 1 显示的内容。这是菜单 1 显示的内容。</p>
</div>
<div id="menu2" class="tab-pane fade">
<h3>菜单 2</h3>
<p>这是菜单 2 显示的内容。这是菜单 2 显示的内容。这是菜单 2 显示的内容。</p>
</div>
<div id="menu3" class="tab-pane fade">
<h3>菜单 3</h3>
<p>这是菜单 3 显示的内容。这是菜单 3 显示的内容。这是菜单 3 显示的内容。</p>
</div>
</div>
</div>
</body>
</html>
运行结果,直接左右分栏。
代码说明:用 data-toggle 来跳转,tab-pan fade 隐藏 相对应的标签页,最后那部分没有贴出来,用 ajax 请求去传数据,完美