abstract：<!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="#">網(wǎng)站管理系統(tǒng)</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">關(guān)于我們</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="#">行業(yè)新聞</a></li> </ul> </li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" type="button">產(chǎn)品管理 <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="#">刀開關(guān)</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="#">聯(lián)系我們</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">系統(tǒng)功能模塊</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">系統(tǒng)配置 <span class="caret"></span></a> </h4> </div> <ul id="declare" class="list-group collapse"> <li class="list-group-item"><a href="">系統(tǒng)信息</a></li> <li class="list-group-item"><a href="">網(wǎng)站關(guān)鍵字配置</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="">聯(lián)系方式修改</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">關(guān)于我們 <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="">公司優(yōu)勢</a></li> <li class="list-group-item"><a href="">資質(zhì)榮譽</a></li> </ul> </div> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a href="#declare3" data-toggle="collapse">產(chǎn)品中心 <span class="caret"></span></a> </h4> </div> <ul id="declare3" class="list-group collapse"> <li class="list-group-item"><a href="">添加產(chǎn)品類別</a></li> <li class="list-group-item"><a href="">添加新產(chǎn)品</a></li> <li class="list-group-item"><a href="">產(chǎn)品管理</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="">行業(yè)新聞</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>您修改的內(nèi)容即將被保存，并且退出后臺管理</p> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">取消</button> <button type="button" class="btn btn-primary">確認(rèn)</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">是否不保存內(nèi)容，并退出?</h4> </div> <div class="modal-body"> <p>您修改的內(nèi)容不會被保存，并且退出后臺管理</p> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">取消</button> <button type="button" class="btn btn-primary">確認(rèn)</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">當(dāng)前所在位置：首頁</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">系統(tǒng)管理員</span><br> 如果發(fā)現(xiàn)上次登錄時間與您上次操作的實際時間不相符請立即退出系統(tǒng)并告之系統(tǒng)管理員！<br> 您可以操作的模塊列表如左邊菜單所示，點擊每個模塊展開其子目錄。 </p> </div> </div> <div class="panel panel-default"> <div class="panel-heading"> <h5 class="panel-title">系統(tǒng)信息概述</h5> </div> <table class="table table-bordered"> <tbody> <tr> <td class="col-sm-2 text-right"> 當(dāng)前系統(tǒng)版本: </td> <td class="col-sm-10"> 企業(yè)網(wǎng)站管理系統(tǒng)V2.0 </td> </tr> <tr> <td class="col-sm-2 text-right"> 當(dāng)前域名: </td> <td class="col-sm-10"> ipnx.cn </td> </tr> <tr> <td class="col-sm-2 text-right"> 當(dāng)前文件位置: </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">當(dāng)前所在位置：關(guān)于我們</h4> </div> <div class="panel-body"> <p><span style="color: red">php中文網(wǎng)</span>提供大量免費、原創(chuàng)、高清的php視頻教程,并定期舉行公益php培訓(xùn)!可邊學(xué)習(xí)邊在線修改示例代碼,查看執(zhí)行效果!php從入門到精通,一站式php自學(xué)平臺!</p> </div> </div> </div> </div> </div> </div> </div> </body> </html>
保存退出里我做了模態(tài)框，首頁到關(guān)于我們做的是列表切換。
bootstrap功能很強大，結(jié)合了html,css,js等功能，可以快速的對前端頁面進(jìn)行布局架構(gòu)，在學(xué)習(xí)過程中，主要是英文對我難度有點大，基類的各種單詞，我背了又背，結(jié)果現(xiàn)在還是很多沒記住，我覺得我需要更多的去學(xué)習(xí)記憶，多去使用或者對我記憶有很大的幫助，雖然bootstrap功能很強大，但是想要達(dá)到自己想要的效果還是需要自己去修改css樣式等功能
Correcting teacher：西門大官人Correction time：2019-02-17 09:48:45
Teacher's summary：模態(tài)框直接寫在頁面里不太好。等學(xué)習(xí)了js和jquery及面向?qū)ο蠛?，可以把這些模態(tài)框的代碼封裝到類中使用，代碼更清晰