Bootstrap作业

原创 2019-01-09 16:40:33 817
摘要:全部自己做的,第一次做比较慢点,还有很多细节还没做的很好。先交了。效果图:1、首页2、维修单据列表页3、维修开单页4、模态框(弹层)1、首页代码<!doctype html> <html> <head>     <meta charset="UTF-8">  &

全部自己做的,第一次做比较慢点,还有很多细节还没做的很好。先交了。

效果图:

1、首页QQ截图20190109163519.png

2、维修单据列表页

QQ截图20190109163701.png

3、维修开单页

QQ截图20190109163726.png

4、模态框(弹层)

QQ截图20190109163819.png


1、首页代码

<!doctype html>
<html>
<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">
    <script src="../lib/jquery.js"></script>
<script src="../lib/dist/js/bootstrap.js"></script>
    <title>后台管理</title>
</head>
<body>
<!-- 顶部导航 -->
<nav class="navbar navbar-inverse">
  <div>
        <!-- 导航前部 -->
    <div>
      <a href="#">
        <img alt="Brand" src="a.jpg" height="100%">
      </a>
    </div>

    <div class="collapse navbar-collapse" id="example-navbar-collapse">
        <ul class="nav navbar-nav">
            <li><a href="#">客 户</a></li>
            <li><a href="#">单 据</a></li>
            <li><a href="#">财 务</a></li>
            <li><a href="#">采 购</a></li>
            <li><a href="#">仓 库</a></li>
            <li><a href="#">系统设置</a></li>
        </ul>
        <ul class="nav navbar-nav navbar-right">
            <li><a>欢迎您,admin</a></li>
            <li><a href="#" data-toggle="modal" data-target="#myModal">修改密码</a></li>
            <li><a href="#" data-toggle="modal" data-target="#myModal">安全退出</a></li>
        </ul>

    </div>

  </div>
</nav>

<!-- 修改密码确认框 -->
<div class="modal fade" id="myModal">
<!-- 创建一个对话框 -->
<div>
<div>
<!-- 模态框头部 -->
<div>
<!-- 关闭按钮 -->
<button type="button" data-dismiss="modal" aria-label="Clost">&times;</button>
<h4>修改密码</h4>
</div>

<!-- 模态框主体 -->
<div class="modal-body ">
<form action="">
<div>
<label class="control-label col-sm-2" for="user">账号:</label>
<div>
<p>admin</p>
</div>
</div>
<div>
<label class="control-label col-sm-2" for="user">身份:</label>
<div>
<input type="text" placeholder="超级管理员" readonly>
</div>
</div>
<div>
<label class="control-label col-sm-2" for="user">密码:</label>
<div>
<input type="password" id="password" placeholder="请输入新密码">
</div>
</div>
<div>
<label class="control-label col-sm-2" for="user">密码:</label>
<div>
<input type="password" id="password" placeholder="请再次输入新密码">
</div>
</div>
</form>
</div>

<!-- 模态框底部 -->
<div>
<button type="button" class="btn btn-default" data-dismiss="modal" aria-label="Close">关闭</button>
<!-- 用户自定义功能按钮:确定/保存/提交 -->
<button type="button" class="btn btn-primary">保存</button>
</div>
</div>
</div>
</div>

<!-- 左侧菜单及内容区 -->
<div>
<div>
        <!-- 左侧菜单区 -->
<div>
<!-- 左侧菜单折叠 -->
<div id="accordion">
<div class="panel panel-default">
<div>
<h5>
<a data-toggle="collapse" data-parent="#accordion" 
   href="#collapseOne" style="">
维修管理
</a>
</h5>
</div>

<div id="collapseOne" class="panel-collapse collapse in">
<div>
<a href="javascript:;"onclick="menuFire(this)" src="kaidan.html" style="text-decoration:none;color: #333;">维修开单</a>
</div>
<div >
<a href="javascript:;"onclick="menuFire(this)" src="danju.html" style="text-decoration:none;color: #333;">维修单据</a>
</div>
<div>
维修作废单据
</div>
</div>
</div>
<div class="panel panel-default">
<div>
<h5>
<a data-toggle="collapse" data-parent="#accordion" 
   href="#collapseTwo">
收银管理
</a>
</h5>
</div>
<div id="collapseTwo" class="panel-collapse collapse">
<div>
销售开单
</div>
<div>
销售单据
</div>
<div>
销售作废单据
</div>
</div>
</div>
<div class="panel panel-default">
<div>
<h4>
<a data-toggle="collapse" data-parent="#accordion" 
   href="#collapseThree">
客户预约
</a>
</h4>
</div>
<div id="collapseThree" class="panel-collapse collapse">
<div>
预约管理
</div>
</div>
</div>
</div>
</div>

<!--主操作页面-->
<div>
      <iframe src="welcome.html" onload="resetMainHeight(this)"  style="width: 100%;height: 100%;"frameborder="0" scrolling="0" ></iframe>
    </div>


</div>
</div>

<div>
<p>
        2019 &copy; HiKi1987 QQ 97369623
</p>
</div>


<script>
   //菜单点击
   function menuFire(obj){
     //获取url
     var src=$(obj).attr('src')
     //改变框架内的页面地址
     $('iframe').attr('src',src)
   }

  // 设置主操作页面高度
    function resetMainHeight(obj){
    var height = parent.document.documentElement.clientHeight-53;
    $(obj).parent('div').height(height)

   }
</script>

</body>
</html>

2、维修单据页内联页代码

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
    <link rel="stylesheet" href="../lib/dist/css/bootstrap.css">
    <script src="../lib/jquery.js"></script>
<script src="../lib/dist/js/bootstrap.js"></script>
</head>
<body>
<!-- 右侧内容区 -->

<div class="panel panel-default">
   <div>
      <h3>
         维修单据
      </h3>
   </div>

   <div>
      <form role="form">
                    <div>
                        <label for="name">所属门店</label>
                        <select>
                            <option>高新站</option>
                            <option>新都站</option>
                            <option>武侯站</option>
                        </select>
                    </div>
                    <div>
                        <label for="name">时间类型</label>
                        <select>
                            <option>单据时间</option>
                            <option>派工时间</option>
                            <option>竣工时间</option>
                            <option>结算时间</option>
                        </select>
                    </div>
                    <div>
                     <input type="glyphicon-time">至
                     <input type="glyphicon-time">
                    </div>
                    <div>
                        <label for="name">接车人</label>
                        <select>
                            <option>张三</option>
                            <option>李四</option>
                        </select>
                    </div>
                    <div>
                        <label for="name"></label>
                        <input type="text" id="name" placeholder="订单号、客户名、车牌、手机">
                    </div>
                    <div>
                        <button type="submit" class="btn btn-default">开始搜索</button>
                    </div>
                  </form>
   </div>

   <!-- 列表 -->
            <div>
                <table class="table table-striped ">
                    <thead>
                        <tr>
                            <th>序号</th>
                            <th>单据编号</th>
                            <th>单据日期</th>
                            <th>状态</th>
                            <th>车牌号</th>
                            <th>品牌</th>
                            <th>车系</th>
                            <th>客户姓名</th>
                            <th>手机号码</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>1</td>
                            <td>R1901091253519003</td>
                            <td>2019-01-09 12:59:01</td>
                            <td>待竣工</td>
                            <td>川BZP821</td>
                            <td>标致(进口)</td>
                            <td>标致508</td>
                            <td>张长建</td>
                            <td>15882869790</td>
                            <td>
                                <div>
                                    <a href="" class="btn btn-default btn-sm">修改</a>
                                    <a href="" class="btn btn-danger btn-sm">作废</a>
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td>2</td>
                            <td>R1901090833419006</td>
                            <td>2019-01-09 12:59:01</td>
                            <td>待竣工</td>
                            <td>川A1JM06</td>
                            <td>标致(进口)</td>
                            <td>标致508</td>
                            <td>张长建</td>
                            <td>15882869790</td>
                            <td>
                                <div>
                                    <a href="" class="btn btn-default btn-sm">修改</a>
                                    <a href="" class="btn btn-danger btn-sm">作废</a>
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td>3</td>
                            <td>R1901091206504203</td>
                            <td>2019-01-09 12:59:01</td>
                            <td>待竣工</td>
                            <td>川MSA761</td>
                            <td>标致(进口)</td>
                            <td>标致508</td>
                            <td>张长建</td>
                            <td>15882869790</td>
                            <td>
                                <div>
                                    <a href="" class="btn btn-default btn-sm">修改</a>
                                    <a href="" class="btn btn-danger btn-sm">作废</a>
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td>4</td>
                            <td>R1901090954519002 </td>
                            <td>2019-01-09 12:59:01</td>
                            <td>待竣工</td>
                            <td>川A1W26Y</td>
                            <td>标致(进口)</td>
                            <td>标致508</td>
                            <td>张长建</td>
                            <td>15882869790</td>
                            <td>
                                <div>
                                    <a href="" class="btn btn-default btn-sm">修改</a>
                                    <a href="" class="btn btn-danger btn-sm">作废</a>
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td>5</td>
                            <td>R1901091253519003</td>
                            <td>2019-01-09 12:59:01</td>
                            <td>待竣工</td>
                            <td>川AL679H</td>
                            <td>标致(进口)</td>
                            <td>标致508</td>
                            <td>张长建</td>
                            <td>15882869790</td>
                            <td>
                                <div>
                                    <a href="" class="btn btn-default btn-sm">修改</a>
                                    <a href="" class="btn btn-danger btn-sm">作废</a>
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td>6</td>
                            <td>R1901090819080301</td>
                            <td>2019-01-09 12:59:01</td>
                            <td>待竣工</td>
                            <td>川CG1730</td>
                            <td>标致(进口)</td>
                            <td>标致508</td>
                            <td>张长建</td>
                            <td>15882869790</td>
                            <td>
                                <div>
                                    <a href="" class="btn btn-default btn-sm">修改</a>
                                    <a href="" class="btn btn-danger btn-sm">作废</a>
                                </div>
                            </td>
         &					

批改老师:查无此人批改时间:2019-01-09 16:42:22
老师总结:做的真不错,很快你就有自己的cms后台系统了。继续加油。

发布手记

热门词条