Bootstrap 做一个简单的母版页
2017-12-25 16:39
204 查看
随便搭的一个母版页，不太好看，只是为了看效果。。。。请勿吐槽。
效果如图：
一、新建母版页，引入Bootstrap相关js文件
二、写右侧手风琴菜单
三、因为原始的我感觉不太好看，颜色不搭并且间距太大了，微调了一下。
四、最后新建一个页面，使用模板页即最后的效果
五、母版页的完整代码
效果如图：
一、新建母版页，引入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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 使用Bootstrap编写一个简单的网页轮播图效果
- Spring+SpringMVC+Hiberate+MySql+Bootstrap实现一个简单验证登录实例
- 东软学习，基于bootstrap的一个简单大屏轮播主页
- 初识Bootstrap及制作一个简单的页面
- 57-005-3 bootstrap实现一个简单的项目案例--新闻操作（基于jsp无刷新异步操作）
- bootstrap 一个简单的登陆页面
- 用Bootstrap写一个简单的响应式布局
- 用bootstrapt写一个响应式的简单页面
- .Net MVC&&datatables.js&&bootstrap做一个界面的CRUD有多简单
- Bootboxjs是一个简单的js库，简单快捷帮你制作一个Bootstrap的弹出框效果。
- [bootstrap] 打造一个简单的系统模板（2） 左侧折叠菜单
- [bootstrap] 打造一个简单的系统模板（1） 左侧折叠菜单
- bootstrap4 创建一个简单页面
- .Net MVC&&datatables.js&&bootstrap做一个界面的CRUD有多简单
- 使用angularjs和bootstrap写一个简单的购物车
- bootstrap入门-做一个简单的页面
- 用bootstrap制作一个简单首页
- c++积累（2）：一个简单的堆栈访问操作
- VB Api简单入门(2)-一个简单的例子
- 使用Java在本地创建一个服务器 ，通过浏览器对其进行访问的一个简单测试