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 上绘制 ...
随机推荐
- serializeArray()获取的表单参数转化成json格式的对象
目标:将serializeArray()这个方法获取的表单对象 转换成json格式 function serializeObject(){ //easyui提交表单 $('#form').form( ...
- tcpdump抓包工具的使用
个人原创,转载请注明,否则依法追究法律责任 2018-02-28 16:01:26 tcpdump 倾倒网络传输数据,直接启动tcpdump将监视第一个网络接口上所有流过的数据包. 1 不接任何参数 ...
- Path通过Selenium模拟浏览器抓取，Windows 64解决selenium.common.exceptions.WebDriverException: Message: 'geckodriver' executable needs to be in PATH.方法
1.下载geckodriver.exe: 下载地址:https://github.com/mozilla/geckodriver/releases请根据系统版本选择下载:(如Windows 64位系统 ...
- maven 技术总结
1.版本统一控制 在 properties中配置一个参数,在添加依赖时 通过 version标签 限定版本 <properties> <org.springframework.ver ...
- 需掌握 - JAVA算法编程题50题及答案
[程序1] 题目:古典问题:有一对兔子,从出生后第3个月起每个月都生一对兔子,小兔子长到第三个月后每个月又生一对兔子,假如兔子都不死,问每个月的兔子总数为多少? //这是一个菲波拉契数列问题publi ...
- poj-1056-IMMEDIATE DECODABILITY（字典）
Description An encoding of a set of symbols is said to be immediately decodable if no code for one s ...
- 使用gevent提高IO繁忙型wsgi服务的并发量（转）
add by zhj: 在Benchmark of Python WSGI Servers一文中,作者进行详细分析,得出的结论是gevent在所有WSGI Server(包括Tornado.Uwsgi ...
- centos7 nginx安装/启动/进程状态/杀掉进程
1.安装 下载RPM:wget http://nginx.org/packages/centos/7/x86_64/RPMS/nginx-1.10.0-1.el7.ngx.x86_64.rpm ...
- Matlab绘图基础——绘制向量图，二维三维（绘制参数曲线图）
------------------------------------------- %绘制向量场图 %例一 clear all;clc; [X,Y] = meshgrid(-2:.2:2,-3:. ...
- ThreadLocal 原理和使用场景分析
ThreadLocal 不知道大家有没有用过,但至少听说过,今天主要记录一下 ThreadLocal 的原理和使用场景. 使用场景 直接定位到 ThreadLocal 的源码,可以看到源码注释中有很清 ...