<!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. Linux下安装MySQLdb模块（Python）

    一.MySQLdb-python模块 https://pypi.python.org/pypi/MySQL-python ` 二.安装依赖包 yum -y install python-devel m ...

  2. 电子邮件中的to、cc、bcc

    电子邮件中的to.cc(carbon copy)和bcc(blind carbon copy),分别是收件人.抄送.密送 to 收件人 你想要给其发邮件的人 cc 抄送人 cc和to是一样的,但是cc ...

  3. 【20】display,float,position的关系

    [20]display,float,position的关系 如果display为none,元素不显示. 否则,如果position值为absolute或者fixed,元素绝对定位,float的计算值为 ...

  4. i++和++i的区别，及其线程安全问题

    i++和++i都是i=i+1的意思,但是过程有些许区别: i++:先赋值再自加.(例如:i=1:a=1+i++:结果为a=1+1=2,语句执行完后i再进行自加为2) ++i:先自加再赋值.(例如:i= ...

  5. Python内置函数7

    Python内置函数7 1.propertypython内置的一个装饰器可参考https://blog.csdn.net/u013205877/article/details/77804137 2.q ...

  6. [android开发篇]activity组件篇

    https://developer.android.com/guide/components/activities.html Activity 是一个应用组件,用户可与其提供的屏幕进行交互,以执行拨打 ...

  7. 九度oj 题目1102：最小面积子矩阵

    题目描述: 一个N*M的矩阵,找出这个矩阵中所有元素的和不小于K的面积最小的子矩阵(矩阵中元素个数为矩阵面积) 输入: 每个案例第一行三个正整数N,M<=100,表示矩阵大小,和一个整数K接下来 ...

  8. spring,mybatis事务管理配置与@Transactional注解使用

    spring,mybatis事务管理配置与@Transactional注解使用[转]   spring,mybatis事务管理配置与@Transactional注解使用 概述事务管理对于企业应用来说是 ...

  9. 【bzoj4240】有趣的家庭菜园 贪心+树状数组

    题目描述 对家庭菜园有兴趣的JOI君每年在自家的田地中种植一种叫做IOI草的植物.JOI君的田地沿东西方向被划分为N个区域,由西到东标号为1~N.IOI草一共有N株,每个区域种植着一株.在第i个区域种 ...

  10. 深入了解类加载过程及Java程序执行顺序

    前言 在Java中,静态 Static关键字使用十分常见 本文全面 & 详细解析静态 Static关键字,希望你们会喜欢 目录 1. 定义 一种 表示静态属性的 关键字 / 修饰符 2. 作用 ...