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

 更新时间:2024年09月18日 17:19:01   作者:ymnets  
这篇文章主要为大家分享了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实战教程

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

相关文章

  • 浅谈JS中json数据的处理

    浅谈JS中json数据的处理

    下面小编就为大家带来一篇浅谈JS中json数据的处理。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-06-06
  • Bootstrap CSS布局之表单

    Bootstrap CSS布局之表单

    这篇文章主要介为大家详细绍了Bootstrap CSS布局之表单的相关资料,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-12-12
  • echarts图表设置宽度100%结果为100px的解决办法

    echarts图表设置宽度100%结果为100px的解决办法

    在开发一个前端项目时需要用到Element-ui的el-tabs组件和Echart开源库,当两者嵌套使用时,我给Echart中的图表宽度设置为了100%,但是实际的宽度却只有100px,这篇文章主要给大家介绍了关于echarts图表设置宽度100%结果为100px的解决办法,需要的朋友可以参考下
    2022-12-12
  • js 幻灯片的实现

    js 幻灯片的实现

    今天在群里看到有人要幻灯片的代码,于是我自己也想了想,做个总结。常见的幻灯片切换无非就是轮播和渐变,不管哪种都是用定时器来逐步改变图片或者图片组的某种属性来实现的
    2011-12-12
  • JavaScript中while循环的基础使用教程

    JavaScript中while循环的基础使用教程

    这篇文章主要给大家介绍了关于JavaScript中while循环的基础使用教程,文中通过示例代码介绍的非常详细,对大家学习或者使用JavaScript具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧
    2020-08-08
  • 两种JS实现屏蔽鼠标右键的方法

    两种JS实现屏蔽鼠标右键的方法

    这篇文章主要介绍了两种JS实现屏蔽鼠标右键的方法,浏览者在访问你网页的时候就不能点击右键,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2015-08-08
  • JavaScript二维数组实现的省市联动菜单

    JavaScript二维数组实现的省市联动菜单

    这篇文章主要介绍了使用二维数组实现的省市联动菜单,通过二维数组存储城市列表项,需要的朋友可以参考下
    2014-05-05
  • JavaScript计算正方形面积

    JavaScript计算正方形面积

    这篇文章主要为大家详细介绍了JavaScript计算正方形面积,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-11-11
  • 使用Axios函数库进行网络请求的操作指南

    使用Axios函数库进行网络请求的操作指南

    在现代的前端开发中,API调用是实现前后端数据交互的重要环节,而在众多的HTTP库中,Axios以其简洁的语法、丰富的功能和易于扩展的特性,成为了开发者的首选,本篇文章将深入介绍Axios的使用方法,
    2024-11-11
  • JavaScript创建对象的几种方式小结

    JavaScript创建对象的几种方式小结

    这篇文章主要介绍了 JavaScript 中创建对象的多种方式,包括字面量方式、构造函数方式、原型模式、() 方法、ES6 类,并分别说明了它们的特点和适用场景,强调在实际编程中要根据需求选择合适的方式以提高代码质量和性能,需要的朋友可以参考下
    2024-12-12

最新评论