<!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查找和替换命令

    http://blog.csdn.net/imyang2007/article/details/8105499 命令的东西应该多练,熟能生巧.

  2. 对 Servlet 的改进

    通过上一篇博客:Servlet 的详解 http://www.cnblogs.com/ysocean/p/6912191.html,我们大致知道了 Servlet 的基本用法.但是稍微分析一下 Ser ...

  3. MYSQL 权限设置查询

    mysql> GRANT RELOAD, SUPER, REPLICATION SLAVE ON *.* TO 'repl'@'192.168.3.%' IDENTIFIED BY PASSWO ...

  4. 【LeetCode】Valid Parentheses(有效的括号)

    这道题是LeetCode里的第20道题. 题目要求: 给定一个只包括 '(',')','{','}','[',']' 的字符串,判断字符串是否有效. 有效字符串需满足: 左括号必须用相同类型的右括号闭 ...

  5. hdu 1527 威佐夫博弈

    取石子游戏 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Total Submi ...

  6. POJ-1200 Crazy Search,人生第一道hash题！

                                                        Crazy Search 真是不容易啊,人生第一道hash题竟然是搜博客看题解来的. 题意:给你 ...

  7. 【Luogu】P1586四方定理（DP）

    题目链接 此题使用DP.设f[i][j]表示数i用j个数表示,则对于所有的k<=sqrt(i),有 f[i][j]=∑f[i-k*k][j-1] 但是这样会有重复情况.所以先枚举k,再枚举i和j ...

  8. 暑假训练Round1——G: Hkhv的水题之二（字符串的最小表示）

    Problem 1057: Hkhv的水题之二 Time Limits:  1000 MS   Memory Limits:  65536 KB 64-bit interger IO format: ...

  9. BZOJ 3850: ZCC Loves Codefires【贪心】

    Though ZCC has many Fans, ZCC himself is a crazy Fan of a coder, called "Memset137". It wa ...

  10. Java中NIO、BIO、AIO相关概念及应用场景

    1.同步阻塞IO(JAVA BIO):同步并阻塞,服务器实现模式为一个连接一个线程,即客户端有连接请求时,服务器端就需要启动一个线程进行处理,如果这个连接不做任何事情会造成不必要的线程开销,当然可以通 ...