大学生就可以看懂的bootstrap基础实战系列，pre标签里是笔记总结，动手实际操作一下会加强理解。有疑问留言交流哦。
bootstrap是进阶html5很基础常用的前端框架，可以做自适应漂亮的界面，再坚持一下，前端知识的大门就会打开了。
本节内容有动态显示效果，建议实际操作一下。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link href="lib/node_modules/bootstrap/dist/css/bootstrap.css" rel="stylesheet">
<style>
.row {
margin-top: 10px;
padding-top: 10px;
margin-bottom: 15px;
padding-bottom: 15px;
border-bottom: rgba(38, 42, 40, 0.98) 1px dashed;
}
</style>
</head>
<body>
<pre class="pre-scrollable">
导航栏:ul:nav nav-tabs li组件里面包含a组件
nav-tabs:标签式
nav-pills:胶囊式
a链接点击切换tab,需要jquery和bootstrap的js,这个地方的动态是通过js操作css一起完成的.
设置:data-toggle="tab" href="#tab1aaa"
tab标签内容:tab-content tab-pane fade in active tab-pane fade
</pre>
<div class="container">
<div class="row">
<div class="col-md-2 ">
nav导航栏 nav-tab
</div>
<div class="col-md-10 ">
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#tab1">tab1</a></li>
<li><a data-toggle="tab" href="#tab2">tab2</a></li>
<li><a data-toggle="tab" href="#tab3">tab3</a></li>
</ul>
<div class="tab-content">
<div id="tab1" class="tab-pane fade in active">
<h3>tab1</h3>
<p>hi tab1
<button class="bt btn-success">bt</button>
</p>
</div>
<div id="tab2" class="tab-pane fade">
<h3>tab2</h3>
<p>hi tab2
<button class="bt btn-success">bt</button>
</p>
</div>
<div id="tab3" class="tab-pane fade">
<h3>tab3</h3>
<p>hi tab3
<button class="bt btn-success">bt</button>
</p>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-2 ">
nav导航栏 nav-pills
</div>
<div class="col-md-10 ">
<ul class="nav nav-pills">
<li class="active"><a data-toggle="tab" href="#tab1a">tab1</a></li>
<li><a data-toggle="tab" href="#tab2a">tab2</a></li>
<li><a data-toggle="tab" href="#tab3a">tab3</a></li>
</ul>
<div class="tab-content">
<div id="tab1a" class="tab-pane fade in active">
<h3>tab1</h3>
<p>hi tab1
<button class="bt btn-success">bt</button>
</p>
</div>
<div id="tab2a" class="tab-pane fade">
<h3>tab2</h3>
<p>hi tab2
<button class="bt btn-success">bt</button>
</p>
</div>
<div id="tab3a" class="tab-pane fade">
<h3>tab3</h3>
<p>hi tab3
<button class="bt btn-success">bt</button>
</p>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-2 ">
nav导航栏 nav-stacked垂直
</div>
<div class="col-md-10 ">
<ul class="nav nav-pills nav-stacked">
<li class="active"><a data-toggle="tab" href="#tab1aa">tab1</a></li>
<li><a data-toggle="tab" href="#tab2aa">tab2</a></li>
<li><a data-toggle="tab" href="#tab3aa">tab3</a></li>
</ul>
<div class="tab-content">
<div id="tab1aa" class="tab-pane fade in active">
<h3>tab1</h3>
<p>hi tab1
<button class="bt btn-success">bt</button>
</p>
</div>
<div id="tab2aa" class="tab-pane fade">
<h3>tab2</h3>
<p>hi tab2
<button class="bt btn-success">bt</button>
</p>
</div>
<div id="tab3aa" class="tab-pane fade">
<h3>tab3</h3>
<p>hi tab3
<button class="bt btn-success">bt</button>
</p>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-2 ">
nav导航栏 nav-justified
</div>
<div class="col-md-10 ">
<ul class="nav nav-pills nav-justified">
<li class="active"><a data-toggle="tab" href="#tab1aaa">tab1</a></li>
<li><a data-toggle="tab" href="#tab2aaa">tab2</a></li>
<li><a data-toggle="tab" href="#tab3aaa">tab3</a></li>
</ul>
<div class="tab-content">
<div id="tab1aaa" class="tab-pane fade in active">
<h3>tab1</h3>
<p>hi tab1
<button class="bt btn-success">bt</button>
</p>
</div>
<div id="tab2aaa" class="tab-pane fade">
<h3>tab2</h3>
<p>hi tab2
<button class="bt btn-success">bt</button>
</p>
</div>
<div id="tab3aaa" class="tab-pane fade">
<h3>tab3</h3>
<p>hi tab3
<button class="bt btn-success">bt</button>
</p>
</div>
</div>
</div>
</div>
</div>
</body>
<script src="jquery.js"></script>
<script src="lib/node_modules/bootstrap/dist/js/bootstrap.js"></script>
</html>