<!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. tomcat 下catalina.out 日志乱码问题处理

    问题: 项目部署到Linux服务器之后,控制台 catalina.out 文件输出的中文为乱码: 解决办法: 方法一:修改tomcat下的模板编码 bin/catalina.sh 文件添加如下配置:J ...

  2. 图论trainning-part-2 B. Claw Decomposition

    B. Claw Decomposition Time Limit: 1000ms Memory Limit: 131072KB 64-bit integer IO format: %lld      ...

  3. acm之简单博弈 Nim Bash Wythoff

    前些日子我打算开了博弈基础,事后想进行总结下 一句话就是分析必胜或必败,异或为0. 以下内容来自转载: Nim游戏的概述: 还记得这个游戏吗?给出n列珍珠,两人轮流取珍珠,每次在某一列中取至少1颗珍珠 ...

  4. javascript前端下载

    <html> <head> <title>测试标题</title> </head> <body> <div> 测试页 ...

  5. 有关git的配置

    git版本控制器总结 关于部分内容请参考:https://www.cnblogs.com/smuxiaolei/p/7484678.htmlgit是一个版本控制器,分布式管理:可以记录每次文件的改动, ...

  6. Android从Fragment跳转到Activity

    代码改变世界 Android从Fragment跳转到Activity Intent intent = new Intent(getActivity(), LoginActivity.class); s ...

  7. jQuary的相关动画效果

    第一种:该方法隐藏所有 <p> 元素: <html> <head> <script type="text/javascript" src= ...

  8. bzoj2120 数颜色 莫队 带修改

    [bzoj2120]数颜色 Description 墨墨购买了一套N支彩色画笔(其中有些颜色可能相同),摆成一排,你需要回答墨墨的提问.墨墨会像你发布如下指令: 1. Q L R代表询问你从第L支画笔 ...

  9. redmine与SVN的Https方式整合问题

    尼玛啊!这个SVN的整合搞了一晚上,今天早上终于搞定了,FUCK!!! 进入话题: 可以先在bitnami redmine stack的命令行环境下手工运行svn,看是否能取到数据, svn list ...

  10. python虚拟环境使用

    Window 下创建python的虚拟环境 下载工具 pip install virtualenv 创建虚拟环境目录 # 注意此命令创建的虚拟环境目录是在当前目录下 virtualenv testen ...