通过学习bootstrap，我们可以尝试做一个商城后台。
效果预览：
主页面：
商品管理页面：
订单管理页面：
代码如下：
主页面
实例
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <link rel="stylesheet" href="../lib/dist/css/bootstrap.css"> <title>商城后台</title> </head> <body> <div class="col-md-10 col-md-offset-2"> <div class="page-header "> <h1>网上商城后台管理系统 <small>顾客第一，服务至上</small> </h1> </div> </div> <div class="container-fluid"> <div class="row"> <div class="col-md-1 col-md-offset-2"> <ul class="nav nav-pills nav-stacked"> <li role="presentation"><a href="welcome.html" target="main">管理主页</a></li> <li role="presentation"><a href="page1.html" target="main">商品管理</a></li> <li role="presentation"><a href="page2.html" target="main">订单管理</a></li> </ul> </div> <div class="col-md-6" style="height: 600px"> <iframe src="welcome.html" name="main" frameborder="0" width="100%" height="100%" scrolling="no" marginheight="0" marginwidth="0"></iframe> </div> </div> </div> <div class="footer-bottom"> <div class="text-center"> <p>© PHP中文网测试案例 2018</p> </div> </div> <script src="../lib/jquery.js"></script> <script src="../lib/dist/js/bootstrap.js"></script> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
欢迎页面：
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="../lib/dist/css/bootstrap.css"> <title>Title</title> </head> <body> <div id="main" style="height: 600px;text-align: center"> <H2>欢迎来到商城后台</H2> <div class="panel panel-info"> <div class="panel-heading">今日订单数</div> <div class="panel-body"> 108笔 </div> </div> <div class="panel panel-info"> <div class="panel-heading">今日销售额</div> <div class="panel-body"> 35000元 </div> </div> <div class="panel panel-danger"> <div class="panel-heading">今日退货订单数</div> <div class="panel-body"> 3笔 </div> </div> </div> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
商品页面：
实例
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <link rel="stylesheet" href="../lib/dist/css/bootstrap.css"> <title></title> </head> <body> <div class="panel panel-default"> <div class="panel-heading"> <!--面板的标题--> <h3 class="panel-title text-center">商品列表</h3> </div> <!--面板的主体--> <!--<div class="panel-body">--> <!--在面板中嵌入一个表格--> <table class="table table-bordered table-hover"> <thead> <tr class="bg-success"> <td>编号</td> <td>名称</td> <td>规格</td> <td>单价</td> <td>库存</td> </tr> </thead> <tbody> <tr> <td>1001</td> <td>NIKE AJ1</td> <td>红色</td> <td>3000</td> <td>200</td> </tr> <tr> <td>1002</td> <td>NIKE Leborn 1</td> <td>黑色</td> <td>4000</td> <td>100</td> </tr> <tr> <td>1003</td> <td>NIKE running</td> <td>黄色</td> <td>1000</td> <td>400</td> </tr> <tr> <td>2001</td> <td>ADIDAS YEZZY</td> <td>黑色</td> <td>1200</td> <td>200</td> </tr> <tr> <td>2002</td> <td>ADIDAS Z750</td> <td>蓝色</td> <td>800</td> <td>500</td> </tr> </tbody> </table> <!--</div>--> <!--<div class="panel-footer">--> <!----> <!--</div>--> </div> <nav aria-label="Page navigation" class="text-center"> <ul class="pagination"> <li> <a href="#" aria-label="Previous"> <span aria-hidden="true">«</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">»</span> </a> </li> </ul> </nav> <script src="../lib/jquery.js"></script> <script src="../lib/dist/js/bootstrap.js"></script> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
订单管理页面与商品管理页面基本一致。
