<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>管理后台</title>

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

</head>

<body>

<!--头部信息-->

<nav class="navbar navbar-inverse navbar-fixed-top">

    <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="#">Brand</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 class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>

                <li><a href="#">Link</a></li>

                <li class="dropdown">

                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"

                       aria-expanded="false">Dropdown <span class="caret"></span></a>

                    <ul class="dropdown-menu">

                        <li><a href="#">Action</a></li>

                        <li><a href="#">Another action</a></li>

                        <li><a href="#">Something else here</a></li>

                        <li role="separator" class="divider"></li>

                        <li><a href="#">Separated link</a></li>

                        <li role="separator" class="divider"></li>

                        <li><a href="#">One more separated link</a></li>

                    </ul>

                </li>

            </ul>

            <ul class="nav navbar-nav navbar-right">

                <li><a href="#">Link</a></li>

                <li class="dropdown">

                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"

                       aria-expanded="false">Dropdown <span class="caret"></span></a>

                    <ul class="dropdown-menu">

                        <li><a href="#">Action</a></li>

                        <li><a href="#">Another action</a></li>

                        <li><a href="#">Something else here</a></li>

                        <li role="separator" class="divider"></li>

                        <li><a href="#">Separated link</a></li>

                    </ul>

                </li>

            </ul>

        </div><!-- /.navbar-collapse -->

    </div><!-- /.container-fluid -->

</nav>

<div class="container">

    <div class="panel panel-primary" style="margin-top: 70px">

        <!-- Default panel contents -->

        <div class="panel-heading">后台管理页面</div>

        <div class="panel-body">

            <!--搜索框-->

            <div class="row">

                <div class="col-lg-6">

                    <div class="input-group">

                        <input type="text" class="form-control" placeholder="Search for...">

                        <span class="input-group-btn">

        <button class="btn btn-default" type="button">Go!</button>

      </span>

                    </div><!-- /input-group -->

                </div><!-- /.col-lg-6 -->

                <button class="btn btn-success pull-right" style="margin-right: 15px">＋添加</button>

            </div><!-- /.row -->

                <!--表格内容-->

            <table class="table table-striped text-center ">

                <thead>

                <tr>

                    <th>#</th>

                    <th>标题一</th>

                    <th>标题二</th>

                    <th>标题三</th>

                    <th>标题四</th>

                </tr>

                </thead>

                <tbody>

                <tr>

                    <td>#</td>

                    <td>#</td>

                    <td>#</td>

                    <td>#</td>

                    <td>

                        <button type="button" class="btn btn-default btn-success btn-lg">

                            <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span> 编辑

                        </button>

                        <button type="button" class="btn btn-default btn-danger btn-lg">

                            <span class="glyphicon glyphicon-remove" aria-hidden="true"></span> 删除

                        </button>

                    </td>

                </tr>

                <tr>

                    <td>#</td>

                    <td>#</td>

                    <td>#</td>

                    <td>#</td>

                    <td>

                        <button type="button" class="btn btn-default btn-success btn-lg">

                            <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span> 编辑

                        </button>

                        <button type="button" class="btn btn-default btn-danger btn-lg">

                            <span class="glyphicon glyphicon-remove" aria-hidden="true"></span> 删除

                        </button>

                    </td>

                </tr>

                <tr>

                    <td>#</td>

                    <td>#</td>

                    <td>#</td>

                    <td>#</td>

                    <td>

                        <button type="button" class="btn btn-default btn-success btn-lg">

                            <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span> 编辑

                        </button>

                        <button type="button" class="btn btn-default btn-danger btn-lg">

                            <span class="glyphicon glyphicon-remove" aria-hidden="true"></span> 删除

                        </button>

                    </td>

                </tr>

                <tr>

                    <td>#</td>

                    <td>#</td>

                    <td>#</td>

                    <td>#</td>

                    <td>

                        <button type="button" class="btn btn-default btn-success btn-lg">

                            <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span> 编辑

                        </button>

                        <button type="button" class="btn btn-default btn-danger btn-lg">

                            <span class="glyphicon glyphicon-remove" aria-hidden="true"></span> 删除

                        </button>

                    </td>

                </tr>

                <tr>

                    <td>#</td>

                    <td>#</td>

                    <td>#</td>

                    <td>#</td>

                    <td>

                        <button type="button" class="btn btn-default btn-success btn-lg">

                            <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span> 编辑

                        </button>

                        <button type="button" class="btn btn-default btn-danger btn-lg">

                            <span class="glyphicon glyphicon-remove" aria-hidden="true"></span> 删除

                        </button>

                    </td>

                </tr>

                <tr>

                    <td>#</td>

                    <td>#</td>

                    <td>#</td>

                    <td>#</td>

                    <td>

                        <button type="button" class="btn btn-default btn-success btn-lg">

                            <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span> 编辑

                        </button>

                        <button type="button" class="btn btn-danger btn-danger btn-lg">

                            <span class="glyphicon glyphicon-remove" aria-hidden="true"></span> 删除

                        </button>

                    </td>

                </tr>

                <tr>

                    <td>#</td>

                    <td>#</td>

                    <td>#</td>

                    <td>#</td>

                    <td>

                        <button type="button" class="btn btn-default btn-success btn-lg">

                            <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span> 编辑

                        </button>

                        <button type="button" class="btn btn-default btn-danger btn-lg">

                            <span class="glyphicon glyphicon-remove" aria-hidden="true"></span> 删除

                        </button>

                    </td>

                </tr>

                </tbody>

            </table>

            <hr>

            <!--分页-->

            <div class="pull-right">

                <nav aria-label="Page navigation">

                    <ul class="pagination">

                        <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>

    </div>

</div>

</body>

</html>

效果图↓：

基于bootstrap_后台管理的更多相关文章

  1. 【tornado】系列项目（二）基于领域驱动模型的区域后台管理+前端easyui实现

    本项目是一个系列项目,最终的目的是开发出一个类似京东商城的网站.本文主要介绍后台管理中的区域管理,以及前端基于easyui插件的使用.本次增删改查因数据量少,因此采用模态对话框方式进行,关于数据量大采 ...

  2. Metronic – 超赞！基于 Bootstrap 的响应式后台管理模板

    Metronic 是一套精美的响应式后台管理模板,基于强大的 Twitter Bootstrap 框架实现.Metronic 拥有简洁优雅的 Metro UI 风格界面,6 种颜色可选,76 个模板页 ...

  3. 基于 Bootstrap 的响应式后台管理面板

    你想建立一个后台管理面板或者分析仪表板吗?不需从头开始,Keen IO Bootstrap 是一个响应式的仪表盘模板,可以帮助你在几分钟内呈现数据,让你可以创建一个有吸引力的,定制的分析仪表板,随时可 ...

  4. Vue Admin - 基于 Vue & Bulma 后台管理面板

    Vue Admin 是一个基于 Vue 2.0 & Bulma 0.3 的后台管理面板(管理系统),相当于是 Vue 版本的 Bootstrap 管理系统,提供了一组通用的后台界面 UI 和组 ...

  5. 基于iview的后台管理

    年前由于时间紧迫,原本使用iview技术开发后台管理系统的大神另有任务,我中途接手该项目,此前对于iview一无所知的我是一脸的懵逼,好在后台管理的整体框架大神已经搭建好了,而我之前对vue也有一定的 ...

  6. Python实例---基于页面的后台管理[简单版]

    后台管理菜单 + 母板[css/content/js] 向后台提交数据[2种]:       1.  模态对话框(数据少操作,且Js复杂):        form表单 :优点:简单,前端提交后后台处 ...

  7. 后台管理-基于 Bootstrap 开发的网站后台管理面板

    Bootstrap 开发框架真的很强大,今天推荐几个非常不错的基于 Bootstrap 开发的网站后台管理面板,全部都是响应式布局,细节做得都很不错.可以搜索keenthemes. Metronic ...

  8. 推荐几款基于Bootstrap的响应式后台管理模板

    1.Admin LTE 该模版开源免费. AdminLTE - 是一个完全响应式管理模板.基于Bootstrap3的框架.高度可定制的,易于使用.支持很多的屏幕分辨率适合从小型移动设备到大型台式机. ...

  9. 基于bootstrap的漂亮网站后台管理界面框架汇总

    基于bootstrap的漂亮网站后台管理界面框架汇总 10个最新的 Bootstrap 3 管理模板 这里分享的 10 个模板是从最新的 Bootstrap 3 管理模板集合中挑选出来的,可以帮助你用 ...

随机推荐

  1. 交换机VLAN的定义、意义以及划分方式

    什么是VLAN 虚拟网技术(VLAN,Virtual Local Area Network)的诞生主要源于广播.广播在网络中起着非常重要的作用,如发现新设备.调整网络路径.IP地址租赁等等,许多网络协 ...

  2. document文档碎片

    var arrText = ["1","2","3","4","5","6",& ...

  3. openscad 3Dmodels 笔记

    参考链接 官方文档 官方文档之--代码 如何快速上手 打开openSCAD后界面如下: 选择其中的examples,从basic看起.配合官方文档中的first step部分,和官方文档--代码写法即 ...

  4. 用ajax异步请求一个块

    使用用户控件,作为一个块,生成一段独立的html. 请求一个一般应用程序,在一般应用程序中加载读取用户控件,并给用户控件传值.     Page page = new Page();          ...

  5. 【Luogu】P1602Sramoc问题（堆）

    题目链接 很巧妙的想法.一开始将1~k-1加入堆中,然后每次从堆里取出一个最小的,判断是不是答案,如果不是,那么就枚举新数的末一位加上. 代码如下 #include<cstdio> #in ...

  6. Codeforces Round Rockethon 2015

    A. Game 题目大意:A有N1个球,B有N2个球,A每次可以扔1-K1个球,B每次可以扔1-K2个球,谁先不能操作谁熟 思路:．．．．．显然每次扔一个球最优．．．． #include<ios ...

  7. 观光公交(codevs 1139)

    题目描述 Description 风景迷人的小城 Y 市,拥有n 个美丽的景点.由于慕名而来的游客越来越多,Y 市特意安排了一辆观光公交车,为游客提供更便捷的交通服务.观光公交车在第0 分钟出现在1号 ...

  8. 2-sat问题，输出方案，几种方法（赵爽的论文染色解法+其完全改进版）浅析 / POJ3683

    本文原创于  2014-02-12 09:26. 今复习之用,有新体会,故重新编辑. 2014-02-12 09:26: 2-sat之第二斩!昨天看了半天论文(赵爽的和俉昱的),终于看明白了!好激动有 ...

  9. SGU103+POJ 1158 最短路/dp

    题意:一个无向图,求起点到终点最少时间,限制:每个路口有灯,要灯颜色一样才能过去,灯之有俩种颜色,周期 变化,给定每个灯初态,时间. 思路:开始就想到直接DP,方程dp[k]=dp[i]+distan ...

  10. python 获取时间 存入文件

    1读文件: file_path_name = '/home/robot/bzrobot_ws/src/bzrobot/bzrobot_comm/led_show_data/'+file_name+'. ...