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: %;
height: 43px;
background: #96b97d;
line-height: 40px;
}
.col-sm-
{
position: relative;
min-height: 1px;
padding-right: 0px;
padding-left: 0px;
top: 0px;
left: 0px;
}
div.col-sm-
{
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: #;
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: %;
height: 43px;
background: #96b97d;
line-height: 40px;
}
.col-sm-
{
position: relative;
min-height: 1px;
padding-right: 0px;
padding-left: 0px;
top: 0px;
left: 0px;
}
div.col-sm-
{
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: #;
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 做一个简单的母版页的更多相关文章
- MUI框架-05-用MUI做一个简单App
MUI框架-05-用MUI做一个简单App MUI 是一个前端框架,前端框架就像 Bootstrap,EasyUI,Vue ,为了做 app 呢,就有了更加高效的 MUI,我觉得前端框架有很多,也没有 ...
- 第四章 .net core做一个简单的登录
项目目标部署环境:CentOS 7+ 项目技术点:.netcore2.0 + Autofac +webAPI + NHibernate5.1 + mysql5.6 + nginx 开源地址:https ...
- 【Bugly干货分享】一起用 HTML5 Canvas 做一个简单又骚气的粒子引擎
Bugly 技术干货系列内容主要涉及移动开发方向,是由Bugly邀请腾讯内部各位技术大咖,通过日常工作经验的总结以及感悟撰写而成,内容均属原创,转载请标明出处. 前言 好吧,说是“粒子引擎”还是大言不 ...
- 使用React并做一个简单的to-do-list
1. 前言 说到React,我从一年之前就开始试着了解并且看了相关的入门教程,而且还买过一本<React:引领未来的用户界面开发框架 >拜读.React的轻量组件化的思想及其virtual ...
- 【 D3.js 入门系列 --- 3 】 做一个简单的图表！
前面说了几节,都是对文字进行处理,这一节中将用 D3.js 做一个简单的柱形图. 做柱形图有很多种方法,比如用 HTML 的 div 标签,或用 svg . 推荐用 SVG 来做各种图形.SVG 意为 ...
- 一起用HTML5 canvas做一个简单又骚气的粒子引擎
前言 好吧,说是"粒子引擎"还是大言不惭而标题党了,离真正的粒子引擎还有点远.废话少说,先看demo 本文将教会你做一个简单的canvas粒子制造器(下称引擎). 世界观 这个简单 ...
- Jmeter初步使用二--使用jmeter做一个简单的性能测试
经过上一次的初步使用,我们懂得了Jmeter的安装与初步使用的方法.现在,我们使用Jmeter做一个简单的性能测试.该次测试,提交的参数不做参数化处理,Jmeter各元件使用将在介绍在下一博文开始介绍 ...
- 用EF DataBase First做一个简单的MVC3报名页面
使用EF DataBase First做一个简单的MVC3报名网站 ORM(Object Relational Mapping)是面向对象语言中的一种数据访问技术,在ASP.NET中,可以通过ADO. ...
- 【 D3.js 入门系列 — 3 】 做一个简单的图表！
图1. 柱形图 1. 柱形图 前几章的例子,都是对文字进行处理.本章中将用 D3 做一个简单的柱形图.制作柱形图有很多种方法,比如用 HTML 的 <div> 标签,或在 SVG 上绘制 ...
随机推荐
- JavaScript编码规范（1）
参考的是百度公司的JS规范,分为两部分.这是第一部分 [建议] JavaScript 文件使用无 BOM 的 UTF-8 编码. 空格 [强制] 二元运算符两侧必须有一个空格,一元运算符与操作对象之间 ...
- memcached源码剖析——流程图
参考: http://blog.csdn.net/column/details/memcached-src.html http://calixwu.com/2014/11/memcached-yuan ...
- TCP/IP NAT知识梳理
一. IP地址的获取 首先,互联网上的每台主机都有一个唯一的IP地址标识,计算机在通信时需要向网络中的DHCP(动态主机配置协议)服务器申请一个IP地址,但开始主机并不知道哪台机器是DHCP服务器(不 ...
- CXGrid TcxButtonEdit 信息获取 TcxButtonEditProperties取得TcxGridDBTableView
( TcxButtonEdit(Sender).ActiveProperties).Buttons[AButtonIndex].Hint;//取到按钮本身的属性IntToStr( ( TcxGridS ...
- 1-6 hibernate映射集合属性
1.集合类框架 以Tree开头都是按顺序,默认情况下是升序排列. 以Linked 开头的都是按插入顺序排列的. 2.在hibernate中要持久化集合属性时必须将其声明为接口,如 private Se ...
- C++实验1
- Javscript的函数链式调用基础篇
我们都很熟悉jQuery了,只能jQuery中一种非常牛逼的写法叫链式操作: $('#div').css('background','#ccc').removeClass('box').stop(). ...
- 使用export/import导出和导入docker容器
1.导出容器 如果要导出本地某个容器,可以使用 docker export 命令,导出容器快照到本地文件. $ sudo docker ps -a CONTAINER ID IMAGE ...
- 【Python】 迭代器&生成器
迭代器 任何一个类,只要其实现了__iter__方法,就算是一个可迭代对象.可迭代对象的__iter__方法返回的对象是迭代器,迭代器类需要实现next方法.一般来说,实现了__iter__方法的类肯 ...
- C++标准库string类型的使用和操作总结
string是C++标准库最重要的类型之一,string支持长度可变的字符串,其包含在string头文件中.本文摘自<C++PRIMER 第四版·特别版>和个人的一些总结. 一.声明和初始 ...