Bootstrap 做一個簡單的母版頁

本文轉載自查看原文 2017-12-25 16:39 1464 Web前端

隨便搭的一個母版頁，不太好看，只是為了看效果。。。。請勿吐槽。

效果如圖：

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

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 主題和母版頁（母版頁）嵌套母版頁簡單又實用的分享！SharePoint母版頁引用（實戰） SharePoint 2010 母版頁制作的簡單介紹 django母版頁的使用 jsp母版頁組裝 WebForm 母版頁使用【第七篇】bootstrap的3級菜單樣式，支持母版頁保留打開狀態 MVC 母版頁和部分頁面 MVC母版頁_Layout.cshtml