使用bootstrap和metroui设计的微网站或手机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="data:images/1.jpg" class="cover1" />
                 </div>

                 <div class="slide">
                     <img src="data:images/2.jpg" class="cover1" />
                 </div>

                 <div class="slide">
                     <img src="data: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="data: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="data: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="data:images/1.jpg">
                     <img src="data:images/2.jpg">
                     <img src="data:images/3.jpg">
                     <img src="data:images/4.jpg">
                     <img src="data: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="//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风格！网站适配各种大小的屏幕。当然，还是在手机上看会更漂亮一些！

更多web设计内容可参考：http://www.dlwebs.com