今天使用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. 转-C#让枚举返回字符串

    下面的手段是使用给枚举项打标签的方式,来返回字符串 下面分别定义一个属性类,和一个枚举帮助类 [AttributeUsage(AttributeTargets.Field,AllowMultiple  ...

  2. 下载android 源码

    http://source.android.com/source/downloading.html 1.下载repo 官网:curl http://commondatastorage.googleap ...

  3. maven打包时使用的pom配置

    <build> <plugins> <!-- compiler插件, 设定JDK版本 --> <plugin> <groupId>org.a ...

  4. Win7 64位 VS2013环境编译boost1_58_0

    备忘,发现好多不常用的东西不记笔记再想用要重新花时间找,所以试着开始记笔记,写入博客吧. 首先去官网下最新的版本 http://www.boost.org/ 写本文时boost最新版本为1_58_0, ...

  5. Poj-1157-LITTLE SHOP OF FLOWERS

    题意为从每行取一瓶花,每瓶花都有自己的审美价值 第 i+1 行取的花位于第 i 行的右下方 求最大审美价值 dp[i][j]:取到第 i 行,第 j 列时所获得的最大审美价值 动态转移方程:dp[i] ...

  6. NSMutableAttributedString/NSAttributedString 富文本设置

    今天在做项目的过程中,我们的设计师想要一种字体四周都带阴影的效果,但是我们平时使用的setShadowColor 和setShadowOffset是达不到这种效果,setShadowOffset 只能 ...

  7. 平衡树模板 bzoj 3224

    program t3224; var tr:array[-1..1000000,1..2] of int64; num,fa,size,quan:array[-1..1000000] of int64 ...

  8. Print2flash在.NET（C#）中的使用，即文档在线预览

    office文档(word,excel,ppt)在线预览查看,有很多种方式,比如可以 1.调用weboffice组件,进行word预览,要求客户端安装word,仅适用IE, word2013, IE1 ...

  9. 轻松实现ajax登录时让浏览器保存密码

    将登录页面由form提交改为ajax提交,发现一个副作用——登录时浏览器不会提示是否保存密码,这样每次登录都要输入用户名/密码. html代码如下: <script> $(function ...

  10. jQuery插件之验证控件jquery.validate.js

    今天学习一下jQuery.Validate插件,为便于日后翻阅查看和广大博客园园友共享,特记于此. 本博客转载自:jQuery Validate jQuery Validate 插件为表单提供了强大的 ...