<!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-sm-9">
					<div class="panel panel-default front-panel" style="margin-bottom:20px;">
						<div class="panel-body front-no-padding">
							<div class="container-fluid">
								<div class="row front-topic">
									<div class="col-lg-10 col-md-10">
										<div id="topicfield" >
											<textarea id="topic" class="form-control front-no-radius front-no-box-shadow front-no-focus front-no-border front-topic-shrink" placeholder="新建话题,试试@你的好友吧(不超过150个字符)" style="resize:none;overflow-y:hidden;"></textarea>
									    </div>
									</div>
									<div class="col-lg-1 col-md-1 text-center">
										<div style="padding:5px 0">
											<a href="" target="_blank" title="新建列表"><img src="/bootstrap-front/dev/img/list.png"></a>
										</div>
									</div>
									<div class="col-lg-1 col-md-1 text-center">
										<div style="padding:5px 0">
											<a href="" target="_blank" title="新建资源"><img src="/bootstrap-front/dev/img/resource.png"></a>
										</div>
									</div>
							</div>
						</div>
					</div>
					</div>
					<div class="front-toolbar home">
						<div class="front-toolbar-header">
							<a class="btn btn-default" data-toggle="buttons" data-href="group/getmygroupsajax?flag=true" data-size="modal-md">选择群组</a>
							<span  class="front-btn-group rank-res " data-toggle="buttons">
							<label id="" class="btn btn-default front-no-box-shadow">
								<input type="radio" name="options" autocomplete="off">全部
							</label>
							<label id="" class="btn btn-default front-no-box-shadow">
								<input type="radio" name="options" autocomplete="off"><span class="glyphicon glyphicon-comment"></span>&nbsp;话题
							</label>
							<label id="" class="btn btn-default front-no-box-shadow">
								<input type="radio" name="options" autocomplete="off"><span class="glyphicon glyphicon-list-alt"></span>&nbsp;列表
							</label>
							<label id="" class="btn btn-default front-no-box-shadow">
								<input type="radio" name="options" autocomplete="off"><span class="glyphicon glyphicon-book"></span>&nbsp;文章
							</label>
							<label id="" class="btn btn-default front-no-box-shadow">
								<input type="radio" name="options" autocomplete="off"><span class="glyphicon glyphicon-folder-open"></span>&nbsp;文档
							</label>
							<label id="" class="btn btn-default front-no-box-shadow">
								<input type="radio" name="options" autocomplete="off"><span class="glyphicon glyphicon-film"></span>&nbsp;视频
							</label>
							<label id="" class="btn btn-default front-no-box-shadow">
								<input type="radio" name="options" autocomplete="off"><span class="glyphicon glyphicon-link"></span>&nbsp;链接
							</label>
							<label id="" class="btn btn-default front-no-box-shadow">
								<input type="radio" name="options" autocomplete="off">自定义<span class="caret"></span>
							</label>
							<label id="" class="btn btn-default front-no-box-shadow">
								<input type="radio" name="options" autocomplete="off">智能排序
							</label>
							<label id="" class="btn btn-default front-no-box-shadow">
								<input type="radio" name="options" autocomplete="off">时间排序
							</label>
					       </span>
						</div>
					</div>
					<div id="newscontainer" >
					    <div class="panel panel-default front-panel" style="margin-bottom:20px;">
					        <div class="panel-body front-news-panel">
					            <div class="media">
					                <div class="media-left">
					                    <a href="#" data-toggle="front-modal" data-size="modal-sm" data-href="">
					                    <img class="img-circle nav-avatar" src="/bootstrap-front/dev/img/avatar-demo.jpg"></a>
					                </div>
					                <div class="media-body">
					                    <h4 class="media-heading front-text-break">
					                    <a href="#" data-toggle="front-modal" data-size="modal-sm" data-href="">作者</a>
					                    <a class="blueletter">标题</a>
					                    </h4>
					                    <p class="front-text-break">资源内容</p>
					                    <div>时间</div>
					            </div>
					        </div>
					        <div class="btn-group front-news-op">
					        <a href="" class="btn btn-default" target="_blank"><span class="glyphicon glyphicon-zoom-in"></span> 查看</a>
					        <a href="" class="btn btn-default" target="_blank"><span class="glyphicon glyphicon-edit"></span> 编辑</a>
					        <a href=""  class="btn btn-default" ><span class="glyphicon glyphicon-plus"></span> 评论</a>
					        </div>
					    </div>
					</div>
					 <div class="panel panel-default front-panel" style="margin-bottom:20px;">
					        <div class="panel-body front-news-panel">
					            <div class="media">
					                <div class="media-left">
					                    <a href="#" data-toggle="front-modal" data-size="modal-sm" data-href="">
					                    <img class="img-circle nav-avatar" src="/bootstrap-front/dev/img/avatar-demo.jpg"></a>
					                </div>
					                <div class="media-body">
					                    <h4 class="media-heading front-text-break">
					                    <a href="#" data-toggle="front-modal" data-size="modal-sm" data-href="">作者</a>
					                    <a class="blueletter">标题</a>
					                    </h4>
					                    <p class="front-text-break">资源内容</p>
					                    <p class="front-text-break">链接地址<a href="http://repack.free4inno.com" target="_blank">http://repack.free4inno.com</a></p>
					                    <div>时间</div>
					            </div>
					        </div>
					        <div class="btn-group front-news-op">
					        <a href="" class="btn btn-default" target="_blank"><span class="glyphicon glyphicon-zoom-in"></span> 查看</a>
					        <a href="" class="btn btn-default" target="_blank"><span class="glyphicon glyphicon-edit"></span> 编辑</a>
					        <a href=""  class="btn btn-default" ><span class="glyphicon glyphicon-plus"></span> 评论</a>
					        </div>
					    </div>
					</div>
					 <div class="panel panel-default front-panel" style="margin-bottom:20px;">
					        <div class="panel-body front-news-panel">
					            <div class="media">
					                <div class="media-left">
					                    <a href="#" data-toggle="front-modal" data-size="modal-sm" data-href="">
					                    <img class="img-circle nav-avatar" src="/bootstrap-front/dev/img/avatar-demo.jpg"></a>
					                </div>
					                <div class="media-body">
					                    <h4 class="media-heading front-text-break">
					                    <a href="#" data-toggle="front-modal" data-size="modal-sm" data-href="">作者</a>
					                    <a class="blueletter">标题</a>
					                    </h4>
					                    <p class="front-text-break">资源内容</p>
					                    <div class="front-pic-field">
					                    <img alt="" src="/bootstrap-front/dev/img/logo.png">
					                    </div>
					                    <div>时间</div>
					            </div>
					        </div>
					        <div class="btn-group front-news-op">
					        <a href="" class="btn btn-default" target="_blank"><span class="glyphicon glyphicon-zoom-in"></span> 查看</a>
					        <a href="" class="btn btn-default" target="_blank"><span class="glyphicon glyphicon-edit"></span> 编辑</a>
					        <a href=""  class="btn btn-default" ><span class="glyphicon glyphicon-plus"></span> 评论</a>
					        </div>
					    </div>
					</div>
				</div>
				</div>
				<div class="col-sm-3">
					<div class="panel panel-default front-panel" style="margin-bottom:20px;">
				         <div class="panel-heading">信息1</div>
                         <div class="panel-body front-last-no-margin">内容1</div>
                    </div>
				    <div class="panel panel-default front-panel" style="margin-bottom:20px;">
				         <div class="panel-heading">信息2</div>
                         <div class="panel-body front-last-no-margin">内容2</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>