使用BootStrap和Metroui设计的metro风格微网站或手机app界面


Posted in Javascript onOctober 21, 2016

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

使用BootStrap和Metroui设计的metro风格微网站或手机app界面

以上所述是小编给大家介绍的使用BootStrap和Metroui设计的metro风格微网站或手机app界面,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JavaScript入门学习书籍推荐
Jun 12 Javascript
jquery 文本上下无缝滚动,鼠标放上去就停止 小例子
Jun 05 Javascript
纯javascript响应式树形菜单效果
Nov 10 Javascript
JavaScript登录验证码的实现
Oct 27 Javascript
用v-html解决Vue.js渲染中html标签不被解析的问题
Dec 14 Javascript
vue动态路由实现多级嵌套面包屑的思路与方法
Aug 16 Javascript
JS基于贪心算法解决背包问题示例
Nov 27 Javascript
jQuery实现菜单的显示和隐藏功能示例
Jul 24 jQuery
js继承的这6种方式!(上)
Apr 23 Javascript
VUE组件中的 Drawer 抽屉实现代码
Aug 06 Javascript
Vue项目打包部署到iis服务器的配置方法
Oct 14 Javascript
JQuery复选框全选效果如何实现
May 08 jQuery
javascript简易画板开发
Apr 12 #Javascript
基于angular中的重要指令详解($eval,$parse和$compile)
Oct 21 #Javascript
BootStrap轻松实现微信页面开发代码分享
Oct 21 #Javascript
浅谈angularjs module返回对象的坑(推荐)
Oct 21 #Javascript
浅谈Angularjs link和compile的使用区别
Oct 21 #Javascript
JavaScript高仿支付宝倒计时页面及代码实现
Oct 21 #Javascript
基于angularJS的表单验证指令介绍
Oct 21 #Javascript
You might like
一个用mysql_odbc和php写的serach数据库程序
2006/10/09 PHP
php设计模式 Builder(建造者模式)
2011/06/26 PHP
php实现文件编码批量转换
2014/03/10 PHP
javascript的对话框详解与参数
2007/03/08 Javascript
js中各浏览器中鼠标按键值的差异
2011/04/07 Javascript
浅谈关于JavaScript的语言特性分析
2013/04/11 Javascript
Javascript 按位与运算符 (&amp;)使用介绍
2014/02/04 Javascript
JavaScript中逗号运算符介绍及使用示例
2015/03/13 Javascript
jquery插件tytabs.jquery.min.js实现渐变TAB选项卡效果
2015/08/25 Javascript
JQuery datepicker 用法详解
2015/12/25 Javascript
JavaScript入门教程之引用类型
2016/05/04 Javascript
jQuery中select与datalist制作下拉菜单时的区别浅析
2016/12/30 Javascript
JavaScript 栈的详解及实例代码
2017/01/22 Javascript
JS中使用正则表达式g模式和非g模式的区别
2017/04/01 Javascript
node.js中EJS 模板快速入门教程
2017/05/08 Javascript
Angular X中使用ngrx的方法详解(附源码)
2017/07/10 Javascript
JavaScript插件Tab选项卡效果
2017/11/14 Javascript
VUE v-model表单数据双向绑定完整示例
2019/01/21 Javascript
微信小程序一周时间表功能实现
2019/10/17 Javascript
基于JavaScript实现贪吃蛇游戏
2020/03/16 Javascript
基于vue hash模式微信分享#号的解决
2020/09/07 Javascript
python计算书页码的统计数字问题实例
2014/09/26 Python
介绍Python中几个常用的类方法
2015/04/08 Python
Pytorch损失函数nn.NLLLoss2d()用法说明
2020/07/07 Python
基于python判断字符串括号是否闭合{}[]()
2020/09/21 Python
前端H5 Video常见使用场景简介
2020/08/21 HTML / CSS
台湾前三大B2C购物网站:MOMO购物网
2017/04/27 全球购物
华为慧通面试题
2012/09/11 面试题
实习护士自我鉴定
2013/10/13 职场文书
高级技校毕业生自荐信
2013/11/18 职场文书
2014年三万活动总结
2014/04/26 职场文书
竞聘演讲稿精彩开头和结尾
2014/05/14 职场文书
求职信模板
2014/05/23 职场文书
通信工程专业求职信
2014/06/04 职场文书
高中运动会广播稿
2014/09/16 职场文书
导游词之江西赣州
2019/10/15 职场文书