Metro UI CSS 是一套用来创建类似于Windows 8 Metro UI风格网站的样式
其官网地址：http://metroui.org.ua/
中文地址：http://www.bootcss.com/p/metro-ui-css/
源码地址： https://github.com/olton/Metro-UI-CSS
这种前端框架没有Bootstrap、YUI流行，网上资料也不多。现在项目中用的这框架要从2.0升级到3.0，我在这里记录下各种细节。
js包的替换，url的替换
button变化
Metro 2.0：
<button class="success">新建</button>
Metro 3.0:
<button class="button success">刷新</button>
class中多了个button
3. Icon变化
metro 2.0
<i class="icon plus on-left"></i>
metro 3.0
<span class="mif-plus"></span>
2.0中有些图标3.0中不可用，具体哪些可用，参考源码示例中Metro-UI-CSS-master/docs/font.html
4. datatable
Metro 2.0：
<table class="table bordered striped hovered dataTable" cellspacing="0" ><thead><tr><th><button class="invokeallbtn warning"><i class="icon-play on-left"></i>唤醒</button></th><th>监控器名</th><th>站点名</th><th>字站点名</th><th>机器名</th><th>ip</th><th>开启</th><th>Action</th></tr></thead><tbody> <tr> <td>唤醒</td> <td>监控器名</td> <td>站点名</td> <td>字站点名</td> <td>机器名</td> <td>ip</td> <td>开启</td> <td>Action</td> </tr> <tr> <td>唤醒</td> <td>监控器名</td> <td>站点名</td> <td>字站点名</td> <td>机器名</td> <td>ip</td> <td>开启</td> <td>Action</td> </tr> ...... <tr> <td>唤醒</td> <td>监控器名</td> <td>站点名</td> <td>字站点名</td> <td>机器名</td> <td>ip</td> <td>开启</td> <td>Action</td> </tr> </tbody></table>
Metro 3.0
<table id="runMonitorTable" class="dataTable striped border bordered hovered" data-role="datatable" data-searching="true"> <thead> <tr> <th><button class="invokeallbtn button small-button warning"><span class="mif-play"></span>唤醒</button></th> <th>监控器名</th> <th>站点名</th> <th>字站点名</th> <th>机器名</th> <th>ip</th> <th>开启</th> <th>Action</th> </tr> </thead> <tfoot> <tr> <th><button class="invokeallbtn button small-button warning"><span class="mif-play"></span>唤醒</button></th> <th>监控器名</th> <th>站点名</th> <th>字站点名</th> <th>机器名</th> <th>ip</th> <th>开启</th> <th>Action</th> </tr> </tfoot> <tbody> <tr> <td>唤醒</td> <td>监控器名</td> <td>站点名</td> <td>字站点名</td> <td>机器名</td> <td>ip</td> <td>开启</td> <td>Action</td> </tr> <tr> <td>唤醒</td> <td>监控器名</td> <td>站点名</td> <td>字站点名</td> <td>机器名</td> <td>ip</td> <td>开启</td> <td>Action</td> </tr> <tr> <td>唤醒</td> <td>监控器名</td> <td>站点名</td> <td>字站点名</td> <td>机器名</td> <td>ip</td> <td>开启</td> <td>Action</td> </tr> <tr> <td>唤醒</td> <td>监控器名</td> <td>站点名</td> <td>字站点名</td> <td>机器名</td> <td>ip</td> <td>开启</td> <td>Action</td> </tr> </tbody> </table>
5. Select
Metro 2.0
<div class="input-control select"> <select id="template"> <option select>请选择环境</option> <option select>请选择环境</option> <option select>请选择环境</option> </select> </div>
Metro 3.0
<div class="input-control full-size" data-role="select" data-placeholder="请选择环境" data-allow-clear="true"> <select class="full-size"> <option></option> <option value="AK">Alaska</option> <option value="HI">Hawaii</option> <option value="CA">California</option> <option value="NV">Nevada</option> <option value="OR">Oregon</option> <option value="WA">Washington</option> </select>
6. Input
metro 2.0
<div class="input-control text" data-role="input-control"> <input type="text" placeholder="0" id="monitorName"> </div>
Metro 3.0
<div class="input-control text" data-role="input"> <input type="text" id="monitorName"> <button class="button helper-button clear"><span class="mif-cross"></span></button> </div>
本文出自 “爱工作爱生活” 博客，请务必保留此出处http://4453154.blog.51cto.com/4443154/1702603
原文地址：http://4453154.blog.51cto.com/4443154/1702603
