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 上绘制 ...

随机推荐

使用uiautomation自动化重命名pdf书签，使全大写字母变成首字母大写
今天下载了一个英文pdf书籍,但书签全是大写英文字母,看上去有点别扭,于是想办法用自动化重命名pdf书签, 使书签全部变成首字母大写. pdf原始书签如下图: 重命名后的pdf书签自动化动态效果图, ...
集合详解(python)
集合概念集合是一个数学概念:由一个或多个确定的元素所构成的整体叫做集合. 集合中的元素三个特征: 确定性(元素必须可hash) 互异性(去重)--将一个列表变为集合,就自动去重了无序性(集合中的元 ...
1-7 hibernate关联关系映射
1.关联关系分为单向关联(一对一,一对多,多对一,多对多),多向关联(一对一,一对多,多对多). 2.单向一对一主键关联实例需要为one-to-one元素指定constrained属性值为true. ...
Harris Corner
Harris Corner网上已经有很多的资料了,但它也是我读研究生后读的第一篇论文,对我有一种特别的意义. 这篇文章我想从几个方面来讲解Harris Corner,一是Harris Corner的思 ...
MYSQL数据库学习九数据的操作
9.1 插入数据记录 1. 插入完整或部分数据记录: INSERT INTO table_name(field1,field2,field3,...fieldn) VALUES(value1,valu ...
Bitmap的加载与缓存
Android系统中图片一般用Bitmap对象表示,它支持png,jpg等常见格式.通常情况下图片的体积都比较大,单个应用允许使用的内存又是有限的,所以我们需要采取一些手段减少内存占用并提高加载速度. ...
避免uncaughtException错误引起node.js进程崩溃
uncaughtException 未捕获的异常, 当node.js 遇到这个错误,整个进程直接崩溃. 或许这俩个人上辈子一定是一对冤家. 或许这俩个人经历了前世500次的回眸才换来了今生的相遇,只可 ...
《PHP 设计模式》翻译完毕
翻译进度请见:https://laravel-china.org/docs/php-design-patterns/2018?mode=sections 设计模式不仅代表着更快开发健壮软件的有用方法, ...
新手立体四子棋AI教程(3)——极值搜索与Alpha-Beta剪枝
上一篇我们讲了评估函数,这一篇我们来讲讲立体四子棋的搜索函数. 一.极值搜索极值搜索是game playing领域里非常经典的算法,它使用深度优先搜索(因为限制最大层数,所以也可以称为迭代加深搜索) ...
Android游戏开发之旅 View类详解
Android游戏开发之旅 View类详解自定义 View的常用方法: onFinishInflate() 当View中所有的子控件均被映射成xml后触发 onMeasure(int, int) ...

Bootstrap 做一个简单的母版页

Bootstrap 做一个简单的母版页的更多相关文章

随机推荐

热门专题