导航栏示例 | 页脚示例
<!DOCTYPE html>
<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>
            <!-- 左侧栏移动端触发:可选  -->
            <img class="nav-toggle-left" id="front-nav-toggle-left" alt="SidebarToggle"/>
            <!-- -->
            <!-- 品牌图片大小为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 class="front-active"><a href="#">菜单1</a></li> <!-- 激活菜单 -->
                <li><a href="#">菜单2</a></li>
                <!-- 下拉菜单 -->
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">菜单3<span class="caret"></span></a>
                    <ul class="dropdown-menu nav-dropdown">
                        <li><a href="#">下拉菜单3.1</a></li>
                        <li><a href="#">下拉菜单3.2</a></li>
                        <li><a href="#">下拉菜单3.3</a></li>
                        <li><a href="#">下拉菜单3.4</a></li>
                    </ul>
                </li>
                <!-- end 下拉菜单 -->
            </ul>
        </div>
        <div class="nav-right">
            <!-- 搜索图标:可选 -->
            <div class="area area-media"><span class="glyphicon glyphicon-search nav-search-icon"></span></div>
            <!-- -->
            <!-- 产品导航菜单按钮 -->
             <div class="area area-media"><span class="glyphicon glyphicon-th nav-toggle-pro" id="front-nav-toggle-pro" data-gen="nav-pro" data-toggle="front-popover-bottom" data-target="#nav-pro"></span></div>
            <!-- -->
            <!-- 导航栏用户头像 -->
            <div class="area area-avatar area-media"><img src="/bootstrap-front/dev/img/avatar-demo.jpg" class="img-circle nav-avatar" alt="avatar" data-toggle="front-popover-bottom" data-target="#nav-user-demo"/></div>
            <!-- -->
            <!-- 横向导航栏移动端触发:可选 -->
            <div class="area visible-xs nav-toggle-down" data-toggle="collapse" data-target="#nav-collapse-demo"><span class="glyphicon glyphicon-menu-hamburger" id="front-nav-toggle-down-demo"></span></div>
            <!-- -->
            <!-- 产品导航菜单 -->
             <div id="nav-pro" data-pro="5"></div> <!-- 产品导航 -->
            <!-- 用户菜单 -->
            <div id="nav-user-demo" class="bottom nav-popover nav-popover-media nav-avatar-menu">
                <div class="arrow"></div>
                <ul>
                    <li class="text-center">
                        <a href="#">
                            <!-- 用户头像 -->
                            <img src="/bootstrap-front/dev/img/avatar-demo.jpg" alt="avatar" class="img-circle img-lg-avatar"/>
                            <!-- end 用户头像 -->
                        </a>
                        <div>用户昵称</div>
                        <div><small>用户邮箱</small></div>
                    </li>
                    <li class="divider"></li> <!-- 分界线 -->
                    <li class="clearfix">
                        <div class="col-xs-4 text-center">信息1</div>
                        <div class="col-xs-4 text-center">信息2</div>
                        <div class="col-xs-4 text-center">信息3</div>
                    </li>
                    <li class="divider"></li> <!-- 分界线 -->
                    <li><a href="#"><span class="glyphicon glyphicon-log-out"></span>&nbsp;&nbsp;退出</a></li>
                </ul>
            </div>
            <!-- end 用户菜单 -->
        </div>
    </div>
</nav>
    <div class="container">
        <div class="row">
            <div class="col-md-12">长夜将至,我从今开始守望,至死方休。我将不娶妻,不封地,不生子。我将不戴宝冠,不争荣宠。我将尽忠职守,生死于斯。我是黑暗中的利剑,长城上的守卫,抵御寒冷的烈焰,破晓时分的光线,唤醒眠者的号角,守护王国的坚盾。我将生命与荣耀献给守夜人,今夜如此,夜夜皆然。</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>