摘要：<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>后台管理</title> <link rel="stylesheet" href="dist/css/bo
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>后台管理</title> <link rel="stylesheet" href="dist/css/bootstrap.css"> <script src="dist/jquery.js"></script> <script src="dist/js/bootstrap.js"></script> <style> </style> </head> <body> <div class="container-fluid"> <div class="row"> <div class="col-md-8 col-md-offset-2"> <nav class="navbar navbar-default"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse-item"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">网站管理系统</a> </div> <div class="collapse navbar-collapse" id="navbar-collapse-item"> <ul class="nav navbar-nav"> <li class="active"><a href="#home" data-toggle="tab">首页</a></li> <li><a href="#our" data-toggle="tab">关于我们</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" type="button">新闻中心 <span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="#">公司新闻</a></li> <li><a href="#">行业新闻</a></li> </ul> </li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" type="button">产品管理 <span class="caret"></span></a> <ul class="dropdown-menu"> <li class="dropdown-header">低压断路器</li> <li><a href="#">塑壳断路器</a></li> <li><a href="#">智能断路器</a></li> <li><a href="#">刀开关</a></li> <li class="divider"></li> <li class="dropdown-header">手机系列</li> <li><a href="">小米手机</a></li> <li><a href="">华为手机</a></li> <li><a href="">苹果手机</a></li> </ul> </li> <li><a href="#">客户留言 <span class="badge">45</span></a></li> <li><a href="#">联系我们</a></li> </ul> <form class="navbar-form navbar-right"> <div class="input-group"> <input type="text" class="form-control" placeholder="搜索功能"> <span class="input-group-btn"> <button type="submit" class="btn btn-default"><span class="glyphicon glyphicon-zoom-in"></span></button> </span> </div> </form> </div> </nav> </div> </div> <div class="row"> <div class="col-md-2"> <div class="panel panel-default text-center"> <div class="panel-heading"> <h3 class="panel-title">系统功能模块</h3> </div> <div class="panel-body"> <div class="panel-group"> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a href="#declare" data-toggle="collapse">系统配置 <span class="caret"></span></a> </h4> </div> <ul id="declare" class="list-group collapse"> <li class="list-group-item"><a href="">系统信息</a></li> <li class="list-group-item"><a href="">网站关键字配置</a></li> <li class="list-group-item"><a href="">管理密码修改</a></li> <li class="list-group-item"><a href="">栏目管理</a></li> </ul> </div> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a href="#declare1" data-toggle="collapse">首页 <span class="caret"></span></a> </h4> </div> <ul id="declare1" class="list-group collapse"> <li class="list-group-item"><a href="">首页信息</a></li> <li class="list-group-item"><a href="">联系方式修改</a></li> <li class="list-group-item"><a href="">手机动画</a></li> <li class="list-group-item"><a href="">友情链接</a></li> </ul> </div> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a href="#declare2" data-toggle="collapse">关于我们 <span class="caret"></span></a> </h4> </div> <ul id="declare2" class="list-group collapse"> <li class="list-group-item"><a href="">公司简介</a></li> <li class="list-group-item"><a href="">公司优势</a></li> <li class="list-group-item"><a href="">资质荣誉</a></li> </ul> </div> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a href="#declare3" data-toggle="collapse">产品中心 <span class="caret"></span></a> </h4> </div> <ul id="declare3" class="list-group collapse"> <li class="list-group-item"><a href="">添加产品类别</a></li> <li class="list-group-item"><a href="">添加新产品</a></li> <li class="list-group-item"><a href="">产品管理</a></li> </ul> </div> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a href="#declare4" data-toggle="collapse">新闻中心 <span class="caret"></span></a> </h4> </div> <ul id="declare4" class="list-group collapse"> <li class="list-group-item"><a href="">公司新闻</a></li> <li class="list-group-item"><a href="">行业新闻</a></li> </ul> </div> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a href="#declare5" data-toggle="collapse">保存退出 <span class="caret"></span></a> </h4> </div> <ul id="declare5" class="list-group collapse"> <li class="list-group-item list-group-item-info"><a type="button" class="btn btn-link" data-toggle="modal" data-target="#preservation">保存修改并退出</a></li> <li class="list-group-item list-group-item-danger"><a type="button" class="btn btn-link" data-toggle="modal" data-target="#no-preservation">不保存并退出</a></li> </ul> </div> <div class="modal fade" id="preservation"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal"><span>×</span></button> <h4 class="modal-title">是否保存，并退出?</h4> </div> <div class="modal-body"> <p>您修改的内容即将被保存，并且退出后台管理</p> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">取消</button> <button type="button" class="btn btn-primary">确认</button> </div> </div> </div> </div> <div class="modal fade" id="no-preservation"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal"><span>×</span></button> <h4 class="modal-title">是否不保存内容，并退出?</h4> </div> <div class="modal-body"> <p>您修改的内容不会被保存，并且退出后台管理</p> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">取消</button> <button type="button" class="btn btn-primary">确认</button> </div> </div> </div> </div> </div> </div> </div> </div> <div class="col-md-8"> <div class="tab-content"> <div class="tab-pane active" id="home"> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title">当前所在位置：首页</h4> </div> <div class="panel-body"> <div class="panel panel-default"> <div class="panel-heading"> <h5 class="panel-title">管理员登录信息</h5> </div> <div class="panel-body"> <p>欢迎您: <span style="color: red">系统管理员</span><br> 如果发现上次登录时间与您上次操作的实际时间不相符请立即退出系统并告之系统管理员！<br> 您可以操作的模块列表如左边菜单所示，点击每个模块展开其子目录。 </p> </div> </div> <div class="panel panel-default"> <div class="panel-heading"> <h5 class="panel-title">系统信息概述</h5> </div> <table class="table table-bordered"> <tbody> <tr> <td class="col-sm-2 text-right"> 当前系统版本: </td> <td class="col-sm-10"> 企业网站管理系统V2.0 </td> </tr> <tr> <td class="col-sm-2 text-right"> 当前域名: </td> <td class="col-sm-10"> www.php.cn </td> </tr> <tr> <td class="col-sm-2 text-right"> 当前文件位置: </td> <td class="col-sm-10"> d:\wwwroot\wwwroot\admin.html </td> </tr> <tr> <td class="col-sm-2 text-right"> 占用空间: </td> <td class="col-sm-10"> 整个站点(www.php.com): 33.81M </td> </tr> </tbody> </table> </div> </div> </div> </div> <div class="tab-pane" id="our"> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title">当前所在位置：关于我们</h4> </div> <div class="panel-body"> <p><span style="color: red">php中文网</span>提供大量免费、原创、高清的php视频教程,并定期举行公益php培训!可边学习边在线修改示例代码,查看执行效果!php从入门到精通,一站式php自学平台!</p> </div> </div> </div> </div> </div> </div> </div> </body> </html>
保存退出里我做了模态框，首页到关于我们做的是列表切换。
bootstrap功能很强大，结合了html,css,js等功能，可以快速的对前端页面进行布局架构，在学习过程中，主要是英文对我难度有点大，基类的各种单词，我背了又背，结果现在还是很多没记住，我觉得我需要更多的去学习记忆，多去使用或者对我记忆有很大的帮助，虽然bootstrap功能很强大，但是想要达到自己想要的效果还是需要自己去修改css样式等功能
批改老师：西门大官人批改时间：2019-02-17 09:48:45
老师总结：模态框直接写在页面里不太好。等学习了js和jquery及面向对象后，可以把这些模态框的代码封装到类中使用，代码更清晰
