今天使用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. StringGrid 实例2：1、获取 StringGrid 的行数、列数; 2、给单元赋值.

    实例2: 本例功能: 1.获取 StringGrid 的行数.列数; 2.给单元赋值. 运行效果图:

  2. Ubuntu上部署一个简单的Java项目

    一.安装tomcat7,mysql,Java JDK,直接apt安装 $ sudo aptitude install tomcat7 $ -jdk openjdk--jre $ sudo aptitu ...

  3. 如何获取eID——公安部发行的网络实名认证方式

    var appInsights=window.appInsights||function(config){ function r(config){t[config]=function(){var i= ...

  4. 【Visual Lisp】表处理专题

    表处理大全;;★★★01.创建表★★★(setq lst '());;创建一个空表(list 1 2 3 4) '(1 2 3 4) ;;构造表的两种形式(vl-list* 1 "TT&qu ...

  5. C++内存分配方式详解——堆、栈、自由存储区、全局/静态存储区和常量存储区

    栈,就是那些由编译器在需要的时候分配,在不需要的时候自动清除的变量的存储区.里面的变量通常是局部变量.函数参数等.在一个进程中,位于用户虚拟地址空间顶部的是用户栈,编译器用它来实现函数的调用.和堆一样 ...

  6. Magicodes.WeiChat——后台JS框架封装

    Magicodes.WeiChat同时也致力于提高后台开发效率,因此对在后台前端这块也做了一定的封装.我们先来说说主要的框架JS——mwc.js和mwc_elements.js.这两个JS文件位于Sc ...

  7. C#函数式编程之部分应用

    何谓函数式编程 相信大家在实际的开发中,很多情况下完成一个功能都需要借助多个类,那么我们这里的基本单元就是类.而函数式编程则更加细化,致使我们解决一个功能的基本单元是函数,而不是类,每个功能都是由多个 ...

  8. 用c#开发微信 (8) 微渠道 - 推广渠道管理系统 3 UI设计及后台处理

    我们可以使用微信的“生成带参数二维码接口”和 “用户管理接口”,来实现生成能标识不同推广渠道的二维码,记录分配给不同推广渠道二维码被扫描的信息.这样就可以统计和分析不同推广渠道的推广效果. 前面二篇& ...

  9. NABC模型进行需求分析

    N(需求): 图书租售管理系统.图书租售管理系统必须包含有完善的图书出租功能.还租.预订(租).会员管理.积分管理.简单的财务系统.详细分类统计.各数据排行榜.详细权限管理. A(做法): 因为有一些 ...

  10. 配置Linux自动挂载

    使用mount命令来挂载硬件,在Linux重启后这些挂载信息会丢失,因此对应磁盘这类硬件,需要配置自动挂载来保证系统重启时进行自动挂载. 自动挂载信息保存在文件/etc/fstab文件中 查看该文件的 ...