使用BootStrap和Metroui设计的metro风格微网站或手机app界面
今天使用bootstrap和metroui设计了一个metro风格的移动app或者微信微网站的界面
程序的源代码可以从此处获得:https://github.com/mz121star/weixin-metro
有喜欢的朋友可以拿去修改一下。
<!DOCTYPE html> <!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]--> <!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]--> <!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]--> <!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]--> <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"> <!-- Place favicon.ico and apple-touch-icon.png in the root directory --> <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"> <!-- 可选的Bootstrap主题文件(一般不用引入) --> <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 class="metro"> <div class="container"> <div class="row"> <div class="col-sm-12 col-xs-12"> <div class="carousel" id="carousel1"> <div class="slide"> <img src="images/1.jpg" class="cover1" /> </div> <div class="slide"> <img src="images/2.jpg" class="cover1" /> </div> <div class="slide"> <img src="images/3.jpg" class="cover1"/> </div> <a class="controls left"><i class="icon-arrow-left-3"></i></a> <a class="controls right"><i class="icon-arrow-right-3"></i></a> <div class="markers default"> <ul> <li class="active"><a href="javascript:void(0)" data-num="0"></a></li> <li class=""><a href="javascript:void(0)" data-num="1"></a></li> <li class=""><a href="javascript:void(0)" data-num="2"></a></li> </ul> </div> </div> </div> </div> <div class="row"> <div class="col-sm-4 col-xs-4"> <div class="tile bg-darkPink"> <div class="tile-content icon"> <i class="icon-cart-2"></i> </div> <div class="tile-status"> <span class="name">已购买宠物</span> </div> </div> </div> <div class="col-sm-4 col-xs-4"> <div class="tile bg-amber"> <div class="tile-content image"> <img src="images/spface.jpg"> </div> <div class="brand bg-black"> <span class="label fg-white">宠物视频</span> <div class="badge bg-darkRed paused"></div> </div> </div> </div> <div class="col-sm-4 col-xs-4"> <div class="tile bg-amber"> <div class="tile-content image"> <img src="images/1.jpg"> </div> <div class="brand bg-black"> <span class="label fg-white">宠物监控</span> <div class="badge bg-darkRed icon-eye"></div> </div> </div> </div> </div> <div class="row"> <div class="col-sm-4 col-xs-4"> <div class="tile bg-amber"> <div class="tile-content icon"> <i class="icon-home"></i> </div> <div class="tile-status"> <span class="label fg-white">宠物领养</span> </div> </div> </div> <div class="col-sm-8 col-xs-8"> <div class="tile double"> <div class="tile-content image-set"> <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 class="col-sm-4 col-xs-4"> <div class="tile bg-lightOlive"> <div class="brand"> <div class="badge bg-red"><i class="icon-broadcast"></i></div> </div> </div> </div>--> </div> <div class="row"> <div class="col-sm-4 col-xs-4"> <div class="tile bg-cyan"> <div class="tile-content icon"> <i class=" icon-feed"></i> </div> <div class="tile-status"> <span class="label fg-white">宠物百科</span> </div> </div> </div> <div class="col-sm-4 col-xs-4"> <div class="tile bg-red"> <div class="tile-content icon"> <i class="icon-help"></i> </div> <div class="tile-status"> <span class="label fg-white">常见问题</span> </div> </div> </div> <div class="col-sm-4 col-xs-4"> <div class="tile bg-amber"> <div class="tile-content icon"> <i class="icon-user"></i> </div> <div class="tile-status"> <span class="label fg-white">联系我们</span> </div> </div> </div> </div> </div> <div class="row"></div> <nav class="navigation-bar fixed-bottom bg-darkCyan"> <nav class="navigation-bar-content"> <item class="element col-sm-4 col-xs-4 text-center" > <a class="fg-white" href="tel:13840816169"><i class="icon-phone"> </i> </a> </item> <item class="element col-sm-4 col-xs-4 text-center"> <a class="fg-white" href="sms:13840816169"><i class="icon-mail"> </i></a></item> <item class="element col-sm-4 col-xs-4 text-center"> <i class="icon-location"> </i></item> </nav> </nav> <!-- <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>--> <script src="js/vendor/jquery-1.10.2.min.js"></script> <script src="/js/bootstrap.min.js"></script> <script src="js/jquery/jquery.widget.min.js"></script> <script src="js/metro/metro.min.js"></script> <!--<script src="js/plugins.js"></script> <script src="js/main.js"></script>--> <script> $(function(){ $("#carousel1").carousel({ height: 200 }); }) </script> <!-- Google Analytics: change UA-XXXXX-X to be your site's ID. --> <script> </script> </body> </html>
这里主要使用了bootstrap的响应式设计和metroui的win8 metro风格!网站适配各种大小的屏幕。当然,还是在手机上看会更漂亮一些!
以上所述是小编给大家介绍的使用BootStrap和Metroui设计的metro风格微网站或手机app界面,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对我们网站的支持!
赞 (0)