使用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 相关文章推荐
颜色选择器 Color Picker,IE,Firefox,Opera,Safar
Nov 25 Javascript
javascript实现Email邮件显示与删除功能
Nov 21 Javascript
BootStrap智能表单实战系列(八)表单配置json详解
Jun 13 Javascript
javascript验证手机号和实现星号(*)代替实例
Aug 16 Javascript
bootstrap响应式表格实例详解
May 15 Javascript
Vue实现virtual-dom的原理简析
Jul 10 Javascript
浅谈React的最大亮点之虚拟DOM
May 29 Javascript
原生JS实现获取及修改CSS样式的方法
Sep 04 Javascript
vue.js的vue-cli脚手架中使用百度地图API的实例
Jan 21 Javascript
Fetch超时设置与终止请求详解
May 18 Javascript
jQuery设置下拉框显示与隐藏效果的方法分析
Sep 15 jQuery
JavaScript进阶(三)闭包原理与用法详解
May 09 Javascript
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
php中通过虚代理实现延迟加载的实现代码
2011/06/10 PHP
PHP代码保护--Zend Guard的使用详解
2013/06/03 PHP
PHP远程采集图片详细教程
2014/07/01 PHP
JAVASCRIPT对象及属性
2007/02/13 Javascript
javascript 表格排序和表头浮动效果(扩展SortTable)
2009/04/07 Javascript
JavaScript ECMA-262-3 深入解析.第三章.this
2011/09/28 Javascript
Javascript模块化编程(一)AMD规范(规范使用模块)
2013/01/17 Javascript
js实现浏览器的各种菜单命令比如打印、查看源文件等等
2013/10/24 Javascript
教你用AngularJS框架一行JS代码实现控件验证效果
2014/06/23 Javascript
浅谈JavaScript中指针和地址
2015/07/26 Javascript
jQuery仿淘宝网产品品牌隐藏与显示效果
2015/09/01 Javascript
使用Javascript写的2048小游戏
2015/11/25 Javascript
Nodejs express框架一个工程中同时使用ejs模版和jade模版
2015/12/28 NodeJs
BootStrap学习系列之Bootstrap Typeahead 组件实现百度下拉效果(续)
2016/07/07 Javascript
用js动态添加html元素,以及属性的简单实例
2016/07/19 Javascript
原生JS实现匀速图片轮播动画
2016/10/18 Javascript
JS 拦截全局ajax请求实例解析
2016/11/29 Javascript
jQuery常见面试题之DOM操作详析
2017/07/05 jQuery
js实时监控文本框输入字数的实例代码
2018/01/18 Javascript
react以create-react-app为基础创建项目
2018/03/14 Javascript
详解keep-alive + vuex 让缓存的页面灵活起来
2019/04/19 Javascript
JS原型和原型链原理与用法实例详解
2020/02/05 Javascript
一篇文章带你从零快速上手Rollup
2020/09/07 Javascript
[01:11:10]2014 DOTA2华西杯精英邀请赛 5 24 iG VS VG加赛
2014/05/26 DOTA
django反向解析和正向解析的方式
2018/06/05 Python
使用python生成杨辉三角形的示例代码
2018/08/29 Python
pycharm设置当前工作目录的操作(working directory)
2020/02/14 Python
django models里数据表插入数据id自增操作
2020/07/15 Python
HTML5注册页面示例代码
2014/03/27 HTML / CSS
护理自荐信范文
2013/10/05 职场文书
技术学校毕业生求职信分享
2013/12/02 职场文书
《珍珠泉》教学反思
2014/02/20 职场文书
志愿者活动总结报告
2014/06/27 职场文书
思想纪律作风整顿剖析材料
2014/10/11 职场文书
个人典型事迹材料
2014/12/30 职场文书
Java实战之用Swing实现通讯录管理系统
2021/06/13 Java/Android