今天使用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

使用bootstrap和metroui设计的微网站或手机app界面的更多相关文章

  1. Bootstrap 响应式设计

    本教程讲解如何在网页布局中应用响应式设计.在课程中,您将学到响应式 Web 设计.随着移动设备的普及,如何让用户通过移动设备浏览您的网站获得良好的视觉效果,已经是一个不可避免的问题了.响应式 Web ...

  2. 循序渐进BootstrapVue，开发公司门户网站（1）---基于Bootstrap网站模板构建组件界面

    在前面随笔<使用BootstrapVue相关组件,构建Vue项目界面>概括性的介绍了BootstrapVue的使用过程,其实选用这个主要就是希望能够用来构建一些公司门户网站的内容,毕竟基于 ...

  3. Httpster –世界各地最潮的网页设计案例聚合网站

    Httpster 这个网站聚合了世界各地最新最潮的网页设计案例,展示了创意的设计,精心的策划,优秀的排版.这些作品都按月份和类别进行了很好划分,你可以方便的找到自己感兴趣的网站案例. 立即去看看 您可 ...

  4. 小猪cms之怎样查询绑定的微网站模板

    微网站内容页面url g=Wap&m=Index&a=content (g=Wap)模块路径对应路径:\PigCms\Lib\Action\Wap (m=Index)控制文件对应文件: ...

  5. 介绍一款非常适合做微网站并且免费的CMS系统

    在微网站火热的今天,寻找一款具备 web app功能的CMS系统能够大大提高我们的工作效率,eBSite升级到3.0后,开始支持web app 皮肤,也就是创建一个站点,会同时绑定一个PC版皮肤与一个 ...

  6. 关于手机微网站ICP备案

    今天终于拨通了陕西省通信管理局的电话,并告诉对方我们做的是一个化妆品的微网站,会涉及到使用使用支付宝支付. 询问"xxx微网站"网站经营类型,对方告知虽然使用支付宝,但是是微网站, ...

  7. 【微网站开发】之微信内置浏览器API使用

    最近在写微网站,发现了微信内置浏览器的很多不称心的地方: 1.安卓版的微信内浏览器底部总是出现一个刷新.前进.后退的底部栏,宽度很大,导致屏幕显示尺寸被压缩 2.分享当前网站至朋友圈时,分享的图片一般 ...

  8. HTML & CSS设计与构建网站 ([美]达科特) PDF原版​

    HTML & CSS 设计与构建网站采用有别于许多传统编程书籍的新颖编排方式,将使您收到事半功倍的学习效果.每一页都在短小精悍的示例代码的引导下,简明直观.直截了当地阐述一个新主题. < ...

  9. ui设计的好网站（转载）

    设计师网址导航  http://hao.uisdc.com/ 站酷 国外: Dribbble - Show and tell for designers.Behance 这两个网站就够了啊 ————— ...

随机推荐

  1. JS-for中的i

    var aBtn = document.getElementsByTagName('input');        for( var i=0; i<aBtn.length; i++ ){     ...

  2. sql like 查询

    查询 ids 含有 4  的  精确到4  54 不查询 select * from t_g_sku where ','||ids||',' like '%,4,%'; 序号 id mid quant ...

  3. iOS 汉字转拼音

    - (NSString *)getFirstString:(ICCustom *)custom {     NSMutableString *source = [custom.merchantAbbr ...

  4. 用scala实现一个sql执行引擎-(上)

    前言 在实时计算中,通常是从队列中收集原始数据,这种原始数据在内存中通常是一个java bean,把数据收集过来以后,通常会把数据落地到数据库,供后面的ETL使用.举个一个简单的例子,对一个游戏来说, ...

  5. iOS Swipe Tableviewcell(左右滑动出现按钮)

    1.背景 看到QQ的左右滑动Tableviewcell时可以出现多个菜单,觉得很高大上,因为没这种需求, 也只是需要一个删除按钮,这个系统已经帮我们实现了,只需要实现几个代理就可以,做出左划 出现删除 ...

  6. .android:allowTaskReparenting 等Activity 的task属性

    转自http://blog.csdn.net/javayinjaibo/article/details/8855678 1.android:allowTaskReparenting 这个属性用来标记一 ...

  7. ORGANIZATION

    Leader:  Ming Xiang Ph.D students:  Bo Yang Yupei Zhang M.Eng. students: Cheng Feng Jinquan Du Youli ...

  8. 使用NHibernate(10) -- 补充（inverse && cascade）

    1,inverse属性的作用: 只有集合标记(set/map/list/array/bag)才有invers属性: 以set为例,set的inverse属性决定是否把对set的改动反应到数据库中去,i ...

  9. c# 高效读写文件

    一.同步读写文件(在并发情况下不会发生文件被占用异常) static void Main(string[] args) { Parallel.For(0, 10000, e => { strin ...

  10. C#像运行一个exe 程序一样运行一个dll文件

    [DllImport("kernel32.dll")] public static extern int WinExec(string exeName, int operType) ...