I wrote a web front-end page gadget, how to design the multi-navigation page jump and the reuse of the frame construction page? - Codes Helper

< H2 > description < / H2 >

first of all, I would like to introduce myself. I am an amateur self-taught front-end and back-end beginner. I have learned some basic knowledge. I want to do something like a front-end gadget. I was baffled by the construction of a page structure and the jump of the page.

< H2 > question: < / H2 >

I use the bootstrap framework to build UI, because as gadget pages, header and footer pages generally reuse or reference a page or a file (I don"t know if that"s right), and what needs to be changed is the panel area, that is, the area of the toolbar. How do I design code to achieve, the most original idea is to add header and footer in each toolbar page, and then think about this is obviously superfluous, these header and footer can be reused, I just do not know how to reuse header and footer so come to consult the question, looking for some open source projects, also did not find the answer to the question, so come here to hope to get help. After reading the code in index.php, you will think it is a bad code: (

) < H2 > effect screenshot (similar to this typesetting, with navigation bar jump and tab column function) < / H2 >

< H2 > index.php Code < / H2 >

< html lang= "en" >
< head >

<meta charset="UTF-8">
<meta name="viewport"
      content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>rosjb</title>

<script src="static/js/jquery.js"></script>
<link rel="stylesheet" href="/static/plugins/bootstrap/css/bootstrap.css">
<link rel="stylesheet" href="/static/plugins/bootstrap/css/bootstrap-select.min.css">
<link rel="stylesheet" type="text/css" href="/static/css/style.css">

<script src="/static/plugins/bootstrap/js/bootstrap.js"></script>

<!--    -->
<script src="/static/plugins/bootstrap/js/clipboard.min.js"></script>
<link rel="stylesheet" href="/static/plugins/bootstrap/css/bootstrap-datepicker.min.css">
<script src="/static/plugins/bootstrap/js/bootstrap-datepicker.min.js"></script>
<script src="/static/plugins/bootstrap/js/bootstrap-datepicker.zh-CN.min.js"></script>
<script src="/static/js/ui.js"></script>


<script src="https://use.fontawesome.com/d27fbcc6dd.js"></script>
<link rel="stylesheet" type="text/css" href="static/plugins/bootstrap/css/build.css">

< / head >

< body >

< div class= "modal fade bs-example-modal-sm" tabindex= "- 1" role= "dialog" aria-labelledby= "mySmallModalLabel" >

<div class="modal-dialog modal-sm" role="document">
    <div class="modal-content"></div>
</div>

< / div >

< div class= "modal fade modalIndex" id= "myModal" role= "dialog" >

<div class="modal-dialog" role="document">
    <div class="modal-content">
        <div class="modal-header">
            <h4 class="modal-title" id="myModalLabel"></h4>
        </div>
        <div class="modal-body">
            ?
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal"></button>
            <button type="button" class="btn btn-primary" id="clearAffirmBtn"></button>
        </div>
    </div>
</div>

< / div >

< div class= "modal fade bs-example-modal-sm" tabindex= "- 1" role= "dialog" aria-labelledby= "mySmallModalLabel" >

<div class="modal-dialog modal-sm" role="document">
    <div class="modal-content">

    </div>
</div>

< / div >

< nav class= "navbar navbar-inverse" >

<div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="-sharpbs-example-navbar-collapse-1" aria-expanded="false">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="-sharp">RouterOS</a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
        <ul class="nav navbar-nav">
            <li class="dropdown">
                <a href="0_system/_system.php" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"><span class="caret"></span></a>
                <ul class="dropdown-menu">
                    <li><a href="-sharpaddAdmin"></a></li>
                    <li><a href="-sharpshutdown">/</a></li>
                    <li><a href="-sharp"></a></li>
                    <li><a href="-sharp">DDNS</a></li>
                </ul>
            </li>
            <li class="dropdown">
                <a href="-sharp" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"><span class="caret"></span></a>
                <ul class="dropdown-menu">
                    <li><a href="-sharp">IPPPPOE(NTH/PCC)</a></li>
                    <li><a href="-sharp">IP</a></li>
                    <li><a href="-sharp">VLANPPPoE</a></li>
                    <li><a href="-sharp">VRRPPPPoE+PCC</a></li>
                </ul>
            </li>
            <li class="dropdown">
                <a href="-sharp" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">PPPOE<span class="caret"></span></a>
                <ul class="dropdown-menu">
                    <li><a href="-sharp">PPPOE</a></li>
                    <li><a href="-sharp">PPPoE()</a></li>
                </ul>
            </li>
            <li class="dropdown">
                <a href="-sharp" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"><span class="caret"></span></a>
                <ul class="dropdown-menu">
                    <li><a href="-sharp">Queues</a></li>
                    <li><a href="-sharp">PCQ</a></li>
                    <li><a href="-sharp">PCQ</a></li>
                    <li><a href="-sharp">HTB+PCQ</a></li>
                    <li><a href="-sharp">L7&</a></li>
                </ul>
            </li>
            <li class="dropdown">
                <a href="-sharp" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">(Firewall)<span class="caret"></span></a>
                <ul class="dropdown-menu">
                    <li><a href="-sharp">ping&URL</a></li>
                    <li><a href="-sharp">()ARP()</a></li>
                    <li><a href="-sharp">(TCP/UDP)</a></li>
                    <li><a href="-sharp"></a></li>
                    <li><a href="-sharp">(UPNP)</a></li>
                    <li><a href="-sharp">IP()</a></li>
                    <li><a href="-sharp"></a></li>
                    <li><a href="-sharp"></a></li>
                </ul>
            </li>
            <li class="dropdown">
                <a href="-sharp" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">VPN<span class="caret"></span></a>
                <ul class="dropdown-menu">
                    <li><a href="-sharp">PPTPL2TP</a></li>
                    <li><a href="-sharp">VPN</a></li>
                </ul>
            </li>
            <li class="dropdown">
                <a href="-sharp" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">(Sprict)<span class="caret"></span></a>
                <ul class="dropdown-menu">
                    <li><a href="-sharp"></a></li>
                    <li><a href="-sharp">ROS</a></li>
                    <li><a href="-sharp">PCC</a></li>
                    <li><a href="-sharp">PPPoE</a></li>
                    <li><a href="-sharp"></a></li>
                </ul>
            </li>
            <li class="dropdown">
                <a href="-sharp" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"><span class="caret"></span></a>
                <ul class="dropdown-menu">
                    <li><a href="-sharp">mac</a></li>
                    <li><a href="-sharp">WIFISSID</a></li>
                    <li><a href="-sharp">(Netwatch)</a></li>
                    <li><a href="-sharp"></a></li>
                </ul>
            </li>
        </ul>
    </div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->

< / nav >

< div class= "tab-content" >

<?php include "0_system/addAdmin.php" ?>
<?php include "0_system/shutdown.php" ?>
<?php include "0_system/otherSetting.php" ?>
<?php include "0_system/ddns.php" ?>

<!--    ================================================-->

<!--    ================================================-->

<!--    ================================================-->

< / div >

< / body >
< / html >

< script >

< / script >

< H2 > navbar.php Code < / H2 >

< nav class= "navbar navbar-inverse" >

<div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="-sharpbs-example-navbar-collapse-1" aria-expanded="false">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="-sharp">RouterOS</a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
        <ul class="nav navbar-nav">
            <li class="dropdown">
                <a href="0_system/_system.php" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"><span class="caret"></span></a>
                <ul class="dropdown-menu">
                    <li><a href="-sharpaddAdmin"></a></li>
                    <li><a href="-sharpshutdown">/</a></li>
                    <li><a href="-sharp"></a></li>
                    <li><a href="-sharp">DDNS</a></li>
                </ul>
            </li>
            <li class="dropdown">
                <a href="-sharp" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"><span class="caret"></span></a>
                <ul class="dropdown-menu">
                    <li><a href="-sharp">IPPPPOE(NTH/PCC)</a></li>
                    <li><a href="-sharp">IP</a></li>
                    <li><a href="-sharp">VLANPPPoE</a></li>
                    <li><a href="-sharp">VRRPPPPoE+PCC</a></li>
                </ul>
            </li>
            <li class="dropdown">
                <a href="-sharp" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">PPPOE<span class="caret"></span></a>
                <ul class="dropdown-menu">
                    <li><a href="-sharp">PPPOE</a></li>
                    <li><a href="-sharp">PPPoE()</a></li>
                </ul>
            </li>
            <li class="dropdown">
                <a href="-sharp" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"><span class="caret"></span></a>
                <ul class="dropdown-menu">
                    <li><a href="-sharp">Queues</a></li>
                    <li><a href="-sharp">PCQ</a></li>
                    <li><a href="-sharp">PCQ</a></li>
                    <li><a href="-sharp">HTB+PCQ</a></li>
                    <li><a href="-sharp">L7&</a></li>
                </ul>
            </li>
            <li class="dropdown">
                <a href="-sharp" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">(Firewall)<span class="caret"></span></a>
                <ul class="dropdown-menu">
                    <li><a href="-sharp">ping&URL</a></li>
                    <li><a href="-sharp">()ARP()</a></li>
                    <li><a href="-sharp">(TCP/UDP)</a></li>
                    <li><a href="-sharp"></a></li>
                    <li><a href="-sharp">(UPNP)</a></li>
                    <li><a href="-sharp">IP()</a></li>
                    <li><a href="-sharp"></a></li>
                    <li><a href="-sharp"></a></li>
                </ul>
            </li>
            <li class="dropdown">
                <a href="-sharp" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">VPN<span class="caret"></span></a>
                <ul class="dropdown-menu">
                    <li><a href="-sharp">PPTPL2TP</a></li>
                    <li><a href="-sharp">VPN</a></li>
                </ul>
            </li>
            <li class="dropdown">
                <a href="-sharp" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">(Sprict)<span class="caret"></span></a>
                <ul class="dropdown-menu">
                    <li><a href="-sharp"></a></li>
                    <li><a href="-sharp">ROS</a></li>
                    <li><a href="-sharp">PCC</a></li>
                    <li><a href="-sharp">PPPoE</a></li>
                    <li><a href="-sharp"></a></li>
                </ul>
            </li>
            <li class="dropdown">
                <a href="-sharp" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"><span class="caret"></span></a>
                <ul class="dropdown-menu">
                    <li><a href="-sharp">mac</a></li>
                    <li><a href="-sharp">WIFISSID</a></li>
                    <li><a href="-sharp">(Netwatch)</a></li>
                    <li><a href="-sharp"></a></li>
                </ul>
            </li>
        </ul>
        <!--            <ul class="nav navbar-nav navbar-right">-->
        <!--                <li><a href="5_ddns/_ddns.php">DDNS</a></li>-->
        <!--            </ul>-->
    </div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->

< / nav >

< H2 > footer.php Code < / H2 >

< footer id= "footer" >

<div class="row">
    <div class="col-md-12">
        <textarea class="form-control" rows="12" id="footerTextArea" style="color:red;resize:none">testArea</textarea>
    </div>
</div>
<div class="row">
    <div class="col-md-12">
        <div class="btn-group btn-group-justified">
            <div class="input-group-addon">
                <span id="spanTime"></span>
            </div>
            <div class="btn-group">
                <button type="button" class="btn btn-danger" id="clearBtn"></button>
            </div>
            <div class="btn-group">
                <button type="button" data-clipboard-target="-sharptextArea" class="btn btn-success" id="copyBtn"></button>
            </div>
        </div>
    </div>
</div>

< / footer >

< script >

//   
$(".dropdown").mouseover(function () {
    $(this).addClass("open");
});

$(".dropdown").mouseleave(function(){
    $(this).removeClass("open");
})


//  
$("-sharpclearAffirmBtn").click(function () {
    $("-sharpmyModal").modal("hide");
    $("-sharpfooterTextArea").val("");
    // $("-sharptextArea").focus();
});

//
var clipboard = new ClipboardJS("-sharpcopyBtn");
clipboard.on("success", function (e) {
    console.log(e);
    alert("1")
});

clipboard.on("error", function (e) {
    console.log(e);
    alert("1")
});

$("-sharpclearBtn").click(function(){
   $("-sharpmyModal").modal("show");
   // UI.alert("","?");
   // UI.alert({title:"",msg:"?",icon:""});
});

< / script >