<!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>
            <!-- 左侧栏移动端触发:可选  -->
            <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="front-inner ">
   <div class="container">
			<div>
				<ul class="breadcrumb">
					<li><a href="group/groups">我的群组</a></li>
					<li class="active" id="groupNameTitle">群组名称</li>
				</ul>
			</div>
            <div>
	            <div class="media">
		            <div class="media-left text-center">
			             <p>
				             <img id="group-avatar" class="media-object img-circle img-lg-avatar"
					             src="/bootstrap-front/dev/img/avatar-demo.jpg" onerror="javascript:this.src=''">
			             </p>
				         <a href="javascript:void(0)" id="upload-avatar">修改头像</a>
			             <p>
				         <!-- 这个p标签的作用是保持上下间距一致 -->
			             </p>
		            </div>
		            <div class="media-body media-middle">
			           <h4 class="media-heading">
				       <span id="myGroupName">群组名称</span>
				       <span id="permission" class="badge">官方</span>
				       <span id="permission" class="badge">公开</span>
			           </h4>
			           <div id="groupdesc" style="word-wrap:break-word;word-break:break-all;">
			                            群组描述</div>
				       <div>
					       <a data-toggle="front-modal" href="javascript:void(0)" data-href=""
					       data-size="modal-md">编辑群组资料</a>
				       </div>
		            </div>
	            </div>
            </div>
			<div class="front-toolbar other">
				<div class="front-toolbar-header clearfix">
					<button type="button" class="front-toolbar-toggle navbar-toggle" data-toggle="collapse" data-target="#freeshare-group" aria-expanded="false" aria-controls="freeshare-group">
						<span class="icon-bar"></span>
						<span class="icon-bar"></span>
						<span class="icon-bar"></span>
					</button>
				</div>
				<div id="freeshare-group" class="front-btn-group collapse" data-toggle="buttons">
					<label class="btn btn-default active" data-group="resource" style="box-shadow: none">
						<input type="radio" name="options" autocomplete="off" checked><span class="glyphicon glyphicon-filter"></span>&nbsp;资源过滤<span class="caret"></span>
					</label>
					<label class="btn btn-default" data-group="manager" style="box-shadow: none">
						<input type="radio" name="options" autocomplete="off" checked><span class="glyphicon glyphicon-king"></span>&nbsp;管理员
					</label>
					<label class="btn btn-default" data-group="member" style="box-shadow: none">
						<input type="radio" name="options" autocomplete="off" checked><span class="glyphicon glyphicon-pawn"></span>&nbsp;本组成员
					</label>
				</div>
				<a href="javascript:void(0)" onclick="" class="btn btn-primary pull-right">退出群组</a>
			</div>
			<div id="groupshow">
			    <div class="panel panel-default front-panel">
			        <div class="panel-body front-no-padding">
			            <table class="table table-striped table-responsive front-table" style="margin-bottom: 0px;">
			            <tbody>
			            <tr>
					    <td>
						<div class="media">
							<div class="media-left">
								<img class="media-object img-avatar-50" style="width: 50px;height: 50px;" src="/bootstrap-front/img/newresource.png">
							</div>
							<div class="media-body">
								<h5 class="media-heading" style="position: relative">
									<span class="front-text-title">
										<a href="">资源名称</a>
									</span>
									<a href="javascript:void(0)" class="pull-right" onclick="">删除</a>
								</h5>
								<div class="front-text-break">
									资源内容描述</div>
							</div>
						</div>
					    </td>
				        </tr>
				        <tr>
					    <td>
						<div class="media">
							<div class="media-left">
								<img class="media-object img-avatar-50" style="width: 50px;height: 50px;" src="/bootstrap-front/img/newresource.png">
							</div>
							<div class="media-body">
								<h5 class="media-heading" style="position: relative">
									<span class="front-text-title">
										<a href="">资源名称</a>
									</span>
									<a href="javascript:void(0)" class="pull-right" onclick="">删除</a>
								</h5>
								<div class="front-text-break">
									资源内容描述</div>
							</div>
						</div>
					    </td>
				        </tr>
				        <tr>
					    <td>
						<div class="media">
							<div class="media-left">
								<img class="media-object img-avatar-50" style="width: 50px;height: 50px;" src="/bootstrap-front/img/newresource.png">
							</div>
							<div class="media-body">
								<h5 class="media-heading" style="position: relative">
									<span class="front-text-title">
										<a href="">资源名称</a>
									</span>
									<a href="javascript:void(0)" class="pull-right" onclick="">删除</a>
								</h5>
								<div class="front-text-break">
									资源内容描述</div>
							</div>
						</div>
					    </td>
				        </tr>
			            </tbody>
			            </table>
			            <div class="lineheight">
			            <div class="text-center">
			            <ul class="pagination">
			            <li class="disabled"><a aria-label="Previous">«</a></li>
			            <li class="active"><a>1</a></li>
			            <li class="disabled"><a aria-label="Next">»</a></li>
			            </ul>
			            </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>