使用BootStrap和Metroui设计的metro风格微网站或手机app界面 - [技术教程]

今天使用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="http://www.gimoo.net/t/1811/css/normalize.css">
<link rel="stylesheet" href="http://www.gimoo.net/t/1811/css/bootstrap.min.css">
<link rel="stylesheet" href="http://www.gimoo.net/t/1811/css/metro-bootstrap.css">
<link rel="stylesheet" href="http://www.gimoo.net/t/1811/css/iconFont.css">
< 可选的Bootstrap主题文件（一般不用引入） -->
<link rel="stylesheet" href="http://www.gimoo.net/t/1811/css/bootstrap-theme.min.css">
<link rel="stylesheet" href="http://www.gimoo.net/t/1811/css/main.css">
<script src="http://www.gimoo.net/t/1811/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="http://www.gimoo.net/t/1811/images/1.jpg" class="cover1" />
</div>
<div class="slide">
<img src="http://www.gimoo.net/t/1811/images/2.jpg" class="cover1" />
</div>
<div class="slide">
<img src="http://www.gimoo.net/t/1811/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="http://www.gimoo.net/t/1811/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="http://www.gimoo.net/t/1811/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="http://www.gimoo.net/t/1811/images/1.jpg">
<img src="http://www.gimoo.net/t/1811/images/2.jpg">
<img src="http://www.gimoo.net/t/1811/images/3.jpg">
<img src="http://www.gimoo.net/t/1811/images/4.jpg">
<img src="http://www.gimoo.net/t/1811/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="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>-->
<script src="http://www.gimoo.net/t/1811/js/vendor/jquery-1.10.2.min.js"></script>
<script src="http://www.gimoo.net/js/bootstrap.min.js"></script>
<script src="http://www.gimoo.net/t/1811/js/jquery/jquery.widget.min.js"></script>
<script src="http://www.gimoo.net/t/1811/js/metro/metro.min.js"></script>
<<script src="http://www.gimoo.net/t/1811/js/plugins.js"></script>
<script src="http://www.gimoo.net/t/1811/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界面，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对绿夏网网站的支持！

#免责声明#

本站[绿夏技术导航]提供的一切软件、教程和内容信息仅限用于学习和研究目的；不得将上述内容用于商业或者非法用途，否则，一切后果请用户自负。本站信息来自网络收集整理，版权争议与本站无关。您必须在下载后的24个小时之内，从您的电脑或手机中彻底删除上述内容。如果您喜欢该程序或内容，请支持正版，购买注册，得到更好的正版服务。我们非常重视版权问题，如有侵权请邮件[admin@lxwl520.com]与我们联系进行删除处理。敬请谅解！

文章分类