(此文章同时发表在本人微信公众号“dotNET每日精华文章”,欢迎右边二维码来关注。)

题记:Bootstrap作为一款超级流行的前端框架,已经成为很多人的首选,不过有时未免有点审美疲劳。那么可以试试Metro UI CSS,一个Windows 8风格的前端框架,和Bootstrap类似,功能也更多。

Bootstrap虽然很流行,扩展也很多,但是如果你希望实现Windows 8的Metro风格的话,除了去寻找一个Bootstrap的主题外,还可以直接使用Metro UI CSS这套前端框架。

它具备通用的风格、网格布局系统、印刷排版、超过20个组件(相对于Bootstrap的同样组件功能更强大),超过300个内置图标。也有一些比较有特色的功能,比如内置Tile和Notify。还兼容AngularJS。

当然,虽说和Bootstrap类似,但还是有不兼容的地方,比如网格系统的class名称就有些不一致,使用“grid”而非“container”来作为容器,使用“cell”而非“col-*-*”来作为栅格。

它用LESS编写,同样是开源的,使用MIT许可协议,GitHub上的Fork数和Star数都不错(当然和Bootstrap是没法比,但是也不算少),更新频率还保持的很好。

安装也非常方便,可直接下载、可通过bower安装(VS 2015推荐这种方式)、可Nuget安装(VS 2013推荐这种方式)。

“阅读原文”可访问GitHub项目地址,其中可以找到演示和文档页面的地址。

原文地址:https://github.com/olton/Metro-UI-CSS

Bootstrap看厌了?试试Metro UI CSS吧的更多相关文章

  1. 【今日推荐】10大流行的 Metro UI 风格的 Bootstrap 主题和模板

    1. BootMetro 基于 Twitter Bootstrap 的简单灵活的 HTML.CSS 和 Javascript 框架,Win8 风格,大爱啊! 立即下载     效果演示 2. Boot ...

  2. 收集Windows 8 Metro UI 风格网站资源,觉得不错的顶啊!!

    这些资源包含:模板,框架,jQuery插件,图标集等.帮助你快速开发Windows 8 Metro UI风格的网站.本文转自虾米站长网 Frameworks & Templates For M ...

  3. 也来“玩”Metro UI之磁贴

    也来“玩”Metro UI之磁贴 Win8出来已有一段时间了,个人是比较喜欢Metro UI的.一直以来想用Metro UI来做个自己的博客,只是都没有空闲~~今天心血来潮,突然想自己弄一个磁贴玩玩, ...

  4. 也来“玩”Metro UI之磁贴(一)

    Win8出来已有一段时间了,个人是比较喜欢Metro UI的.一直以来想用Metro UI来做个自己的博客,只是都没有空闲~~今天心血来潮,突然想自己弄一个磁贴玩玩,动手……然后就有了本篇. Win8 ...

  5. 7 款免费的 Metro UI 模板

    #1 – Free Metro Ui Style template by Asif Aleem 很棒的蓝色调 Metro UI 管理模板 #2: Metro-Bootstrap by TalksLab ...

  6. 有了bootstrap,为什么还要做amaze ui

    1.Bootstrap介绍Bootstrap,来自 Twitter,是目前很受欢迎的前端框架.Bootstrap 是基于 HTML.CSS.JAVASCRIPT 的,它简洁灵活,使得 Web 开发更加 ...

  7. myeclipse egit 安装失败 org.eclipse.e4.ui.css.swt.theme 0.0.0

    [前言] 首先确保您可能会被安装在阅读本文之前,myeclipse egit, 见文章:http://blog.csdn.net/uikoo9/article/details/17247405 事实上 ...

  8. Metro UI 界面完全解析 (转载)

    Metro在微软的内部开发名称为“ typography-based design language”(基于排版的设计语言).它最早出现在微软电子百科全书95,此后微软又有许多知名产品使用了Metro ...

  9. ”Metro UI之磁贴(二)

    也来“玩”Metro UI之磁贴(二) 继昨天的“也来“玩”Metro UI之磁贴(一)”之后,还不过瘾,今天继续“玩”吧——今天把单选的功能加进来,还有磁贴的内容,还加了发光效果(CSS3,IE9+ ...

随机推荐

  1. do{...}while(0)的意义和用法

    linux内核和其他一些开源的代码中,经常会遇到这样的代码: do{ ... }) 这样的代码一看就不是一个循环,do..while表面上在这里一点意义都没有,那么为什么要这么用呢? 实际上,do{. ...

  2. js手机网页跳转

    在网页头部加入如下代码: <script type="text/javascript"> function browserRedirect() { var sUserA ...

  3. 【leetcode】Unique Binary Search Trees

    Unique Binary Search Trees Given n, how many structurally unique BST's (binary search trees) that st ...

  4. SAP 工厂日生产计划待排维护

    *&---------------------------------------------------------------------* *& Report  ZPPR0024 ...

  5. HDU 2602 Bone Collector WA谁来帮忙找找错

    Problem Description Many years ago , in Teddy’s hometown there was a man who was called “Bone Collec ...

  6. Greedy:Bound Found(POJ 2566)

       神奇密码 题目大意:就是给你一个数组,要你找出连续的数的绝对值的和最接近t的那一串,并且要找出数组的上界和下界的下标,并显示他们的和 因为这一题的数有正有负,所以必须要先把和求出来,然后排序,然 ...

  7. 6. ZigZag Conversion

    题目: The string "PAYPALISHIRING" is written in a zigzag pattern on a given number of rows l ...

  8. 解决Eclipse里的Maven工程pom.xml文件报:web.xml is missing and <failOnMissingWebXml> is set to true错误

    打开eclipse准备进行开发时,发现项目上有个红星号,查看错误后发现报了一个:"web.xml is missing and <failOnMissingWebXml> is ...

  9. [Android Pro] Android 6.0 Root

    reference : http://bbs.gfan.com/android-8001827-1-1.html 2. 刷机和刷入recovery 建议参考 置顶教程: [15年3月31日更新]Nex ...

  10. spring AOP 的几种实现方式(能测试)

    我们经常会用到的有如下几种 1.基于代理的AOP 2.纯简单Java对象切面 3.@Aspect注解形式的 4.注入形式的Aspcet切面 一.需要的java文件 public class ChenL ...