<!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. Html 前端jinjia2 & ajax

    本章内容: jinja2 Ajax中的if语句 参考文档 html可以参照学习:w3school bootstrap学习:bootstrap 综合类学习网站:runoob jinja2学习网站:jin ...

  2. Windows Server AppFabric

    文章:Windows Server AppFabric简介 介绍了AppFabric强大的功能.

  3. PTA 09-排序1 排序 (25分)

    题目地址 https://pta.patest.cn/pta/test/15/exam/4/question/720 5-12 排序   (25分) 给定NN个(长整型范围内的)整数,要求输出从小到大 ...

  4. eclipse逆向生成实体类

    (转自:http://blog.csdn.net/wangpeng047/article/details/6877720) 做项目必然要先进行数据库表设计,然后根据数据库设计建立实体类(VO),这是理 ...

  5. 【THUSC2016】成绩单（bzoj4897）

    $f(i,j,x,y)$ 表示区间 $[i,j]$中,第 $j$ 个数在最后一次操作中才消去,最后一次操作的最大值为 $x$,最小值为 $y$ 时的最小代价: $g(i,j)$ 表示区间 $[i,j] ...

  6. Count on a tree（bzoj 2588）

    Description 给定一棵N个节点的树,每个点有一个权值,对于M个询问(u,v,k),你需要回答u xor lastans和v这两个节点间第K小的点权.其中lastans是上一个询问的答案,初始 ...

  7. 巧克力王国 BZOJ 2850

    巧克力王国 [问题描述] 巧克力王国里的巧克力都是由牛奶和可可做成的.但是并不是每一块巧克力都受王国人民的欢迎,因为大家都不喜欢过于甜的巧克力.对于每一块巧克力,我们设x和y为其牛奶和可可的含量.由于 ...

  8. 无记录时显示gridview表头，并增加一行显示“没有记录”【绑定SqlDataSource控件时】

    原文发布时间为:2008-08-04 -- 来源于本人的百度文章 [由搬家工具导入] using System;using System.Data;using System.Configuration ...

  9. 使用 ftrace 调试 Linux 内核，第 3 部分

    内核头文件 include/linux/kernel.h 中描述了 ftrace 提供的工具函数的原型,这些函数包括 trace_printk.tracing_on/tracing_off 等.本文通 ...

  10. linux的内存性能评估

    linux的内存性能评估 参考自:自学it网,http://www.zixue.it/. (1)使用free指令监控内存,参数-m以M为单位显示,-h人性化显示单位. [test@localhost ...