Question

我正在尝试使用asp.net页面使用bootstrap创建一种母版页。我的asp.net页面可以有Navbar，侧边栏菜单和页面内容。我的问题是，当我点击左侧菜单项时，该页面应显示在我的页面内容的右侧。例如，如果我有一个帐户的左菜单项，我需要调用accounts.aspx并在我的页面内容中显示右侧。

    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Example of Bootstrap 3 </title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <style>
        @import url("https://bootswatch.com/flatly/bootstrap.min.css");

        body {
            padding-top: 50px;
        }

        footer {
            padding-left: 15px;
            padding-right: 15px;
        }

        /*
 * Off Canvas
 * --------------------------------------------------
 */
        @media screen and (max-width: 768px) {
            .row-offcanvas {
                position: relative;
                -webkit-transition: all 0.25s ease-out;
                -moz-transition: all 0.25s ease-out;
                transition: all 0.25s ease-out;
                background: #ecf0f1;
            }

            .row-offcanvas-left .sidebar-offcanvas {
                left: -40%;
            }

            .row-offcanvas-left.active {
                left: 40%;
            }

            .sidebar-offcanvas {
                position: absolute;
                top: 0;
                width: 40%;
                margin-left: 12px;
            }
        }

        #sidebar {
            padding: 15px;
            margin-top: 10px;
        }
    </style>
    <script type="text/javascript">

        $(document).ready(function () {
            $('[data-toggle=offcanvas]').click(function () {
                $('.row-offcanvas').toggleClass('active');
            });
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <div class="navbar navbar-fixed-top navbar-default" role="navigation">
            <div class="container-fluid">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand" href="#">Project name</a>
                </div>
                <div class="collapse navbar-collapse">
                    <ul class="nav navbar-nav">
                        <li class="active"><a href="#">Home</a></li>
                        <li><a href="#about">About</a></li>
                        <li><a href="#contact">Contact</a></li>
                    </ul>
                </div>
                <!-- /.nav-collapse -->
            </div>
            <!-- /.container -->
        </div>


        <div class="container-fluid">
            <div class="row row-offcanvas row-offcanvas-left">
                <div class="col-xs-6 col-sm-3 sidebar-offcanvas" id="sidebar" role="navigation">
                    <div class="sidebar-nav">
                        <ul class="nav">

                            <li class="active"><a href="https://codepen.io">CodePen</a></li>
                            <li><a href="Contact.htm">Contact</a></li>
                            <li><a href="accounts.aspx">Accounts</a></li>
                            <li class="nav-divider"></li>
                            <li><a href="http://www.cnn.com/">Cnn.com</a></li>
                            <li><a href="http://www.yahoo.com/">Yahoo.com</a></li>
                            <li><a href="http://www.google.com/">Google.com</a></li>

                        </ul>
                    </div>
                    <!--/.well -->
                </div>
                <!--/span-->
                <!-- Page Content -->
                <div id="page-content-wrapper">
                    <div class="col-xs-12 col-sm-9">
                        <br />
                        <div class="jumbotron">
                            <a href="#" class="visible-xs" data-toggle="offcanvas"><i class="fa fa-lg fa-reorder"></i></a>
                            <h1>Hello, world!</h1>
                            <p>This is an example to show the potential of an offcanvas layout pattern in Bootstrap. Try some responsive-range viewport sizes to see it in action.</p>
                        </div>


                    </div>
                </div>


            </div>

            <hr />

            <footer>
                <p>© Company 2017</p>
            </footer>

        </div>
        <!--/.container-->
    </form>
</body>
</html>

如果我点击yahoo / google / cnn菜单项，我如何在右侧内容中显示相应的页面？

这里是JSFiddle： https://jsfiddle.net/cm5hbuh1/3/

谢谢

在Bootstrap页面内容中调用aspx页面

0 个答案: