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 上绘制 ...
随机推荐
- Ｗin10_x86_x64PE维护光盘——我用过最好用的PE
先感谢hongxj和fish2006两位大大提供的PE. 先放出所有工具的下载地址: hongxj的PE:https://yunpan.cn/crAw6HS6ar9ck 访问密码 4a4e fish ...
- 设计模式——装饰器模式（C++实现）
#include <iostream> #include <string> using namespace std; class Component { public: ; } ...
- git 使用方式
一.常用操作命令 1.初始化操作 git config --global user.name '<name>' # 设置提交者名称 git config --global user.ema ...
- poj1321 棋盘（dfs）
#include<iostream> #include<cstring> using namespace std; ]={},sum=; ][]; void dfs(int a ...
- mysql主从复制安装详解
1.环境准备:两台Linux6.8服务器,(可以通过yum安装mysql:yum install mysql mysql-server -y,安装的版本可能比较低,对于练手来说够用了 )主库ip:19 ...
- Linux chgrp命令
在lunix系统里,文件或目录的权限的掌控以拥有者及所诉群组来管理.可以使用chgrp指令取变更文件与目录所属群组,这种方式采用群组名称或群组识别码都可以.Chgrp命令就是change group的 ...
- Hibernate 介绍及其 环境搭建
介绍 数据持久化概念 数据持久化是将内存中的数据模型转换为存储模型,以及将存储模型转换为内存中的数据模型的统称.例如:文件的存储.数据的读取等都是数据持久化操作.数据模型可以是任何数据结构或对象模型, ...
- 新手立体四子棋AI教程(3)——极值搜索与Alpha-Beta剪枝
上一篇我们讲了评估函数,这一篇我们来讲讲立体四子棋的搜索函数. 一.极值搜索 极值搜索是game playing领域里非常经典的算法,它使用深度优先搜索(因为限制最大层数,所以也可以称为迭代加深搜索) ...
- lua continue实现
--第一种 , do while true do == then break end -- 这里有一大堆代码 -- -- break end end --第二种 i = ) do if () then ...
- vs2013和.net 4.5.1调用.net core中的Kestrel（基于libuv)的http服务器代码 两种方式
nuget获取相关的包:两个:Microsoft.AspNetCore.Server.Kestrel 和 Microsoft.Extensions.Logging.Console 编译完成后手工将pa ...