Bootstrap 做一个简单的母版页

2022-02-06 16:21:44

随便搭的一个母版页，不太好看，只是为了看效果。。。。请勿吐槽。

效果如图：

一、新建母版页，引入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>

码农公寓

相关文章