现在位置首页 / 产品设计 /正文

使用bootstrap和metroui设计的微网站或手机app界面

作者: IT小兵 | 2014年6月4日| 热度:℃ | 评论: |参与:

前段时间分享了基于BootStrap的后台框架[基于Jquery、Bootstrap的后台管理免费UI框架推荐--Charisma UI],今天再次分享一个metro ui效果的响应式设计。


今天使用bootstrapmetroui设计了一个metro风格的移动app或者微信微网站的界面 。 

程序的源代码可以从此处获得:https://github.com/mz121star/weixin-metro  

有喜欢的朋友可以拿去修改一下。

这里主要使用了bootstrap的响应式设计和metroui的win8 metro风格!网站适配各种大小的屏幕。当然,还是在手机上看会更漂亮一些!

metro风格

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>



点击阅读本文所属分类的更多文章: 产品设计 。和高手一起交流:346717337
友荐云推荐

未注明转发、原文均为本站原创。分享本文请注明 原文链接

给您更多信息和帮助

在这里您可以找到更多:

技术交流群:346717337 Jquery插件交流

投稿:suchso@vip.qq.com

承接:企业网站门户/微网站/微商城/CMS系统/微信公众号运营/业务咨询

抢天猫双11红包
推荐使用阿里云服务器
echarts教程系列
本月最热文章

微信扫一扫,徜徉悠嘻网,您的休闲乐园

微信公众号:快乐每一天

随机文章
标签

技术交流群:346717337

投稿:suchso@vip.qq.com

专业专注:企业网站门户/微网站/微商城/CMS系统/微信公众号运营/付费问题咨询