【BootStrap】--折叠插件

来源：互联网发布：tomcat运行php文件编辑：程序博客网时间：2024/06/10 06:32

前言

研究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还是更好一些的。而且整个页面显示当前页，不用用户再去手动的点击，轻松了许多。

0 0