自己用bootstrap搭了个项目，纯属娱乐。。。。为了检验学习bootstrap之成果。
效果如图：
一、搭建中发现一问题，因为以前测试都是写的html页面，这次用了母版页，点击页面的之后，页面会刷新，不会保留菜单选中状态
解决办法：用js保留上次的值，页面刷新重新赋值。给当前选中菜单添加class属性in
<script type="text/javascript"> $(function () { var divId = localStorage.getItem("id"); $("#" + divId + "").addClass(‘in‘);//设置选中项 $(".panel-body ul li a").click(function () { var all_lis = $(this).parents("div").find(".in"); var id = all_lis[0].id; localStorage.setItem("id", id);//保留页面选中项id }) }) </script>
二、搭建的手风琴菜单格式不是很好看，微调了一下
<style type="text/css"> .header { width: 99%; height: 43px; background: #96b97d; line-height: 40px; } .col-sm-2 { position: relative; min-height: 1px; padding-right: 0px; padding-left: 0px; top: 0px; left: 0px; } div.col-sm-10 { position: relative; min-height: 1px; padding-right: 5px; padding-left: 5px; top: 0px; left: 0px; } h2 { margin-top: 0px; } .panel-group { background: #dff0d8; } .panel-default > .panel-heading { color: #333; background-color: #dff0d8; border-color: #ddd; } </style>
三、搭建手风琴菜单，解析下基本原理：当div的class="panel-collapse collapse in"说明当前菜单最外层菜单被选中，如果移除class属性in,则菜单收缩。
<div class="header"> <center> <h2> 企业管理系统</h2> </center> </div> <div class="col-md-2"> <div class="panel-group" id="accordion"> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">产品管理</a></h4> </div> <div id="collapseOne" class="panel-collapse collapse"> <div class="panel-body"> <ul class="nav nav-pills nav-stacked"> <li><a href="dbdz.aspx">检验表单管理</a></li> <li><a href="ycllr.aspx">原材料录入</a></li> </ul> </div> </div> </div> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">客户管理</a></h4> </div> <div id="collapseTwo" class="panel-collapse collapse"> <div class="panel-body"> <ul class="nav nav-pills nav-stacked"> <li><a href="jgdx1.aspx">供货商管理</a></li> <li><a href="ghsgl.aspx">购货商管理</a></li> </ul> </div> </div> </div> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion" href="#collapseThree">库存管理</a></h4> </div> <div id="collapseThree" class="panel-collapse collapse"> <div class="panel-body"> <ul class="nav nav-pills nav-stacked"> <li><a href="kcgl.aspx">库存管理</a></li> <li><a href="qyxxwh.aspx">入库记录</a></li> <li><a href="xsjl.aspx">出厂记录</a></li> </ul> </div> </div> </div> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion" href="#collapseFour">产品追溯及公众平台</a></h4> </div> <div id="collapseFour" class="panel-collapse collapse "> <div class="panel-body"> <ul class="nav nav-pills nav-stacked"> <li><a href="yaopinflow2.aspx">产品追溯</a></li> </ul> </div> </div> </div> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion" href="#collapseFive">系统管理</a></h4> </div> <div id="collapseFive" class="panel-collapse collapse"> <div class="panel-body"> <ul class="nav nav-pills nav-stacked"> <li><a href="yhgl.aspx">操作员管理</a></li> <li><a href="gzbm.aspx">工作部门</a></li> <li><a href="xtsz2.aspx">系统信息维护</a></li> <li><a href="changePwd.aspx">密码修改</a></li> </ul> </div> </div> </div> </div> </div>
四、粘贴下母板页面，可供参考
<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Site1.master.cs" Inherits="WebApplication1.data.Site1" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> <script src="../js/jquery-1.9.1.min.js" type="text/javascript"></script> <link href="../css/bootstrap.min.css" rel="stylesheet" type="text/css" /> <script src="../js/bootstrap.min.js" type="text/javascript"></script> <link href="../css/bootstrap-table.css" rel="stylesheet" type="text/css" /> <script src="../js/bootstrap-table.js" type="text/javascript"></script> <link href="../css/bootstrap-select.min.css" rel="stylesheet" type="text/css" /> <script src="../js/bootstrap-select.js" type="text/javascript"></script> <script src="../js/bootstrap-table-zh-CN.js" type="text/javascript"></script> <asp:ContentPlaceHolder ID="head" runat="server"> </asp:ContentPlaceHolder> <style type="text/css"> .header { width: 99%; height: 43px; background: #96b97d; line-height: 40px; } .col-sm-2 { position: relative; min-height: 1px; padding-right: 0px; padding-left: 0px; top: 0px; left: 0px; } div.col-sm-10 { position: relative; min-height: 1px; padding-right: 5px; padding-left: 5px; top: 0px; left: 0px; } h2 { margin-top: 0px; } .panel-group { background: #dff0d8; } .panel-default > .panel-heading { color: #333; background-color: #dff0d8; border-color: #ddd; } </style> <script type="text/javascript"> $(function () { var divId = localStorage.getItem("id"); $("#" + divId + "").addClass(‘in‘); $(".panel-body ul li a").click(function () { var all_lis = $(this).parents("div").find(".in"); var id = all_lis[0].id; localStorage.setItem("id", id); }) }) </script> </head> <body> <div class="header"> <center> <h2> 企业管理系统</h2> </center> </div> <div class="col-md-2"> <div class="panel-group" id="accordion"> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">产品管理</a></h4> </div> <div id="collapseOne" class="panel-collapse collapse"> <div class="panel-body"> <ul class="nav nav-pills nav-stacked"> <li><a href="dbdz.aspx">检验表单管理</a></li> <li><a href="ycllr.aspx">原材料录入</a></li> </ul> </div> </div> </div> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">客户管理</a></h4> </div> <div id="collapseTwo" class="panel-collapse collapse"> <div class="panel-body"> <ul class="nav nav-pills nav-stacked"> <li><a href="jgdx1.aspx">供货商管理</a></li> <li><a href="ghsgl.aspx">购货商管理</a></li> </ul> </div> </div> </div> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion" href="#collapseThree">库存管理</a></h4> </div> <div id="collapseThree" class="panel-collapse collapse"> <div class="panel-body"> <ul class="nav nav-pills nav-stacked"> <li><a href="kcgl.aspx">库存管理</a></li> <li><a href="qyxxwh.aspx">入库记录</a></li> <li><a href="xsjl.aspx">出厂记录</a></li> </ul> </div> </div> </div> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion" href="#collapseFour">产品追溯及公众平台</a></h4> </div> <div id="collapseFour" class="panel-collapse collapse "> <div class="panel-body"> <ul class="nav nav-pills nav-stacked"> <li><a href="yaopinflow2.aspx">产品追溯</a></li> </ul> </div> </div> </div> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion" href="#collapseFive">系统管理</a></h4> </div> <div id="collapseFive" class="panel-collapse collapse"> <div class="panel-body"> <ul class="nav nav-pills nav-stacked"> <li><a href="yhgl.aspx">操作员管理</a></li> <li><a href="gzbm.aspx">工作部门</a></li> <li><a href="xtsz2.aspx">系统信息维护</a></li> <li><a href="changePwd.aspx">密码修改</a></li> </ul> </div> </div> </div> </div> </div> <div class="col-md-10"> <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server"> </asp:ContentPlaceHolder> </div> </body> </html>
最后分享bootstrap的外部文件：https://pan.baidu.com/s/1htBQa2o
