bootstrap為我們提供了非常豐富的js插件和css樣式，如何運用bootstrap來實現分欄選擇行顯示和折疊效果，如下所示：
1、分欄顯示
<!doctype html>
<html>
<head>
<!--導入bootstrap樣式-->
<link href="bootstrap/css/bootstrap.css" rel="stylesheet" type="text/css">
<meta name="viewpoint" content="width=device-width initial-scale=1.0">
</head>
<body>
<ul class ="nav nav-tabs">
<li><a href="#showinfo" data-toggle="tab">查看信息</li>
<li><a href="#addinfo" data-toggle="tab">添加信息</li>
</ul>
<div class="tab-content">
<div id="showinfo" class="tab-pane in active">
<p class="alert alert-info">bootstrap調整Glyphicons圖標大小發表回復 今天發現一個很有意思的事情。bootstr...所以,當你需要更改你的圖標的大小的時候就很方便了</p>
<div>
<div id="addinfo" class="tab-pane">
<form>
<input type="text" placeholder="username">
<input type="password" placeholder="password">
</form>
</div>
</div>
<!--導入bootstrap插件-->
<script src="bootstrap/js/jquery-2.0.3.min.js"></script>
<script scr="bootstrap/js/bootstrap.js"></script>
</body>
</html>
2、實現折疊效果
<!doctype html>
<html>
<head>
<!--導入bootstrap樣式-->
<link href="bootstrap/css/bootstrap.css" rel="stylesheet" type="text/css">
<meta name="viewpoint" content="width=device-width initial-scale=1.0">
</head>
<body>
<ul class="nav nav-list">
<li><a href="#demo0" data-toggle="collapse" class="btn btn-info">地址</a></i>
<div id="demo0" class="collapse">
<ul class="nav nav-list">
<li><a href="#" class="btn btn-success">cq<a><li>
<li><a href="#" class="btn btn-success">cs<a><li>
<li><a href="#" class="btn btn-success">cd<a><li>
</ul>
</div>
<li><a href="#demo1" data-toggle="collapse" class="btn btn-info">地址</a></i>
<div id="demo1" class="collapse">
<ul class="nav nav-list">
<li><a href="#" class="btn btn-success">cq<a><li>
<li><a href="#" class="btn btn-success">cs<a><li>
<li><a href="#" class="btn btn-success">cd<a><li>
</ul>
</div>
</ul>
<!--導入bootstrap插件-->
<script src="bootstrap/js/jquery-2.0.3.min.js"></script>
<script scr="bootstrap/js/bootstrap.js"></script>
</body>
</html>