亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

Bootstrap網(wǎng)站后臺管理頁面

??? 2019-02-27 14:10:52 238
????：<!DOCTYPE html> <html>   <head>     <meta charset="utf-8">     <meta http-equiv="X-UA-Compati 
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 shim 和 Respond.js 是為了讓 IE8 支持 HTML5 元素和媒體查詢（media queries）功能 -->
    <!-- 警告：通過 file:// 協(xié)議（就是直接將 html 頁面拖拽到瀏覽器中）訪問頁面時 Respond.js 不起作用 -->
    <!--[if lt IE 9]>
      <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
    <![endif]-->
<style type="text/css">
@media (min-width: 768px) {
#slider_sub{
width: 250px;
margin-top: 51px;
position: absolute;
z-index: 1;
height: 600px;
}
.myserch{
margin: 10px 0;
}
.page_main{
margin-left: 255px;
}
}
</style>
  </head>
  <body>
  <!-- 導航 -->
    <nav class="nav navbar-default navbar-static-top">
<div>
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span></span>
<span></span>
<span></span>
<span></span>
</button>
<a href="#">網(wǎng)站后臺管理</a>
</div>
<ul class="nav navbar-nav navbar-right" style="margin-right: 15px;">
<li><a href="#"><span>23</span></a></li>
<li><a href="#"><span class="glyphicon glyphicon-off"></span>&nbsp;注銷</a></li>
</ul>
<!-- 側(cè)邊導航 -->
<div class="nav navbar-default navbar-collapse" id="slider_sub">
<ul>
<li>
<div class="input-group myserch">
<input type="text" name="text" id="" />
<span>
<button type="button" class="btn btn-default">
<span class="glyphicon glyphicon-search"></span>
</button>
</span>
</div>
</li>
<li>
<a href="#sub1" data-toggle="collapse">系統(tǒng)功能<span class="glyphicon glyphicon-chevron-right pull-right"></span></a>
<ul id="sub1" class="nav collapse">
<li><a href="#">系統(tǒng)信息</a></li>
<li><a href="#">管理員信息</a></li>
<li><a href="#">日志信息</a></li>
<li><a href="#">退出</a></li>
</ul>
</li>
<li>
<a href="#sub2" data-toggle="collapse">欄目功能<span class="glyphicon glyphicon-chevron-right pull-right"></span></a>
<ul id="sub2" class="nav collapse">
<li><a href="#">系統(tǒng)信息</a></li>
<li><a href="#">管理員信息</a></li>
<li><a href="#">日志信息</a></li>
<li><a href="#">退出</a></li>
</ul>
</li>
<li>
<a href="#sub3" data-toggle="collapse">產(chǎn)品功能<span class="glyphicon glyphicon-chevron-right pull-right"></span></a>
<ul id="sub3" class="nav collapse">
<li><a href="#">系統(tǒng)信息</a></li>
<li><a href="#">管理員信息</a></li>
<li><a href="#">日志信息</a></li>
<li><a href="#">退出</a></li>
</ul>
</li>
</ul>
</div>
</nav>
<!-- 內(nèi)容區(qū)域 -->
<div>
<ol>
<li><a href="#">管理首頁</a></li>
<li><a href="#">欄目管理</a></li>
<li>增加欄目</li>
</ol>
<div>
<div class="panel panel-default">
<div>最新訂單</div>
<div class="panel-body table-responsive">
<table class="table table-striped table-hover tablebo">
<tr>
<th>#</th>
<th>訂單號</th>
<th>訂單日期</th>
<th>總價</th>
<th>狀態(tài)</th>
</tr>
<tr>
<td>1</td>
<td>00123456</td>
<td>2018-08-08 13:05:55</td>
<td>118.00</td>
<td>出庫</td>
</tr>
<tr>
<td>2</td>
<td>00123456</td>
<td>2018-08-08 13:05:55</td>
<td>118.00</td>
<td>出庫</td>
</tr>
<tr>
<td>3</td>
<td>00123456</td>
<td>2018-08-08 13:05:55</td>
<td>118.00</td>
<td>出庫</td>
</tr>
</table>
</div>
</div>
</div>
<div>
<div class="panel panel-default">
<div>最新訂單</div>
<div class="panel-body table-responsive">
<table class="table table-striped table-hover tablebo">
<tr>
<th>#</th>
<th>訂單號</th>
<th>訂單日期</th>
<th>總價</th>
<th>狀態(tài)</th>
</tr>
<tr>
<td>1</td>
<td>00123456</td>
<td>2018-08-08 13:05:55</td>
<td>118.00</td>
<td>出庫</td>
</tr>
<tr>
<td>2</td>
<td>00123456</td>
<td>2018-08-08 13:05:55</td>
<td>118.00</td>
<td>出庫</td>
</tr>
<tr>
<td>3</td>
<td>00123456</td>
<td>2018-08-08 13:05:55</td>
<td>118.00</td>
<td>出庫</td>
</tr>
</table>
</div>
</div>
</div>
<!-- 分頁 -->
<nav aria-label="Page navigation">
<ul>
<li>
<a href="#" aria-label="Previous">
<span aria-hidden="true">&laquo;</span>
</a>
</li>
<li><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">&raquo;</span>
</a>
</li>
</ul>
</nav>
</div>
</div>
    <script src="js/jquery-3.3.1.js"></script>
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>


?? ???：韋小寶?? ??：2019-02-27 14:15:42
???? ??：bootstrap來實現(xiàn)后臺的管理界面顯然沒有l(wèi)ayui好用 并且也沒有l(wèi)ayui靈活 寫的很不錯 后期可以使用layui來寫個后臺管理界面

??? ??

?? ??