サマリー：后臺(tái)主頁(yè)頭部代碼如下<nav class="navbar navbar-inverse" style="border-radius: 0;"> <div class="container-fluid"> <div class=&q
后臺(tái)主頁(yè)頭部
代碼如下
<nav class="navbar navbar-inverse" style="border-radius: 0;">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#"><img src="logo.jpg" alt="logo" width="30"></a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">admin <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">個(gè)人信息</a></li>
<li><a href="#">切換賬號(hào)</a></li>
<li><a href="#">退出</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
后臺(tái)側(cè)邊欄和主體部分
代碼如下
<div class="container-fluid">
<div class="row">
<div class="col-md-2 left-menu">
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingOne">
<h4 class="panel-title">
<a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
管理員管理
</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
<div class="panel-body">
<ul class="nav nav-tabs nav-stacked" style="border:none;">
<li><a href="admin_list.html" target="myiframe">管理員列表</a></li>
</ul>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingTwo">
<h4 class="panel-title">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
系統(tǒng)設(shè)置
</a>
</h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
<div class="panel-body">
<ul class="nav nav-tabs nav-stacked" style="border:none;">
<li><a href="set.html" target="myiframe">系統(tǒng)設(shè)置</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-10 right-main">
<iframe name="myiframe" src="welcome.html" frameborder="0" style="width:100%;height:100%;" onload="resetMainHeight(this);"></iframe>
</div>
</div>
</div>
<script type="text/javascript" src="./lib/jquery-3.3.1.js"></script>
<script type="text/javascript" src="./lib/dist/js/bootstrap.min.js"></script>
<script type="text/javascript">
function resetMainHeight(obj){
var height = parent.document.documentElement.clientHeight - 70;
$(obj).parent('div').height(height);
}
</script>
管理員列表頁(yè)面
主要用到表格，分頁(yè)，模態(tài)框插件
代碼如下
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<ol class="breadcrumb">
<li><a href="work.html">Home</a></li>
<li>管理員管理</li>
<li class="active">管理員列表</li>
<li class="pull-right"><a href="javascript:location.replace(location.href);" class="btn btn-success btn-xs"><span class="glyphicon glyphicon-repeat"></span></a></li>
</ol>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="well well-sm">
<div class="btn-group">
<button type="button" class="btn btn-warning" style="margin-right:10px;"><span class="glyphicon glyphicon-retweet"></span> 批量刪除</button>
<button type="button" class="btn btn-success" data-toggle="modal" data-target="#myModal"><span class="glyphicon glyphicon-plus"></span> 添加</button>
</div>
<p class="pull-right" style="line-height: 35px;">共有數(shù)據(jù) <span class="badge">88</span> 條</p>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<form>
<table class="table table-bordered">
<tr>
<th>
<input type="checkbox" name="id" value="">
</th>
<th class="text-center">ID</th>
<th class="text-center">登錄名</th>
<th class="text-center">手機(jī)</th>
<th class="text-center">郵箱</th>
<th class="text-center">角色</th>
<th class="text-center">加入時(shí)間</th>
<th class="text-center">狀態(tài)</th>
<th class="text-center">操作</th>
</tr>
<tr>
<td>
<input type="checkbox" name="id" value="">
</td>
<td>1</td>
<td>admin</td>
<td>18925139194</td>
<td>113664000@qq.com</td>
<td>超級(jí)管理員</td>
<td>2017-01-01 11:11:42</td>
<td>
<button type="button" class="btn btn-info btn-xs">已啟用</button>
</td>
<td>
<a href="" title="停用" class="text-muted"><span class="glyphicon glyphicon-minus-sign"></span></a>
<a href="" title="編輯" class="text-muted"><span class="glyphicon glyphicon-pencil"></span></a>
<a href="" title="刪除" class="text-muted"><span class="glyphicon glyphicon-trash"></span></a>
</td>
</tr>
</table>
</form>
</div>
</div>
<div class="row">
<div class="col-md-12">
<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>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<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" id="myModalLabel">添加管理員</h4>
</div>
<div class="modal-body">
<form class="form-horizontal" action="" method="post" enctype="multipart/form-data">
<div class="form-group">
<label for="username" class="col-sm-2 control-label">登錄名</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="username" placeholder="登錄名">
</div>
</div>
<div class="form-group">
<label for="phone" class="col-sm-2 control-label">手機(jī)</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="phone" placeholder="手機(jī)">
</div>
</div>
<div class="form-group">
<label for="email" class="col-sm-2 control-label">郵箱</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="email" placeholder="郵箱">
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">角色</label>
<div class="col-sm-10">
<select class="form-control" name="role_id">
<option value="">請(qǐng)選擇角色</option>
<option value="1">超級(jí)管理員</option>
<option value="2">編輯人員</option>
<option value="3">問(wèn)題維護(hù)</option>
</select>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">個(gè)人簡(jiǎn)介</label>
<div class="col-sm-10">
<textarea class="form-control" name="info" rows="3" style="resize: none;"></textarea>
</div>
</div>
<div class="form-group">
<label for="info" class="col-sm-2 control-label">愛(ài)好</label>
<div class="col-sm-10">
<div class="checkbox checkbox-inline" style="padding-left: 0;">
<label>
<input type="checkbox" value="">籃球
</label>
</div>
<div class="checkbox checkbox-inline" style="padding-left: 0;">
<label>
<input type="checkbox" value="">足球
</label>
</div>
<div class="checkbox checkbox-inline" style="padding-left: 0;">
<label>
<input type="checkbox" value="">看書(shū)
</label>
</div>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">性別</label>
<div class="col-sm-10">
<div class="radio readio-inline">
<label><input type="radio" name="gender" value="">男</label>
<label><input type="radio" name="gender" value="">女</label>
</div>
</div>
</div>
<div class="form-group">
<label for="avtar" class="col-sm-2 control-label">頭像</label>
<div class="col-sm-10">
<input type="file" id="avtar">
</div>
</div>
<div class="form-group">
<label for="password" class="col-sm-2 control-label">密碼</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="password" placeholder="密碼">
</div>
</div>
<div class="form-group">
<label for="confirm_password" class="col-sm-2 control-label">確認(rèn)密碼</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="confirm_password" placeholder="確認(rèn)密碼">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
<button type="submit" class="btn btn-primary">提交</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="./lib/jquery-3.3.1.js"></script>
<script type="text/javascript" src="./lib/dist/js/bootstrap.min.js"></script>
系統(tǒng)設(shè)置頁(yè)面
主要用到導(dǎo)航，標(biāo)簽頁(yè)，面板，水平表單，輸入框組
代碼如下
<style type="text/css">
.other{width: 100px;}
</style>
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<ol class="breadcrumb">
<li><a href="work.html">Home</a></li>
<li>管理員管理</li>
<li class="active">管理員列表</li>
<li class="pull-right"><a href="javascript:location.replace(location.href);" class="btn btn-success btn-xs"><span class="glyphicon glyphicon-repeat"></span></a></li>
</ol>
</div>
</div>
<div class="row">
<div class="col-md-12">
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
<li class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">網(wǎng)站設(shè)置</a></li>
<li><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">安全設(shè)置</a></li>
<li><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">郵件設(shè)置</a></li>
<li><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">關(guān)閉網(wǎng)站</a></li>
</ul>
<!-- Tab panes -->
<div class="tab-content" style="margin-top:20px;">
<div role="tabpanel" class="tab-pane active" id="home">
<form class="form-horizontal">
<div class="form-group">
<div class="col-md-12">
<div class="input-group">
<span class="input-group-btn">
<button type="button" class="btn other">網(wǎng)站名稱</button>
</span>
<input type="text" name="" class="form-control">
</div>
</div>
</div>
<div class="form-group">
<div class="col-md-12">
<div class="input-group">
<span class="input-group-btn">
<button type="button" class="btn other">關(guān)鍵字</button>
</span>
<input type="text" name="" class="form-control">
</div>
</div>
</div>
<div class="form-group">
<div class="col-md-12">
<div class="input-group">
<span class="input-group-btn">
<button type="button" class="btn other">描述</button>
</span>
<input type="text" name="desc" class="form-control">
</div>
</div>
</div>
<div class="form-group">
<div class="col-md-12">
<div class="panel panel-default" style="margin-bottom: 0;">
<div class="panel-heading">統(tǒng)計(jì)代碼</div>
<textarea name="code" class="form-control" rows="5" style="resize:none;border:none;" placeholder="請(qǐng)輸入內(nèi)容"></textarea>
</div>
</div>
</div>
<div class="form-group">
<div class="col-md-12">
<button type="submit" class="btn btn-success">提交</button>
&am
添削の先生：滅絕師太添削時(shí)間：2018-12-06 09:26:55
先生のまとめ：完成的不錯(cuò)！除了按照課程要求，你最好還要課外拓展奧！加油！