<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <!-- 推荐使用GCF（兼容IE6...）渲染网页，如果电脑未安装GCF，使用最高版本的IE进行渲染 Google Chrome Frame（谷歌内嵌浏览器框架GCF）。 这个插件可以让用户的IE浏览器外不变， 但用户在浏览网页时，实际上使用的是Google Chrome浏览器内核--> <meta name="viewport" content="width=device-width,initial-scale=1"> <!--viewport:用户是否可以缩放WEB页面。如果允许用户缩放，则用户按照什么比例缩放 --> <!--width=device-width:指定页面宽度； initial-scale=1：默认缩放比是1,意味着不缩放--> <title>BS-导航条+模态对话框+分页样式</title> <link rel="stylesheet" href="bootstrap-3.3.5-dist/css/bootstrap.min.css" /> <script type="text/javascript" src="bootstrap-3.3.5-dist/js/jquery-1.11.3.min.js"></script> <script type="text/javascript" src="bootstrap-3.3.5-dist/js/bootstrap.min.js"></script> <!--如果你的浏览器版本小于IE9则使用以下JS。HTML5标签不支持。使得不支持的标签能够在IE6/7/8中使用--> <!--[if lt IE 9]> <script src="//cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script> <script src="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script> <![endif]--> <!-- <link href="//cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"> <script src="//cdn.bootcss.com/jquery/1.12.1/jquery.min.js"></script> <script src="//cdn.bootcss.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> --> </head> <body> <!--导航条控件--> <nav class="navbar navbar-default" role="navigation"> <div class="container"> <!--header--> <div class="navbar-header"> <a class="navbar-brand" href="#">NIIT学生宿舍管理系统</a> </div> <div> <!--导航链接部分--> <ul class="nav navbar-nav navbar-right" > <li><a class="navbar-brand" href="#">新增宿舍</a></li> <li><a class="navbar-brand" href="#">宿舍列表</a></li> <li><a class="navbar-brand" href="#">新增学生</a></li> <li><a class="navbar-brand" href="#">学生列表</a></li> <li> <button class="btn btn-success btn-sm" style="margin:10px 0;" data-toggle="modal" data-target="#loginModal">登录</button> </li> </ul> </div> </div> </nav> <!--页面的主体--> <div> <div class="container"> <button class="btn btn-info col-lg-offset-10 col-md-offset-10 col-xs-offset-10 col-ms-offset-10"> <span class="glyphicon glyphicon-plus" ></span>新增学生</button> </div> <div class="container"> <table class="table table-bordered table-striped table-hover table-responsive table-condensed"> <tr> <td>ID</td> <td>姓名</td> <td>性别</td> <td>年龄</td> <td>联系方式</td> <td>舍长?</td> <td>宿舍号</td> <td>入住时间</td> <td>床位号</td> <td align="center">操作</td> </tr> <tr> <td>2001</td> <td>王铭霞</td> <td><button class="btn btn-success btn-xs " >女</button></td> <td>23</td> <td>1398888888</td> <td><button class="btn btn-danger btn-xs " >否</button></td> <td>2-131</td> <td>12年9月</td> <td>3号床</td> <td><a href="" class="btn btn-success btn-sm"> <span class="glyphicon glyphicon-pencil"></span>编辑</a> <a hre="" class="btn btn-danger btn-sm"> <span class="glyphicon glyphicon-remove"></span>删除</a> <a hre="" class="btn btn-info btn-sm"> <span class="glyphicon glyphicon-file"></span>详细信息</a></td> </tr> <tr> <td>2002</td> <td>玛丽</td> <td><button class="btn btn-success btn-xs " >女</button></td> <td>23</td> <td>1398888888</td> <td><button class="btn btn-danger btn-xs " >否</button></td> <td>2-131</td> <td>12年9月</td> <td>4号床</td> <td><a href="" class="btn btn-success btn-sm"> <span class="glyphicon glyphicon-pencil"></span>编辑</a> <a hre="" class="btn btn-danger btn-sm"> <span class="glyphicon glyphicon-remove"></span>删除</a> <a hre="" class="btn btn-info btn-sm"> <span class="glyphicon glyphicon-file"></span>详细信息</a></td> </tr> <tr> <td>2003</td> <td>莉莉安</td> <td><button class="btn btn-success btn-xs " >女</button></td> <td>23</td> <td>1398888888</td> <td><button class="btn btn-success btn-xs " >是</button></td> <td>2-131</td> <td>12年9月</td> <td>2号床</td> <td><a href="" class="btn btn-success btn-sm"> <span class="glyphicon glyphicon-pencil"></span>编辑</a> <a hre="" class="btn btn-danger btn-sm"> <span class="glyphicon glyphicon-remove"></span>删除</a> <a hre="" class="btn btn-info btn-sm"> <span class="glyphicon glyphicon-file"></span>详细信息</a></td> </tr> <tr> <td>2004</td> <td>迈克</td> <td><button class="btn btn-info btn-xs " >男</button></td> <td>23</td> <td>1398888888</td> <td><button class="btn btn-success btn-xs " >是</button></td> <td>3-131</td> <td>12年9月</td> <td>1号床</td> <td><a href="" class="btn btn-success btn-sm"> <span class="glyphicon glyphicon-pencil"></span>编辑</a> <a hre="" class="btn btn-danger btn-sm"> <span class="glyphicon glyphicon-remove"></span>删除</a> <a hre="" class="btn btn-info btn-sm"> <span class="glyphicon glyphicon-file"></span>详细信息</a></td> </tr> </table> </div> <!--分页部分--> <div class="container"> <ul class="pagination"> <li class="disabled"><a href="#">«</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="#">»</a></li> </ul> </div> <div class="modal fade " role="dialog" id="loginModal"> <!--对话框的设计--> <div class="modal-dialog"> <div class="modal-content"> <form> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal">×</button> <h4 class="modal-title">登录框</h4> </div> <div class="modal-body"> <div class="form-group"> <div class="input-group"> <div class="input-group-addon"> <span class="glyphicon glyphicon-user"></span> </div> <input type="text" name="username" id="username" placeholder="请输入用户名" class="form-control"/> <div class="input-group-addon"> <span >请输入用户名（必填）</span> </div> </div> </div> <div class="form-group"> <div class="input-group"> <div class="input-group-addon"> <span class="glyphicon glyphicon-lock"></span> </div> <input type="password" name="username" id="username" placeholder="请输入密码" class="form-control"/> <div class="input-group-addon"> <span >请输入密码（必填）</span> </div> </div> </div> </div> <div class="modal-footer"> <button type="submit" class="btn btn-primary">提交</button> <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button> </div> </form> </div> </div> </div> </div> </body> </html>
效果图：图1：
图2 ：点击登录后
