基于Bootstrap的后台管理面板 Bootstrap Metro Dashboard

这是一款基于Bootstrap的Metro风格的后台管理面板应用，Bootstrap Metro Dashboard的UI是基于Twitter Bootstrap样式的，同时使用了jQuery 1.9.1和jQuery UI组件，非常适合做网站的后台管理系统界面。

Bootstrap Metro Dashboard介绍 
Bootstrap Metro Dashboard使用了以下jQuery插件：
 fullcalendar.min.js
jquery.chosen.min.js
jquery.cleditor.min.js
jquery.cookie.js
jquery.dataTables.min.js
jquery.elfinder.min.js
jquery.flot.js
jquery.flot.pie.js
jquery.flot.resize.min.js
jquery.flot.stack.js
jquery.gritter.min.js
jquery.imagesloaded.js
jquery.iphone.toggle.js
jquery.knob.modified.js
jquery.masonry.min.js
jquery.noty.js
jquery.raty.min.js
jquery.sparkline.min.js
jquery.ui.touch-punch.js
jquery.uniform.min.js
jquery.uploadify-3.1.min.js
同时也应用了以下几个JavaScript脚本库：
 modernizr.js
Modernizr是一个开源的JS库，它使得那些基于访客浏览器的不同（指对新标准支持性的差异）而开发不同级别体验的设计师的工作变得更为简单。它使得设计师可以在支持HTML5和CSS3的浏览器中充分利用HTML5和CSS3的特性进行开发，同时又不会牺牲其他不支持这些新技术的浏览器的控制。
 官方网站：http://modernizr.com/
 retina.js
Retina.js 检查网页中的图片看是否存在高清的版本，如果有将会替换显示。
 官方网站：http://retinajs.com

 Bootstrap Metro Dashboard相关组件
 管理面板首页

工作流/时间轴

美化版滚动条

图表

另外还有很多漂亮的UI组件，Bootstrap Metro Dashboard功能非常强大，如果你需要一个自己的后台管理界面，那么Bootstrap Metro Dashboard是你很好的选择。

本文链接：http://www.codeceo.com/article/bootstrap-metro-dashboard.html
本文作者：码农网 – 小峰

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

如果大家还想深入学习，可以点击这里进行学习，再为大家附一个精彩的专题：Bootstrap学习教程

赞 (0)

相关推荐

  • Bootstrap源码解读媒体对象、列表组和面板（10）

    媒体对象 基础媒体对象 例如: <div class="media"> <a class="pull-left" href="#"> <img class="media-object" src="http://placehold.it/350x150" alt="..."> </a> <div class="media-bo

  • Bootstrap面板使用方法

    面板样式是在很多种情况下都可能会使用到的样式之一,例如博客的侧边栏.企业网站的公告栏.栏目列表等. 面板样式除了内容之外,还有一个面板头部可以添加标题,让我们通过这篇文章看看Bootstrap面板样式的使用方法. Bootstrap面板基本样式 直接调用面板样式也非常容易,只需要通过以下代码即可实现: <div class="panel panel-default"> <div class="panel-body"> Basic panel

  • Bootstrap每天必学之面板

    Bootstrap每天必学之面板

    1.面板 面板(Panels)是Bootstrap框架新增的一个组件,其主要作用就是用来处理一些其他组件无法完成的功能.同样在不同的版本中具有不同的源码: ☑ Less版本:对应的源码文件是 panels.less ☑ Sass版本:对应的源码文件是 _panels.scss ☑ 编译后的Bootstrap:对应bootstrap.css文件第4995行-第5302行 2.面板–基础面板 基础面板非常简单,就是一个div容器运用了"panel"样式,产生一个具有边框的文本显示块.由于&

  • Bootstrap面板学习使用

    Bootstrap面板学习使用

    本文实例为大家分享了Bootstrap面板的具体实现代码,供大家参考,具体内容如下 <!doctype html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content=&qu

  • Bootstrap面板（Panels）的简单实现代码

    Bootstrap面板（Panels）的简单实现代码

    本文实例为大家分享了Bootstrap面板展示的具体代码,供大家参考,具体内容如下 一.基本的面板 html代码 <!DOCTYPE html> <html> <head> <title>Bootstrap list-group</title> <meta charset="utf-8"> <link rel="stylesheet" href="css/bootstrap.mi

  • 浅析Bootstrap组件之面板组件

    浅析Bootstrap组件之面板组件

    Bootstrap,来自 Twitter,是目前最受欢迎的前端框架.Bootstrap 是基于 HTML.CSS.JAVASCRIPT 的,它简洁灵活,使得 Web 开发更加快捷. 面板组件主要作用是用来处理一些其他组件无法完成的功能,在不同的版本中具有不同的源码: LESS:panels.less SASS:_panels.scss 基础面板非常简单,就是一个div容器中运用了类.panel的样式,产生一个具有边框的文本显示块,由于panel不控制主题颜色,所以在.panel基础上增加一个控制

  • Bootstrap基本组件学习笔记之面板(14)

    Bootstrap基本组件学习笔记之面板(14)

    直接看Bootstrap面板例子: <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="../../css/bo

  • 基于Bootstrap的后台管理面板 Bootstrap Metro Dashboard

    基于Bootstrap的后台管理面板 Bootstrap Metro Dashboard

    这是一款基于Bootstrap的Metro风格的后台管理面板应用,Bootstrap Metro Dashboard的UI是基于Twitter Bootstrap样式的,同时使用了jQuery 1.9.1和jQuery UI组件,非常适合做网站的后台管理系统界面. Bootstrap Metro Dashboard介绍  Bootstrap Metro Dashboard使用了以下jQuery插件:  fullcalendar.min.js jquery.chosen.min.js jquery

  • Jquery与Bootstrap实现后台管理页面增删改查功能示例

    Jquery与Bootstrap实现后台管理页面增删改查功能示例

    使用jquery与bootstrap实现了一个比较简单但功能齐全的增删改查功能的后台管理页面,虽然只是一个CRUD页面,但麻雀虽小五脏俱全,JS常用的功能都用到了,本例用原生的jquery与bootstrap配合使用,不考虑JS的重构性及打包,该例子零耦合,开箱即用. 先看Demo: 一.用到的Jquery功能 1.获取/赋值input输入值 $("#my_id").val();// 获取 $("#my_id").val("user_id");/

  • BootStrap selectpicker后台动态绑定数据的方法

    本文为大家分享了BootStrap selectpicker后台动态绑定数据的方法,供大家参考,具体内容如下 html部分代码 <select class="selectpicker" multiple> </select> 这是一个下拉多选框,现在要动态往里添加下拉选项. js代码 <script type="text/javascript"> getOption(); function getOption(){ $.ajax(

  • BootStrap Table 后台数据绑定、特殊列处理、排序功能

    本节主要介绍Bootstrap的后台数据绑定.特殊列处理及列的排序功能 1.数据绑定 一般做程序设计,很少是使用json文件直接绑定数据.基本上我们都是使用编程语言进行数据获取,并做数据绑定. 放置一个Table控件 <table id="table" ></table> 调用javascript的代码 <script > $('#table').bootstrapTable({ url: 'tablejson.jsp', //数据绑定,后台的数据从

  • 一个基于flask的web应用诞生 bootstrap框架美化（3）

    一个基于flask的web应用诞生 bootstrap框架美化（3）

    经过上一章的内容,其实就页面层来说已结可以很轻松的实现功能了,但是很明显美观上还有很大的欠缺,现在有一些很好的前端css框架,如AmazeUI,腾讯的WeUI等等,这里推荐一个和flask集成很好的bootstrap框架 安装框架 在模板中直接引用bootstrap的CDN或者本地路径外,还可以直接应用flask的bootstrap集成包,首先需要对集成包进行安装: pip3.6 install flask-bootstrap 这是一个flask的扩展包,flask的所有扩展包默认默认的包名都为

  • bootstrap学习笔记之初识bootstrap

    bootstrap学习笔记之初识bootstrap

    Bootstrap是一款目前非常流行的前端框架,简单的说,就是html,css,javascript的工具集,我们可以用bootstrap搭建出简洁,清新的网站或软件界面,有了bootstrap这个利器后台开发人员再也不用发愁前台界面的搭建了. bootstrap是一Twitter推出的一个开源的用于前端开发的工具包,是一个CSS/HTML框架.bootstrap提供了优雅的html和css规范,它即是由动态css语言Less写成.是Github上的热门开源项目. 它基于jQuery框架开发,在

  • 免费常用Linux VPS管理面板/一键包介绍和安装方法

    我们选择VPS.服务器主机一般会用来搭建网站使用的,既然要搭建网站那肯定需要安装网站环境.这一点与我们常用的虚拟主机不同,虚拟主机一般商家都提供cPanel或者DA面板直接添加站点建站使用,而VPS则需要我们自己安装Linux VPS管理面板(Windows系统则安装对应的)或者采用一键包编译安装. 在这篇文章中,麦子是准备收集国内.国外VPS管理面板的,如果真要每个都收集至少可以找到几十个,但是我们常用的也就这么几个.对于我们用户而言,熟悉1-2个也足以,毕竟我们是要实现环境,并不是深入研究,

  • linux主机AMH管理面板安装教程及建站使用方法(图文)

    linux主机AMH管理面板安装教程及建站使用方法(图文)

    (AMH为独立的一套LNMP/Nginx虚拟主机面板,安装请使用纯净系统.不要安装其它的环境包.) (需要使用AMH,请先检查你的系统是否支持,AMH面板已支持Centos.Debian.Ubuntu所有的系统版本环境中安装.) 首先进行AMH管理面板的安装 第一步: 登陆你的linux服务器.登陆成功后可以看到如下界面. 第二步: 执行安装脚本,命令如下: wget http://amysql.com/file/AMH/4.2/amh.sh; chmod 775 amh.sh; ./amh.s

  • Ajenti开源免费的服务器管理面板和Ajenti V虚拟主机面板及安装与使用详细教程

    Ajenti开源免费的服务器管理面板和Ajenti V虚拟主机面板及安装与使用详细教程

    Ajenti是国外一个功能非常强大的轻型的Linux服务器管理面板,采用Python架构,修改扩展非常简单,包含了Apache.计划任务(Cron).文件系统.防火墙.MySQL.Nginx.Munin.Samba.FTP和Squid等多个实用插件,比较适合搭建小型的服务器管理环境. Ajenti V是Ajenti一个虚拟主机管理面板插件,有点类似于Webmin下的Virtualmin,Ajenti V可以用于创建和管理虚拟主机,方便建站,管理网站运维.Ajenti可以添加Widget,方便你快

  • 新版VPS主机管理面板WDCP安装及使用体验-国产简单易用型VPS面板

    新版VPS主机管理面板WDCP安装及使用体验-国产简单易用型VPS面板

    WDCP也算是国产中颇受大家欢迎的VPS主机面板了,提供了nginx.apache.mysql.php等Web建站环境一键搭建.印象中,国内VPS主机面板也就是WDCP还在坚持着,AMH已经走上了收费的道路(PS:免费版本长年不更新,各种问题和不兼容). 而WDCP实际上也有长达几年的时间没有更新了,mysql.php版本都停留好早以前的版本,新出来的一直都没有更新, 已经不能满足于现在的Wordpress建站需要了,这也是部落为什么要扔掉VPS面板!网站平滑迁移到LNMP或LAMP建站. 好在

随机推荐