使用BootStrap和Metroui设计的metro风格微网站或手机app界面

摘要：今天使用bootstrap和metroui设计了一个metro风格的移动app或者微信微网站的界面程序的源代码可以从此处获得：https:/...

今天使用bootstrap和metroui设计了一个metro风格的移动app或者微信微网站的界面

程序的源代码可以从此处获得：https://github.com/mz121star/weixin-metro

有喜欢的朋友可以拿去修改一下。

<!DOCTYPE html>    <> <html> <> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title></title> <meta name="description" content=""> <meta name="viewport" content="width=device-width, initial-scale=1"> <> <link rel="stylesheet" href="css/normalize.css"> <link rel="stylesheet" href="css/bootstrap.min.css"> <link rel="stylesheet" href="css/metro-bootstrap.css"> <link rel="stylesheet" href="css/iconFont.css"> <> <link rel="stylesheet" href="css/bootstrap-theme.min.css"> <link rel="stylesheet" href="css/main.css"> <script src="js/vendor/modernizr-2.6.2.min.js"></script> </head> <body> <div> <div> <div> <div id="carousel1"> <div> <img src="images/1.jpg" /> </div> <div> <img src="images/2.jpg" /> </div> <div> <img src="images/3.jpg"/> </div> <a><i></i></a> <a><i></i></a> <div> <ul> <li><a href="javascript:void(0)" data-num="0"></a></li> <li><a href="javascript:void(0)" data-num="1"></a></li> <li><a href="javascript:void(0)" data-num="2"></a></li> </ul> </div> </div> </div> </div> <div> <div> <div> <div> <i></i> </div> <div> <span>已购买宠物</span> </div> </div> </div> <div> <div> <div> <img src="images/spface.jpg"> </div> <div> <span>宠物视频</span> <div></div> </div> </div> </div> <div> <div> <div> <img src="images/1.jpg"> </div> <div> <span>宠物监控</span> <div></div> </div> </div> </div> </div> <div> <div> <div> <div> <i></i> </div> <div> <span>宠物领养</span> </div> </div> </div> <div> <div> <div> <img src="images/1.jpg"> <img src="images/2.jpg"> <img src="images/3.jpg"> <img src="images/4.jpg"> <img src="images/5.jpg"> </div> </div> </div>  </div> <div> <div> <div> <div> <i></i> </div> <div> <span>宠物百科</span> </div> </div> </div> <div> <div> <div> <i></i> </div> <div> <span>常见问题</span> </div> </div> </div> <div> <div> <div> <i></i> </div> <div> <span>联系我们</span> </div> </div> </div> </div> </div> <div></div> <nav> <nav> <item > <a href="tel:13840816169"><i> </i> </a> </item> <item> <a href="sms:13840816169"><i> </i></a></item> <item> <i> </i></item> </nav> </nav> <> <script src="js/vendor/jquery-1.10.2.min.js"></script> <script src="http://www.jb51.netjs/bootstrap.min.js"></script> <script src="js/jquery/jquery.widget.min.js"></script> <script src="js/metro/metro.min.js"></script>  <script> $(function(){ $("#carousel1").carousel({ height: 200 }); }) </script> <> <script> </script> </body> </html>

这里主要使用了bootstrap的响应式设计和metroui的win8 metro风格！网站适配各种大小的屏幕。当然，还是在手机上看会更漂亮一些！

使用BootStrap和Metroui设计的metro风格微网站或手机app界面1

使用BootStrap和Metroui设计的metro风格微网站或手机app界面2

以上所述是小编给大家介绍的使用BootStrap和Metroui设计的metro风格微网站或手机app界面，希望对大家有所帮助，如果大家有任何疑问请给我们留言，小编会及时回复大家的。在此也非常感谢大家对查字典教程网的支持！