Bootstrap 做一个简单的母版页
随便搭的一个母版页，不太好看，只是为了看效果。。。。请勿吐槽。
效果如图：
一、新建母版页，引入Bootstrap相关js文件
<link href="../css/bootstrap.min.css" rel="stylesheet" type="text/css" /> <script src="../js/jquery-1.9.1.min.js" type="text/javascript"></script> <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.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>
二、写右侧手风琴菜单
<body>
<div class="header">
<center>
<h2>
XX系统</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 in">
<div class="panel-body">
<ul class="nav nav-pills nav-stacked">
<li active="true"><a href="WebForm1.aspx">小标题1</a></li>
<li><a href="#">小标题2</a></li>
<li><a href="#">小标题3</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="#">小标题1</a></li>
<li><a href="#">小标题2</a></li>
<li><a href="#">小标题3</a></li>
<li><a href="#">小标题4</a></li>
<li><a href="#">小标题5</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">
标题三对应的内容</div>
</div>
</div>
</div>
</div>
<div class="col-md-10">
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</div>
</body>
三、因为原始的我感觉不太好看，颜色不搭并且间距太大了，微调了一下。
<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>
四、最后新建一个页面，使用模板页即最后的效果
<%@ Page Title="" Language="C#" MasterPageFile="~/data/Site1.Master" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication1.data.WebForm1" %> <asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server"> </asp:Content> <asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server"> <h3> 我是子页面</h3> <p> 填充内容页；填充内容页；填充内容页；填充内容页；填充内容页；填充内容页；填充内容页；填充内容页； </p> <h3> 我是子页面</h3> <p> 填充内容页；填充内容页；填充内容页；填充内容页；填充内容页；填充内容页；填充内容页；填充内容页； </p> <h3> 我是子页面</h3> <p> 填充内容页；填充内容页；填充内容页；填充内容页；填充内容页；填充内容页；填充内容页；填充内容页； </p> <h3> 我是子页面</h3> <p> 填充内容页；填充内容页；填充内容页；填充内容页；填充内容页；填充内容页；填充内容页；填充内容页； </p> <h3> 我是子页面</h3> <p> 填充内容页；填充内容页；填充内容页；填充内容页；填充内容页；填充内容页；填充内容页；填充内容页； </p> </asp:Content>
五、母版页的完整代码
<%@ 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> </head> <body> <div class="header"> <center> <h2> XX系统</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 in"> <div class="panel-body"> <ul class="nav nav-pills nav-stacked"> <li active="true"><a href="WebForm1.aspx">小标题1</a></li> <li><a href="#">小标题2</a></li> <li><a href="#">小标题3</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="#">小标题1</a></li> <li><a href="#">小标题2</a></li> <li><a href="#">小标题3</a></li> <li><a href="#">小标题4</a></li> <li><a href="#">小标题5</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"> 标题三对应的内容</div> </div> </div> </div> </div> <div class="col-md-10"> <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server"> </asp:ContentPlaceHolder> </div> </body> </html>
