导航栏示例 | 页脚示例
                <!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">
<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>
        <ul class="as-horizontal-nav as-horizontal-nav-2">
            <li class="active"><a href="javascript:void(0)">Option1</a></li> <!-- 激活菜单 -->
            <li><a href="javascript:void(0)">Option2</a></li>
        </ul>
        <div class="nav-right">
            <!-- 导航栏用户头像 -->
            <div class="area mobile-margin-right-15"><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 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="javascript:void(0)">
                            <!-- 用户头像 -->
                            <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="javascript:void(0)"><span class="glyphicon glyphicon-log-out"></span>&nbsp;&nbsp;退出</a></li>
                </ul>
            </div>
            <!-- end 用户菜单 -->
        </div>
    </div>
</nav>
<!-- <%--导航栏--%> -->
<div class="front-inner">
    <div class="container">
        <div class="row">
<!--             <%--旋转木马--%> -->
            <div class="col-md-12 as-carousel">
                <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
                    <!-- Indicators -->
                    <ol class="carousel-indicators">
                        <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
                        <li data-target="#carousel-example-generic" data-slide-to="1"></li>
                        <li data-target="#carousel-example-generic" data-slide-to="2"></li>
                    </ol>
                    <!-- Wrapper for slides -->
                    <div class="carousel-inner" role="listbox">
                        <div class="item active">
                            <a href="" target="_blank"><img src="/bootstrap-front/dev/img/Slide1.jpg" class="img-responsive" alt="Slide1"></a>
                        </div>
                        <div class="item">
                            <a href="" target="_blank"><img src="/bootstrap-front/dev/img/Slide2.jpg" class="img-responsive" alt="Slide2"></a>
                        </div>
                        <div class="item">
                            <a href="" target="_blank"><img src="/bootstrap-front/dev/img/Slide3.jpg" class="img-responsive" alt="Slide3"></a>
                        </div>
                    </div>
                    <!-- Controls -->
                    <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
                        <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                        <span class="sr-only">Previous</span>
                    </a>
                    <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
                        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                        <span class="sr-only">Next</span>
                    </a>
                </div>
            </div>
<!--             <%--旋转木马--%> -->
<!--             <%--应用搜索--%> -->
            <div class="col-md-offset-8 col-md-4 front-input-search">
                <input type="text" class="form-control"><button class="btn btn-primary">搜索</button>
            </div>
<!--             <%--应用搜索--%> -->
<!--             <%--应用展示--%> -->
            <div class="col-md-4">
                <div class="panel panel-default front-panel">
                    <div class="panel-body">
                        <div class="media">
                            <div class="media-left">
                                <img class="media-object img-circle" src="" alt="App Logo">
                            </div>
                            <div class="media-body">
                                <h4 class="media-heading">App Name</h4>
                                <div class="as-desc">App Description</div>
                                <div class="text-right"><a href="javascript:void(0)" target="_blank">进入</a><a href="javascript:void(0)" style="margin-left: 10px">详情</a></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="panel panel-default front-panel">
                    <div class="panel-body">
                        <div class="media">
                            <div class="media-left">
                                <img class="media-object img-circle" src="" alt="App Logo">
                            </div>
                            <div class="media-body">
                                <h4 class="media-heading">App Name</h4>
                                <div class="as-desc">App Description</div>
                                <div class="text-right"><a href="javascript:void(0)" target="_blank">进入</a><a href="javascript:void(0)" style="margin-left: 10px">详情</a></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="panel panel-default front-panel">
                    <div class="panel-body">
                        <div class="media">
                            <div class="media-left">
                                <img class="media-object img-circle" src="" alt="App Logo">
                            </div>
                            <div class="media-body">
                                <h4 class="media-heading">App Name</h4>
                                <div class="as-desc">App Description</div>
                                <div class="text-right"><a href="javascript:void(0)" target="_blank">进入</a><a href="javascript:void(0)" style="margin-left: 10px">详情</a></div>
                            </div>
                        </div>
                    </div>
                </div>
            </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>