今天使用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. 【Mysql】权限管理

    mysql权限介绍 mysql中存在4个控制权限的表,分别为user表,db表,tables_priv表,columns_priv表. mysql权限表的验证过程为: 1.先从user表中的Host, ...

  2. css3之转换

    1.2D转换 2.3D转换 transform-style属性(设置三维/二维效果) 值: flat表示子元素不保留3D设置(默认) preserve-3d表示子元素保留3D设置 transform属 ...

  3. Frament 方法

    public final boolean isAdded() 如果该Fragment对象被添加到了它的Activity中,那么它返回true,否则返回false. public final boole ...

  4. 20151009 C# 第一篇 基础知识

    20151009 C#:优点: 1. 语法简洁:不直接操作内存,去掉了指针操作 2. 面向对象:具有封装.继承.多态特性 3. 支持Web标准:支持HTML.XML.SOAP 4. 兼容性:遵循.Ne ...

  5. XproerIM产品使用手册

      1.  产品介绍 版权所有:(c)2009-2016 荆门泽优软件有限公司 保留所有权利. 产品官网:http://www.ncmem.com/apps/xproerim/index.asp 安装 ...

  6. PCB检查事项，生成钻孔表

    PCB检查事项 检查器件是否都放完, 检查连接线是否全部布完, 检查Dangling Line,Via, 查看铜皮是否孤立和无网络铜皮, 检查DRC, 1.选择菜单Display-Status,查看标 ...

  7. don't forget the bigger picture

    Imagine a circle that contains all of human knowledge: By the time you finish elementary school, you ...

  8. [ASE][Daily Scrum]11.19

    Sprint2已经开始了~今天晚上有课所以今天的plan比较少~ View Shilin Liu 能够看见其他玩家发射出来的子弹 能够看见其他玩家的子弹消失         Client Jiafan ...

  9. Magicodes.WeiChat——使用AntiXssAttribute阻止XSS（跨站脚本攻击）攻击

    跨站脚本攻击(Cross Site Scripting),为不和层叠样式表(Cascading Style Sheets, CSS)的缩写混淆,故将跨站脚本攻击缩写为XSS.恶意攻击者往Web页面里插 ...

  10. ServiceStack.Redis之IRedisClient<第三篇>

    事实上,IRedisClient里面的很多方法,其实就是Redis的命令名.只要对Redis的命令熟悉一点就能够非常快速地理解和掌握这些方法,趁着现在对Redis不是特别了解,我也对着命令来了解一下这 ...