导航栏示例 | 页脚示例
<html>
<head>
<!-- 可直接使用框架提供的在线CSS与JS文件 -->
<!-- 若要使用本地的文件,请注释掉下面的标记 -->
<link rel="stylesheet" href="http://newfront.free4inno.com/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="http://newfront.free4inno.com/css/front.css">

<!-- 也可以使用下载到本地的CSS文件,请去掉下面两行标记的注释。其中localpath为本地路径。 -->
<!-- 若要使用在线文件,请注释掉下面两行标记 -->
<!-- <link rel="stylesheet" href="[localpath]/css/bootstrap.min.css"> -->
<!-- <link rel="stylesheet" href="[localpath]/css/front.css"> -->

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>登录首页</title>
</head>
<body class="front-body">
<div class="front-inner front-inner-media">
<nav class="navbar navbar-default navbar-fixed-top front-nav">
    <div class="container">
        <div>
            <!-- 品牌图片大小为150 * 30:宽度不定,高度固定30px -->
            <div class="nav-brand"><a href="#"><img src="/bootstrap-front/dev/img/logo.png" alt="brand" class="img-responsive"/></a></div>
            <!-- -->
        </div>
        <div class="nav-collapse collapse" id="nav-collapse-demo">
            <ul class="nav navbar-nav">
                <li><a href="#">首页</a></li>
                <li><a href="#">帮助</a></li>
            </ul>
        </div>
        <div class="nav-right">
            <ul class="nav navbar-nav">
                <li><a href="#">登录</a></li>
                <li><a href="#">注册</a></li>
            </ul>
        </div>
    </div>
</nav>
    <div class="container">
        <div class="row front-canvas" id="front-canvas">
            <div class="col-md-3 nav-left-offcanvas" id="nav-left-offcanvas">
                <div class="list-group nav-left">
                    <a href="#" class="list-group-item" data-toggle="front-nav-left-sub" data-target="#slide-demo-xxx">左侧栏下拉菜单1<span class="glyphicon glyphicon-chevron-down"></span></a>
                    <div id="slide-demo-xxx" class="list-group nav-left-sub">
                        <a href="#" class="list-group-item">下拉子菜单1.1</a>
                        <a href="#" class="list-group-item">下拉子菜单1.2</a>
                        <a href="#" class="list-group-item">下拉子菜单1.3</a>
                        <a href="#" class="list-group-item">下拉子菜单1.4</a>
                    </div>
                    <a href="#" class="list-group-item">左侧栏菜单2<span class="glyphicon glyphicon-chevron-right"></span></a>
                    <a href="#" class="list-group-item">左侧栏菜单3<span class="glyphicon glyphicon-chevron-right"></span></a>
                    <a href="#" class="list-group-item">左侧栏菜单4<span class="glyphicon glyphicon-chevron-right"></span></a>
                    <a href="#" class="list-group-item">左侧栏菜单5<span class="glyphicon glyphicon-chevron-right"></span></a>
                    <a href="#" class="list-group-item active" data-toggle="front-nav-left-sub" data-target="#slide-demo">左侧栏下拉菜单6<span class="glyphicon glyphicon-chevron-down"></span></a>
                    <div id="slide-demo" class="list-group nav-left-sub">
                        <a href="#" class="list-group-item">下拉子菜单6.1</a>
                        <a href="#" class="list-group-item">下拉子菜单6.2</a>
                        <a href="#" class="list-group-item front-nav-left-sub-active">下拉子菜单6.3</a>
                        <a href="#" class="list-group-item">下拉子菜单6.4</a>
                    </div>
                </div>
            </div>
            <div class="col-md-9">长夜将至,我从今开始守望,至死方休。我将不娶妻,不封地,不生子。我将不戴宝冠,不争荣宠。我将尽忠职守,生死于斯。我是黑暗中的利剑,长城上的守卫,抵御寒冷的烈焰,破晓时分的光线,唤醒眠者的号角,守护王国的坚盾。我将生命与荣耀献给守夜人,今夜如此,夜夜皆然。</div>
        </div>
    </div>
<footer class="footer-default">
    <div class="text-center">Copyright © All Right Reserved by BUPT(2015)</div>
</footer>
</div>
<!-- 可直接使用框架提供的在线js文件 -->
<!-- 若要使用本地的文件,请注释掉下面三行标记 -->
<script src="http://newfront.free4inno.com/js/jquery/jquery.min.js"></script>
<script src="http://newfront.free4inno.com/bootstrap/js/bootstrap.min.js"></script>
<script src="http://newfront.free4inno.com/js/plugin/front.js"></script>

<!-- 也可以使用下载到本地的js文件,请去掉下面三行标记的注释。其中localpath为用户本地路径。 -->
<!-- 若要使用在线文件,请注释掉下面三行标记 -->
<!-- <script src="[localpath]/js/jquery.min.js"></script> -->
<!-- <script src="[localpath]/js/bootstrap.min.js"></script> -->
<!-- <script src="[localpath]/js/front.js"></script> -->
</body>
</html>