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,我在这里记录下各种细节。


  1. js包的替换,url的替换


  2. button变化

        Metro 2.0:

新建

        Metro 3.0:

刷新

class中多了个button


3. Icon变化

        metro 2.0

        metro 3.0

 

2.0中有些图标3.0中不可用,具体哪些可用,参考源码示例中Metro-UI-CSS-master/docs/font.html


4. datatable

Metro 2.0: 

唤醒监控器名站点名字站点名机器名ip开启Action
 
                        唤醒
                        监控器名
                        站点名
                        字站点名
                        机器名
                        ip
                        开启
                        Action
                    
 
                        唤醒
                        监控器名
                        站点名
                        字站点名
                        机器名
                        ip
                        开启
                        Action
                    
                    ......
                     
                        唤醒
                        监控器名
                        站点名
                        字站点名
                        机器名
                        ip
                        开启
                        Action
                    

Metro 3.0   


                
                    
                        唤醒
                        监控器名
                        站点名
                        字站点名
                        机器名
                        ip
                        开启
                        Action
                                        
                
                
                    
                        唤醒
                        监控器名
                        站点名
                        字站点名
                        机器名
                        ip
                        开启
                        Action
                    
                
                
                    
                        唤醒
                        监控器名
                        站点名
                        字站点名
                        机器名
                        ip
                        开启
                        Action
                    
                    
                        唤醒
                        监控器名
                        站点名
                        字站点名
                        机器名
                        ip
                        开启
                        Action
                    
                    
                        唤醒
                        监控器名
                        站点名
                        字站点名
                        机器名
                        ip
                        开启
                        Action
                    
                    
                        唤醒
                        监控器名
                        站点名
                        字站点名
                        机器名
                        ip
                        开启
                        Action
                    
                
            


5. Select

Metro 2.0

 
                            
                                请选择环境
                                请选择环境
                                请选择环境
                            
                        


Metro 3.0


                            
                                
                                Alaska
                                Hawaii
                                California
                                Nevada
                                Oregon
                                Washington
                            


6. Input

metro 2.0