Blogger Information
Blog 38
fans 0
comment 0
visits 30580
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
简单商城后台——2018年10月4日
图图的博客
Original
853 people have browsed it

实例

<!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">
    <script src="../lib/jquery.js"></script>
    <script src="../lib/dist/js/bootstrap.js"></script>
    <title>后台管理系统</title>
    <link rel="shortcut icon" href="favicon.png">
    <style>
        .row .col-md-2 a {
            border: none;
        }
        th{
            text-align: center;
        }
    </style>
</head>
<body >

<div class="container-fluid" style="margin: 0;padding: 0">
    <!--导航条-->
    <div class="row" style="margin: 0;padding: 0">
        <div class="col-md-12" style="margin: 0;padding: 0">
            <nav class="navbar navbar-inverse " style="border-radius: 0;margin: 0" >
                <div class="container" >
                    <!-- Brand and toggle get grouped for better mobile display -->
                    <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="#">后台管理系统</a>
                    </div>

                    <!-- Collect the nav links, forms, and other content for toggling -->
                    <div class="collapse navbar-collapse " id="bs-example-navbar-collapse-1">
                        <ul class="nav navbar-nav">
                            <li><a href="#">首页</a></li>
                        </ul>
                        <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">收藏夹 <span class="caret"></span></a>
                                <ul class="dropdown-menu">
                                    <li><a href="#">收藏的宝贝</a></li>
                                    <li><a href="#">收藏的店铺</a></li>

                                </ul>
                            </li>
                            <li class="dropdown">
                                <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">我的订单<span class="caret"></span></a>
                                <ul class="dropdown-menu">
                                    <li><a href="#">已***的宝贝</a></li>
                                    <li><a href="#">我的足迹</a></li>

                                </ul>
                            </li>
                            <li><a href="#">***</a></li>
                            <li><a href="#">设置</a></li>
                            <li><a href="#">退出</a></li>
                        </ul>



                    </div><!-- /.navbar-collapse -->
                </div><!-- /.container-fluid -->
            </nav>
        </div>
    </div>
    <!--功能列表-->
    <div class="row" >
        <div class="col-md-2 col-md-offset-1" style="border-right:1px solid #b9b9b9;margin-top: 0;padding-right: 0;min-height: 600px">

            <div class="list-group" >
                <h3 style="margin-left: 16px;color: #1098d4;">全部功能</h3>
                <a href="#" class="list-group-item" >购物车</a>
                <a href="#" class="list-group-item" >未完成订单</a>
                <a href="#" class="list-group-item active">已完成订单</a>
                <a href="#" class="list-group-item">待评价</a>
                <a href="#" class="list-group-item">我的评价</a>
            </div>
        </div>
        <!--操作区域-->
        <div class="col-md-6 col-md-offset-1 ">
            <div class="row">
                <h3 class="text-center">商品信息表</h3>
                <table class="table table-bordered text-center" >

                    <tr style="background: #32ace8;text-align: center">
                        <th>ID</th>
                        <th>名称</th>
                        <th>类别</th>
                        <th>单价</th>
                        <th>数量</th>
                    </tr>
                    <tr>
                        <td>x</td>
                        <td>x</td>
                        <td>x</td>
                        <td>x</td>
                        <td>x</td>
                    </tr>
                    <tr>
                        <td>x</td>
                        <td>x</td>
                        <td>x</td>
                        <td>x</td>
                        <td>x</td>
                    </tr>
                    <tr>
                        <td>x</td>
                        <td>x</td>
                        <td>x</td>
                        <td>x</td>
                        <td>x</td>
                    </tr>
                    <tr>
                        <td>x</td>
                        <td>x</td>
                        <td>x</td>
                        <td>x</td>
                        <td>x</td>
                    </tr>
                </table>
            </div>
            <div class="row text-center ">

                    <nav aria-label="Page navigation">
                        <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>


            </div>







        </div>
    </div>
    <!--foot-->
    <div class="row " >
        <div class="container-fluid" style="background: silver;height: 60px">
            <p style="text-align:center;line-height: 60px">联系我们:xxxxxxxx</p>
        </div>

    </div>

</div>


</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例


Correction status:Uncorrected

Teacher's comments:
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments