<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <h1>账号管理 <span class="title-label">平台账号名称：doulaofang</span></h1> <nav class="navbar navbar-default query" role="query"> <div class="container-fluid"> <div class="navbar-header"> <a class="navbar-barnd" href="javascript:void(0);">账号名称</a> </div> <div class="collapse navbar-collapse" id=""> <div class="navbar-form navbar-left"> <input type="text" class="form-control" /> <button class="btn btn-default">查询</button> </div> <button class="btn btn-primary create pull-right">添加账号</button> </div> </div> </nav> <div class="table-responsive col-md-12"> <table class="table table-striped table-hover"> <thead> <tr> <th>子账号</th><th>用户姓名</th><th>状态</th> <th>角色/权限</th><th>备注</th><th>操作</th> </tr> </thead> <tbody> <tr> <td><p>xizhimen</p></td> <td><p>董卓<br/> (未绑定手机)</p></p></td> <td><p><span class="label label-success">启用</span></p></td> <td><p>系统管理员</p></td> <td><p></p></td> <td class="col-md-2"><p> <a class="btn btn-link" href="#">修改权限</a> <a class="btn btn-link" href="#">重置密码</a> <a class="btn btn-link" href="#">修改账号</a> <a class="btn btn-link" href="#">删除账号</a> </p></td> </tr> <tr> <td><p>xizhimen</p></td> <td><p>董卓<br/> (未绑定手机)</p></td> <td><p><span class="label label-success">启用</span></p></td> <td><p>系统管理员</p></td> <td><p></p></td> <td class="col-md-2"><p> <a class="btn btn-link" href="#">修改权限</a> <a class="btn btn-link" href="#">重置密码</a> <a class="btn btn-link" href="#">修改账号</a> <a class="btn btn-link" href="#">删除账号</a> </p></td> </tr> <tr> <td><p>xizhimen</p></td> <td><p>董卓<br/> (13122222222)</p></td> <td><p><span class="label label-success">启用</span></p></td> <td><p>系统管理员</p></td> <td><p></p></td> <td class="col-md-2"><p> <a class="btn btn-link" href="#">修改权限</a> <a class="btn btn-link" href="#">重置密码</a> <a class="btn btn-link" href="#">解绑手机</a> <a class="btn btn-link" href="#">修改账号</a> <a class="btn btn-link" href="#">删除账号</a> </p></td> </tr> <tr> <td><p>xizhimen</p></td> <td><p>董卓<br/> (13122222222)</p></td> <td><p><span class="label label-success">启用</span></p></td> <td><p>系统管理员</p></td> <td><p></p></td> <td class="col-md-2"><p> <a class="btn btn-link" href="#">修改权限</a> <a class="btn btn-link" href="#">重置密码</a> <a class="btn btn-link" href="#">解绑手机</a> <a class="btn btn-link" href="#">修改账号</a> <a class="btn btn-link" href="#">删除账号</a> </p></td> </tr> <tr> <td><p>xizhimen</p></td> <td><p>董卓<br/> (13122222222)</p></td> <td><p><span class="label label-success">启用</span></p></td> <td><p>系统管理员<br/>店长<br/>区域经理</p></td> <td><p>饿货去吃士力架了</p></td> <td class="col-md-2"><p> <a class="btn btn-link" href="#">修改权限</a> <a class="btn btn-link" href="#">重置密码</a> <a class="btn btn-link" href="#">解绑手机</a> <a class="btn btn-link" href="#">修改账号</a> <a class="btn btn-link" href="#">删除账号</a> </p></td> </tr> <tr> <td><p>xizhimen</p></td> <td><p> 董卓<br/> (13122222222) </p></td> <td><p><span class="label label-danger">停用</span></p></td> <td><p>系统管理员</p></td> <td><p></p></td> <td class="col-md-2"><p> <a class="btn btn-link" href="#">修改权限</a> <a class="btn btn-link" href="#">重置密码</a> <a class="btn btn-link" href="#">解绑手机</a> <a class="btn btn-link" href="#">修改账号</a> <a class="btn btn-link" href="#">删除账号</a> </p></td> </tr> </tbody> </table> </div> <div class="pull-right"> <ul class="pagination"> <li><a href="#">«</a></li> <li><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> <li><a href="#">»</a></li> </ul> </div> </div> </div>

.title-label{font-weight:400;font-size:24px;} .navbar-barnd{vertical-align : middle;line-height:45px;} .btn-primary.create {margin-top:10px;}