使用BootStrap和Metroui设计的metro风格微网站或手机app界面
作者:Zhuang miao 发布时间:2024-05-02 17:32:09
标签:bootstrap,metroui
今天使用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="images/1.jpg" class="cover1" />
</div>
<div class="slide">
<img src="images/2.jpg" class="cover1" />
</div>
<div class="slide">
<img src="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="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="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="images/1.jpg">
<img src="images/2.jpg">
<img src="images/3.jpg">
<img src="images/4.jpg">
<img src="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风格!网站适配各种大小的屏幕。当然,还是在手机上看会更漂亮一些!
以上所述是小编给大家介绍的使用BootStrap和Metroui设计的metro风格微网站或手机app界面网站的支持!
来源:http://www.cnblogs.com/mz121star/p/weixinmetroui.html
0
投稿
猜你喜欢
- Pandas是一个用于数据分析和操作的Python库。在pandas中几乎所有的操作都围绕着DataFrame。Dataframe是一个二维
- 目录1.利用 while True: + sleep() 实现定时任务2.使用 Timeloop 库运行定时任务3.利用 threading
- 本文实例讲述了python中的闭包用法。分享给大家供大家参考。具体分析如下:什么是闭包?简单说,闭包就是根据不同的配置信息得到不同的结果再来
- 一、正常配置stylus流程1.安装stylus、stylus-loader依赖(进入项目文件夹下)cnpm install stylus
- str_split不支持中文,利用mb_xx函数实现个/** * Convert a string to an array * @param
- 超如果你急需一个简单的Web Server,但你又不想去下载并安装那些复杂的HTTP服务程序,比如:Apache,ISS等。那么, Pyth
- 案例一:某套图网站,套图以封面形式展现在页面,需要依次点击套图,点击广告盘链接,最后到达百度网盘展示页面。这一过程通过爬虫来实现,收集百度网
- <?php /** * Created by JetBrains Ph
- 对于在外的游子,每逢佳节倍思亲。而对于996ICU的苦逼程序猿们,最期待的莫过于各种节假日能把自己丢在床上好好休息一下了。这几天各公司都陆续
- 一、config.ini 配置文件[DATABASE]host = 192.1.1.1username = rootpassword = r
- 最近关于浏览器的最重要的事情就是IE的极光0day漏洞了,这个漏洞导致包括Google在内的多家美国公司受到黑客的攻击,当然也有很多网站被黑
- 第一列按照goodsid局部分组,然后在分组后的记录中按照audittime升序排序得到序号,从而显示某商品得第几次变迁。 第二列是取该商品
- 一、爬取数据话不多说了,直接上代码( copy即可用 )import requestsimport pandas as pdclass Sp
- 事情是这样的,博主初学python和机器学习,在跑一个代码的时候被提示出现以下错误:(能被提示出现这个错误,可见确实是初学了!)图1:跑代码
- 敲了一个错误的mysql命令, 想取消怎么办? 如果用ctrl + c, 就直接退出了。怎么办呢?来看看:mysql> show ta
- UI设计图Echarts示例效果前言对于UI给出的设计图,各个气象网站都有类似的效果,实现方式大可归为两种:网格布局+图表框架绘制温度曲线;
- 本文实例讲述了PHP日志LOG类定义与用法。分享给大家供大家参考,具体如下:<?php/*** PHP log 类 */class C
- 最近看了下go发送smtp邮件,于是总结一下简单示例 先上一个最简单的代码 (网上搂的代码改了改)package mainimport (
- IE8 的测试版发布,ACID 3 测试正式推出,听上去是让人兴奋的技术进步,而对中文互联网站却是极大的威胁:这意味着,超过半数的中文网页在
- 在大多数情况下,攻击者可以通过定位域管理员所登录的服务器,利用漏洞获取服务器system权限,找到域管理的账号、进程或是身份验证令牌,从而获