使用BootStrap和Metroui設計的metro風格微網站或手機app界面

2019-11-20 08:41:39

字體：大中小

來源：轉載

供稿：網友

今天使用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="http://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風格！網站適配各種大小的屏幕。當然，還是在手機上看會更漂亮一些！