Bootstarp 简单后台页面


<html lang="zh-CN">
<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>后台管理页面title>

    
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <style>
        @media (min-width: 768px) {
           #silder_sub{
               width: 350px;
               margin-top: 51px;
               position: absolute;
               z-index: 1;
               height: 600px;
           }
            .mysearch{
                margin: 10px 0;
            }
            .page-main{
                margin-left: 350px;
            }
        }
    style>
    

    
    
    
head>
<body>

<nav class="navbar navbar-default navbar-static-top">
    <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#silder_sub" aria-expanded="false">
            
            <span class="sr-only">Toggle navigationspan>
            <span class="icon-bar">span>
            <span class="icon-bar">span>
            <span class="icon-bar">span>
        button>
        <a href="#" class="navbar-brand">网站后台管理a>
    div>
    <ul class="nav navbar-nav navbar-right" style="margin-right: 3rem">
        <li><a href="#"><span class="badge">23span>a>li>
        <li><a href="#"><span class="glyphicon glyphicon-off ">span> 注销a>li>
    ul>

    
    <div class=" navbar-collapse" id="silder_sub">
        <ul class="nav" >
            <li class="mysearch">
                <div class="input-group">
                    <input type="text" class="form-control">
                    <span class="input-group-btn">
                        <button class="btn btn-default" style="color: #2aabd2">搜索
                             <span class="glyphicon glyphicon-search" style="color: #2aabd2;">span>
                        button>
                    span>
                div>
            li>
            <li>
                <a href="#sub1" data-toggle="collapse">系统功能<span class="glyphicon glyphicon-arrow-down pull-right">span>a>
                
                <ul id="sub1" class="nav collapse">
                    <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-arrow-down pull-right">span>a>
                
                <ul id="sub2" class="nav collapse">
                    <li><a href="#">产品功能a>li>
                    <li><a href="#">系统信息a>li>
                    <li><a href="#">调试a>li>
                ul>
            li>
            <li>
                <a href="#sub3" data-toggle="collapse">产品设置<span class="glyphicon glyphicon-arrow-down pull-right">span>a>
                
                <ul id="sub3" class="nav collapse">
                    <li><a href="#">产品功能a>li>
                    <li><a href="#">系统信息a>li>
                    <li><a href="#">调试a>li>
                ul>
            li>
            <li>
                <a href="#sub4" data-toggle="collapse">产品设置<span class="glyphicon glyphicon-arrow-down pull-right">span>a>
                
                <ul id="sub4" class="nav collapse">
                    <li><a href="#">产品功能a>li>
                    <li><a href="#">系统信息a>li>
                    <li><a href="#">调试a>li>
                ul>
            li>
        ul>
    div>
nav>



<div class="page-main" style="margin-top: 0">
    <ol class="breadcrumb">
        <li><a href="#">管理首页a>li>
        <li><a href="#">栏目管理a>li>
        <li class="active">增加栏目li>
    ol>
    
    <div class="row">
        <div class="col-md-6">
            <div class="panel panel-default">
                <div class="panel-heading">最新订单div>
                <div class="panel-body table-responsive">
                    <table class="table table-hover table-striped">
                        <thead>
                            <tr>
                                <th>#th>
                                <th>订单号th>
                                <th>订单日期th>
                                <th>总价th>
                                <th>状态th>
                            tr>
                        thead>
                        <tbody>
                        <tr><td>1td><td>6262td><td>2017年2月4日 23:55:16td><td>555td><td>完成td>tr>
                        <tr><td>1td><td>6262td><td>2017年2月4日 23:55:16td><td>555td><td>完成td>tr>
                        <tr><td>1td><td>6262td><td>2017年2月4日 23:55:16td><td>555td><td>完成td>tr>
                        <tr><td>1td><td>6262td><td>2017年2月4日 23:55:16td><td>555td><td>完成td>tr>
                        <tr><td>1td><td>6262td><td>2017年2月4日 23:55:16td><td>555td><td>完成td>tr>
                        <tr><td>1td><td>6262td><td>2017年2月4日 23:55:16td><td>555td><td>完成td>tr>
                        <tr><td>1td><td>6262td><td>2017年2月4日 23:55:16td><td>555td><td>完成td>tr>
                        <tr><td>1td><td>6262td><td>2017年2月4日 23:55:16td><td>555td><td>完成td>tr>
                        <tr><td>1td><td>6262td><td>2017年2月4日 23:55:16td><td>555td><td>完成td>tr>
                        <tr><td>1td><td>6262td><td>2017年2月4日 23:55:16td><td>555td><td>完成td>tr>
                        <tr><td>1td><td>6262td><td>2017年2月4日 23:55:16td><td>555td><td>完成td>tr>
                        <tr><td>1td><td>6262td><td>2017年2月4日 23:55:16td><td>555td><td>完成td>tr>
                        <tr><td>1td><td>6262td><td>2017年2月4日 23:55:16td><td>555td><td>完成td>tr>
                        <tr><td>1td><td>6262td><td>2017年2月4日 23:55:16td><td>555td><td>完成td>tr>
                        tbody>
                    table>
                div>
            div>
        div>
        <div class="col-md-6"><div class="panel panel-default">
            <div class="panel-heading">最新订单div>
            <div class="panel-body table-responsive">
                <table class="table table-hover table-striped">
                    <thead>
                    <tr>
                        <th>#th>
                        <th>订单号th>
                        <th>订单日期th>
                        <th>总价th>
                        <th>状态th>
                    tr>
                    thead>
                    <tbody>
                    <tr><td>1td><td>6262td><td>2017年2月4日 23:55:16td><td>555td><td>完成td>tr>
                    <tr><td>1td><td>6262td><td>2017年2月4日 23:55:16td><td>555td><td>完成td>tr>
                    <tr><td>1td><td>6262td><td>2017年2月4日 23:55:16td><td>555td><td>完成td>tr>
                    <tr><td>1td><td>6262td><td>2017年2月4日 23:55:16td><td>555td><td>完成td>tr>
                    <tr><td>1td><td>6262td><td>2017年2月4日 23:55:16td><td>555td><td>完成td>tr>
                    <tr><td>1td><td>6262td><td>2017年2月4日 23:55:16td><td>555td><td>完成td>tr>
                    <tr><td>1td><td>6262td><td>2017年2月4日 23:55:16td><td>555td><td>完成td>tr>
                    <tr><td>1td><td>6262td><td>2017年2月4日 23:55:16td><td>555td><td>完成td>tr>
                    <tr><td>1td><td>6262td><td>2017年2月4日 23:55:16td><td>555td><td>完成td>tr>
                    <tr><td>1td><td>6262td><td>2017年2月4日 23:55:16td><td>555td><td>完成td>tr>
                    <tr><td>1td><td>6262td><td>2017年2月4日 23:55:16td><td>555td><td>完成td>tr>
                    <tr><td>1td><td>6262td><td>2017年2月4日 23:55:16td><td>555td><td>完成td>tr>
                    <tr><td>1td><td>6262td><td>2017年2月4日 23:55:16td><td>555td><td>完成td>tr>
                    <tr><td>1td><td>6262td><td>2017年2月4日 23:55:16td><td>555td><td>完成td>tr>
                    tbody>
                table>
            div>
        div>
        div>
    div>

    <div class="row">
        <div class="col-sm-12">
            <div class="panel panel-default">
                <div class="panel-heading">最新订单div>
                <div class="panel-body table-responsive">
                    <table class="table table-hover table-striped">
                        <thead>
                        <tr>
                            <th>#th>
                            <th>订单号th>
                            <th>订单日期th>
                            <th>总价th>
                            <th>状态th>
                        tr>
                        thead>
                        <tbody>
                        <tr><td>1td><td>6262td><td>2017年2月4日 23:55:16td><td>555td><td>完成td>tr>
                        <tr><td>1td><td>6262td><td>2017年2月4日 23:55:16td><td>555td><td>完成td>tr>
                        <tr><td>1td><td>6262td><td>2017年2月4日 23:55:16td><td>555td><td>完成td>tr>
                        <tr><td>1td><td>6262td><td>2017年2月4日 23:55:16td><td>555td><td>完成td>tr>
                        <tr><td>1td><td>6262td><td>2017年2月4日 23:55:16td><td>555td><td>完成td>tr>
                        <tr><td>1td><td>6262td><td>2017年2月4日 23:55:16td><td>555td><td>完成td>tr>
                        <tr><td>1td><td>6262td><td>2017年2月4日 23:55:16td><td>555td><td>完成td>tr>
                        <tr><td>1td><td>6262td><td>2017年2月4日 23:55:16td><td>555td><td>完成td>tr>
                        <tr><td>1td><td>6262td><td>2017年2月4日 23:55:16td><td>555td><td>完成td>tr>
                        <tr><td>1td><td>6262td><td>2017年2月4日 23:55:16td><td>555td><td>完成td>tr>
                        <tr><td>1td><td>6262td><td>2017年2月4日 23:55:16td><td>555td><td>完成td>tr>
                        <tr><td>1td><td>6262td><td>2017年2月4日 23:55:16td><td>555td><td>完成td>tr>
                        <tr><td>1td><td>6262td><td>2017年2月4日 23:55:16td><td>555td><td>完成td>tr>
                        <tr><td>1td><td>6262td><td>2017年2月4日 23:55:16td><td>555td><td>完成td>tr>
                        tbody>
                    table>
                    <nav aria-label="Page navigation" class="pull-right">
                        <ul class="pagination">
                            <li>
                                <a href="#" aria-label="Previous">
                                    <span aria-hidden="true">«span>
                                a>
                            li>
                            <li><a href="#">1a>li>
                            <li><a href="#">2a>li>
                            <li><a href="#">3a>li>
                            <li><a href="#">4a>li>
                            <li><a href="#">5a>li>
                            <li>
                                <a href="#" aria-label="Next">
                                    <span aria-hidden="true">»span>
                                a>
                            li>
                        ul>
                    nav>
                    
                div>
            div>
        div>
    div>
div>



<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js">script>

<script src="js/bootstrap.min.js">script>
body>
html>

你可能感兴趣的:(Bootstarp)