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: 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>

posted @ 2017-12-25 16:39 高空燕子飞过阅读(2182) 评论(0) 编辑收藏举报

刷新页面返回顶部

高空燕子飞过

Bootstrap 做一个简单的母版页

公告