首页 > 代码库 > bootstrap实现分栏选择性显示和折叠效果
bootstrap实现分栏选择性显示和折叠效果
bootstrap为我们提供了非常丰富的js插件和css样式，如何运用bootstrap来实现分栏选择行显示和折叠效果，如下所示：
1、分栏显示
<!doctype html>
<html>
<head>
<!--导入bootstrap样式-->
<link href="http://www.mamicode.com/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="http://www.mamicode.com/#showinfo" data-toggle="tab">查看信息</li>
<li><a href="http://www.mamicode.com/#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="http://www.mamicode.com/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="http://www.mamicode.com/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="http://www.mamicode.com/#demo0" data-toggle="collapse" class="btn btn-info">地址</a></i>
<div id="demo0" class="collapse">
<ul class="nav nav-list">
<li><a href="http://www.mamicode.com/#" class="btn btn-success">cq<a><li>
<li><a href="http://www.mamicode.com/#" class="btn btn-success">cs<a><li>
<li><a href="http://www.mamicode.com/#" class="btn btn-success">cd<a><li>
</ul>
</div>
<li><a href="http://www.mamicode.com/#demo1" data-toggle="collapse" class="btn btn-info">地址</a></i>
<div id="demo1" class="collapse">
<ul class="nav nav-list">
<li><a href="http://www.mamicode.com/#" class="btn btn-success">cq<a><li>
<li><a href="http://www.mamicode.com/#" class="btn btn-success">cs<a><li>
<li><a href="http://www.mamicode.com/#" class="btn btn-success">cd<a><li>
</ul>
</div>
</ul>
<!--导入bootstrap插件-->
<script src="http://www.mamicode.com/bootstrap/js/jquery-2.0.3.min.js"></script>
<script scr="bootstrap/js/bootstrap.js"></script>
</body>
</html>