Bootstrap Metronic完全响应式管理模板学习笔记

学习使用Bootstrap Metronic完全响应式管理模板，具体内容如下

1.简介

Bootstrap Metronic是一个基于Bootstrap 3.x的高级管理控制面板主题。Bootstrap Metronic - 是一个完全响应式管理模板。基于Bootstrap3框架。高度可定制的，易于使用。适合从小型移动设备到大型台式机很多的屏幕分辨率。包含7个主题，高达100个左右的实例页面，非常丰富页面展示效果，包括表单，表格，地图，日历…等等。

对比了其他Bootstrap定制的影响式模版，这个功能与插件比较丰富。感觉大同小异如（免费的-AdminLTE）

注：mvc4系列不会升级用metronic

软件准备：VS2013

2.资源

7个主题演示地址：http://www.keenthemes.com/preview/metronic/

3.用途和保障

主要用途：一体化的管理模版，构建管理系统后台，如CMS,HR,OA等管理系统必备。花俏的软件比界面死板的同等软件价格可卖出高达40%

能合并到所有语言前端，包括主流asp.net,JSP,PHP

（源源不断的Bootstrap 和Metronic作为更新技术支持，除非推兔团队解散）

4.目录

按目录名称可以看出包含了文档（documentation），资源（resources），开始(start)，主题(theme与theme_trl)，说明readme.txt

打开readme我们可以看到我们只需要用theme这个文件夹即可。theme_rtl支持RTL，RTL颠覆我的编程习惯。

可以依次运行theme-->templates-->adminX下的index效果。　

然并卵，发现每一个admin对应了admin_material_design，根据readme说明admin_material_design是对应AngularJS版本的，不知道说得对不。

不懂AngularJS所以我们只用到正常版本的adminX

以上是部分截图。右边的设置可以设置布局的方式

把浏览器缩小看看平板下的效果同样非常不错。

5.总结

我们只需用到theme下的templates为参照模版。

作者：YmNets
出处：http://ymnets.cnblogs.com/

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

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

赞 (0)

相关推荐

  • bootstrap学习笔记之初识bootstrap

    bootstrap学习笔记之初识bootstrap

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

  • Bootstrap学习笔记之css样式设计(1)

    Bootstrap学习笔记之css样式设计(1)

    由于项目需要,所以打算好好学习下bootstrap框架,之前了解一点,框架总体不难,但涉及到的东西还是很多,想要熟练掌握它,还是要多练练. 一.bootstrap是什么? bs是什么? 即前端页面搭建的标准化框架工具,已经写好了css.js样式,只需要拿来用即可. 怎么用bs呢?主要是通过使用不同的类增加效果,每一种类,对应的功能不同. bs好处:增加了开发效率,页面设计更加美观,支持响应式开发.下载地址:https://github.com/foreverjiangting/bootstrap

  • Bootstrap学习笔记之js组件（4）

    Bootstrap学习笔记之js组件（4）

    这次我们来看下js组件的使用,本篇文章会有点长,希望大家可以耐心看,相信收获会有不少.不少园友加我好友,表示喜欢我写文字的风格,简单明了,这里,再次谢谢你们的支持.一方面,自身技术有限,写的东西都比较基础,另一方面,写的东西,都是根据自己的理解,把复杂的东西用最简单的语言表达出来.所以,写的有不对的地方,麻烦各位给予指正哈.  一.js文件引用 注意点:jquery必须在在其它js文件之前引入,因为其它插件都是依赖于jquery. <!--<script src="js/jquery

  • Bootstrap3学习笔记(三)之表格

    Bootstrap3学习笔记(三)之表格

    在上篇文章给大家介绍了 BootStrap3学习笔记(一)之网格系统      Bootstrap3学习笔记(二)之排版 只需要在table标签上使用.table类,就可以使用bootstrap默认的表格样式 如果需要行背景有交替变化,可以这样设定: 复制代码 代码如下: <table class="table table-striped"> 如果需要边框,可以这样设定: 复制代码 代码如下: <table class="table table-border

  • Bootstrap教程JS插件弹出框学习笔记分享

    Bootstrap教程JS插件弹出框学习笔记分享

    本文主要来学习一下JavaScript插件--弹出框. 案例 为页面内容添加一个小的覆盖层,就像iPad上的效果一样,为页面元素增加额外的信息. 先来看几个简单的静态案例效果图 效果比较简单主要就是静态的弹出的小窗体,分为窗体标题和窗体内容. <div class="bs-example bs-example-popover"> <div class="popover top"> <div class="arrow"

  • Bootstrap教程JS插件滚动监听学习笔记分享

    Bootstrap教程JS插件滚动监听学习笔记分享

    本文主要来学习一下JavaScript插件--滚动监听. 1.案例 滚动监听插件可以根据滚动条的位置自动更新所对应的导航标记.你可以试试滚动这个页面,看看左侧导航的变化. 先把实现的代码上了,你可以通过测试代码先来看看效果. <!DOCTYPE html> <html> <head> <title>Bootstrap</title> <meta name="viewport" content="width=de

  • Bootstrap Metronic完全响应式管理模板之菜单栏学习笔记

    Bootstrap Metronic完全响应式管理模板之菜单栏学习笔记

    继续上一篇,针对Bootstrap Metronic菜单栏整理的笔记分享给大家,供大家参考,具体内容如下 1.简介 1)  .环境配置 2)  .提取页面 3).动态生成菜单(无限级别树) 2.系统环境配置  项目需要程序数据支撑,这里选择MVC5.0+EF6.0[SQLSERVER](不对MVC架构和SQLServer做出解读)  运行环境:VS2013+MVC5.0+EF6.1+SQLServer2012  解决方案名称:AppSolution 项目名称:App.Web(UI层)与App.M

  • bootstrap基础知识学习笔记

    bootstrap基础知识学习笔记

    在此就不做 bootstrap 的介绍了,近几年 bootstrap 越来越流行,一点不亚于 js 中的 jquery. 以下为 bootstrap 3.3.5 学习中记录的东西,方便查阅,作者使用的是 jsp ,跟 html 可能有稍许不同,请自行参考修改 [引用文件] [页面引用] 路径请自行规划 <script type="text/javascript" src="<%=path%>/js-lib/jquery/jquery-1.11.2.min.j

  • BootStrap3学习笔记(一)之网格系统

    BootStrap3学习笔记(一)之网格系统

    如果显示网格,代码应类似这样: <div class="container"> <div class="row"> <div class="col-md-4"><p>Box 1</p></div> <div class="col-md-4"><p>Box 2</p></div> <div class=&

  • Bootstrap开关(switch)控件学习笔记分享

    Bootstrap开关(switch)控件学习笔记分享

    bootstrap-switch插件是一个针对Bootstrap实现的开关(switch)按钮控件,可以支持尺寸.颜色等属性的自定义.开关式按钮在国内网站上使用的并不是很多,Bootstrap 的应用在国外非常流行,不知道是我们不喜欢还是使用它很麻烦很难适合网站来使用.但这种开头式按钮在手机等移动设备上的应用是最广泛的,屏幕的特性促使它更好的发展. 功能说明: 介绍chekbox与radio的两个表单的简单使用,其他更多的效果与功能可以浏览demo,点击按钮以滑动的方式进行on/off切换. 使

随机推荐