【BootStrap】--摺疊外掛

ZeroWM發表於2015-09-14
boot

前言

         研究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還是更好一些的。而且整個頁面顯示當前頁，不用使用者再去手動的點選，輕鬆了許多。


相關文章