【BootStrap】
前言
研究BootStrap的折叠插件的时候，发现这个东西很方便，即能显示标题，又能查看当前页的详细内容，很适合做新生入学系统公约显示功能。
效果图
点击食堂就餐公约，显示当前页，而且保证有且只有一个当前页打开，避免了用户过多的选择。
代码
@*/************************************************************ 作 者：王美* 小组：ITOO4.0新生入学小组：霍亚静，连江伟，王美，刘颖 * 说明：View-公约一览* 创建时间：2015年8月22日10:43:36* 版本号：V3.0.0-V4.0.0
* ***********************************************************/*@
<!DOCTYPE html>
<html>
<head><title>公约页</title><link href="../../BootStrap/css/bootstrap.min.css" rel="stylesheet" /><script src="../../BootStrap/js/bootstrap.min.js"></script><script src="../../BootStrap/js/jquery.min.js"></script>@*表格JS*@ <link href="../../BootStrap/css/bootstrap.css" rel="stylesheet" /><link href="../../BootStrap/bootstrap-3.3.5-dist/css/bootstrap.css" rel="stylesheet" /><meta name="viewport" content="width=device-wdith,initia-scale=1.0">
</head>
<body><div class="col-md-2"><div class="list-group"><a class="list-group-item" href="../PayFee/PayFee"><p><span class="badge pull-right">√</span>缴费明细</p></a><a class="list-group-item " href="../StuHomePage/StuHomePage"><p><span class="badge pull-right">√</span>学生信息</p></a> <a class="list-group-item" href="../StuPersonInfo/StuPersonInfo"><p><span class="badge pull-right">X</span>录入信息</p></a><a class="list-group-item active " href="../ConventionPage/ConventionPage"><p><span class="badge"></span>公约一览</p></a></div></div><div class="col-md-10"><div class="panel-group" id="accordion">@*公约配置信息*@<div class="panel panel-default panel-primary">@foreach (var Convention in ViewBag.Convention){<div class="panel-heading"><div class="caret pull-right"></div><h4 class="panel-title " ><a data-toggle="collapse" data-parent="#accordion"href="#@Convention.ConventionID">@Convention.Name </a></h4></div><div id="@Convention.ConventionID" class="panel-collapse collapse "><div class="panel-body">@Html.Raw(Convention.Content)</div></div>}</div></div></div><div class="pull-left"><a class="btn btn-large btn-primary glyphicon glyphicon glyphicon-arrow-left" href="../StuPersonInfo/StuPersonInfo">上一步</a></div><div class="pull-right"><a class="btn btn-large btn-primary glyphicon glyphicon glyphicon-arrow-right" href="../Success/Success">下一步</a></div></body>
</html>总结
不同的使用场景，不同的显示方式。比如公约可以用Tab显示，也可以用Panel显示。PC端承载的信息比较多，可用Tab.但是在移动端，公约条数的增加，会让Tab的触发区变小，影响手感。这个时候用Panel还是更好一些的。而且整个页面显示当前页，不用用户再去手动的点击，轻松了许多。