学生页面 Toggle navigation 学生管理系统 vs1.0 <!-- Collect the nav links, forms, and other content for toggling --> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav navbar-right"> <li><a href="#">欢迎xxx</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">用户中心 <span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="#">修改密码</a></li> <!-- 分割线的修饰 --> <li role="separator" class="divider"></li> <li><a href="#">修改用户名</a></li> <!-- 分割线的修饰 --> <li role="separator" class="divider"></li> <li><a href="#">退出登录</a></li> <!-- 分割线的修饰 --> <li role="separator" class="divider"></li> </ul> </li> </ul> </div><!-- /.navbar-collapse --> </div><!-- /.container-fluid --> </nav> <!-- 页面的主体部分 --> <div class="container-fluid"> <!--栅格系统 --> <div class="row"> <!-- 主体占页面的10分 --> <!-- 页头 --> <!-- 页体--> <div class="col-xs-12 .col-md-8 "> <!-- 页头 --> <div class="page-header" style="margin-top:-10px"> <h1>学生管理</h1> </div> <div> <!-- 动态的标签页码 --> <ul class="nav nav-tabs" role="tablist"> <li role="presentation" class="active"><a class="btn btn-primary" href="#usertablediv" aria-controls="usertablediv" role="tab" data-toggle="tab">学生列表</a></li> <li role="presentation"><a class="btn btn-primary" href="#adduser" aria-controls="adduser" role="tab" data-toggle="tab">添加</a></li> <li role="presentation"><a class="btn btn-primary" href="#deleteuser" aria-controls="deleteuser" role="tab" data-toggle="tab" id="deleteuserbutton">删除</a></li> <li role="presentation"><a class="btn btn-primary" href="#edituser" aria-controls="edituser" role="tab" data-toggle="tab" id="editusertable">编辑</a></li> <li role="presentation"><a class="btn btn-primary" href="#searchuser" aria-controls="searchuser" role="tab" data-toggle="tab">查找</a></li> <!-- 可动标签页码 根据需求可扩展 --> </ul> <!--切换内容 --> <div class="tab-content"> <!-- 第一个选择的div层 处理用户列表的动态标签页 处理用户列表的面板 --> <div role="tabpanel" class="tab-pane active " id="usertablediv"> <div class="panel panel-default "> <!-- 栅格系统 包含table和分页--> <div class="row"> <div class="col-xs-12 .col-sm-6 .col-md-8"> <!-- 表格 --> <table id="usertable" class="table "> <thead> <tr> <th> <input type="checkbox" />序号</th> <th>工号</th> <th>姓名</th> <th>性别</th> <th>密码</th> <th>年龄</th> <th>出生日期</th> </tr> </thead> <tbody> <tr class="info"> <td scope="row"><input type="checkbox" /><span>1</span></td> <td class="userid">1001</td> <td class="username">张三</td> <td>女</td> <td>1234</td> <td>20</td> <td>1998-04-03</td> </tr> <tr class="warning"> <td scope="row"><input type="checkbox" /><span>2</span></td> <td class="userid">1002</td> <td class="username">张六</td> <td>女</td> <td>1234</td> <td>20</td> <td>1998-04-03</td> </tr> <tr class="info"> <td scope="row"><input type="checkbox" /><span>3</span></td> <td class="userid">1003</td> <td class="username">张五</td> <td>女</td> <td>1234</td> <td>20</td> <td>1998-04-03</td> </tr> </tbody> </table> <!-- 快速浮动放到右边 --> <div class="pull-right"> <!-- 添加一个分页的组件 --> <nav aria-label="Page navigation"> <ul class="pagination"> <!-- 默认在第一页 --> <li class="disabled"> <a href="#" aria-label="Previous"> <span aria-hidden="true">«</span> </a> </li> <li class="active"><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> <li><a href="#">4</a></li> <li><a href="#">5</a></li> <li> <a href="#" aria-label="Next"> <span aria-hidden="true">»</span> </a> </li> </ul> </nav> </div> </div> </div> </div> </div> <!-- 第二个选择的div层 处理添加用户的信息的--> <div role="tabpanel" class="tab-pane" id="adduser"> <!-- 添加面板 --> <div class="panel panel-default"> <div class="panel-body"> <!-- 做一个栅格 --> <div class="row"> <div class="col-xs-12 .col-sm-6 .col-md-8"> <!-- 添加一个表单 --> <form> <!-- 工号 --> <div class="form-group"> <label for="newusername">工号</label> <input type="text" class="form-control" id="newid" placeholder="Id"> </div> <!-- 姓名 --> <div class="form-group"> <label for="newusername">姓名</label> <input type="text" class="form-control" id="newusername" placeholder="name"> </div> <!-- 性别 --> <div class="form-group"> <label for="newusername">性别</label> <input type="text" class="form-control" id="newsex" placeholder="sex"> </div> <!-- 密码 --> <div class="form-group"> <label for="newpwd">密码</label> <input type="password" class="form-control" id="newpwd1" placeholder="Password"> <label for="newpwd">请再次输入密码</label> <input type="password" class="form-control" id="newpwd2" placeholder="Password"> </div> <!-- 年龄 --> <div class="form-group"> <label for="newusername">年龄</label> <input type="text" class="form-control" id="newage" placeholder="age"> </div> <!-- 出生日期 --> <div class="form-group"> <label for="newusername">出生日期</label> <input type="text" class="form-control" id="newbirthday" placeholder="birthday"> </div> <!-- 可扩展 --> <button class="btn btn-block" id="adduserbutton">提交</button> </form> </div> </div> </div> </div> </div> <!-- 第五个查找的按钮 --> <div role="tabpanel" class="tab-pane" id="searchuser"> <!-- 添加面板 --> <div class="panel panel-default"> <div class="panel-body"> <!-- 做一个栅格 --> <div class="row"> <div class="col-l-sm-offset-1 col-sm-10"> <!-- 添加一个表单 --> <form> <!-- 工号 --> <div class="form-group"> <label for="newusername">按工号查找</label> <input id="searchbyid" type="text" class="form-control" id="newusername" placeholder="Id"> </div> <!-- 姓名 --> <div class="form-group"> <label for="newpwd">按姓名查找</label> <input id="searchbyname" type="text" class="form-control" id="newpwd" placeholder="name"> </div> <!-- 可扩展 --> <button type="submit" class="btn btn-block" id="searchuserbutton">查找</button> </form> </div> </div> </div> </div> </div> </div> </div> </div> </div> <!-- 在主体的添加模态框 编辑用户信息的模态框 --> <div class="modal fade" tabindex="-1" role="dialog" id="EditUsermodel"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> <h4 class="modal-title">Modal title</h4> </div> <div class="modal-body"> <p>One fine body…</p> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> <button type="button" class="btn btn-primary">Save changes</button> </div> </div><!-- /.modal-content --> </div><!-- /.modal-dialog --> </div><!-- /.modal --> </div>