欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時間：2016年10月21日 10:29:42   作者：Zhuang miao  
今天使用bootstrap和metroui設計了一個metro風格的移動app或者微信微網(wǎng)站的界面，非常不錯具有參考借鑒價值，感興趣的朋友可以參考下

今天使用bootstrap和metroui設計了一個metro風格的移動app或者微信微網(wǎng)站的界面

程序的源代碼可以從此處獲得：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">寵物監(jiān)控</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">寵物領養(yǎng)</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">聯(lián)系我們</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風格！網(wǎng)站適配各種大小的屏幕。當然，還是在手機上看會更漂亮一些！

以上所述是小編給大家介紹的使用BootStrap和Metroui設計的metro風格微網(wǎng)站或手機app界面，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！

相關文章

  • jquery插件autocomplete用法示例

    jquery插件autocomplete用法示例

    這篇文章主要介紹了jquery插件autocomplete用法,結合實例形式分析了jQuery插件autocomplete與后臺交互實現(xiàn)搜索的自動完成功能實現(xiàn)技巧,需要的朋友可以參考下
    2016-07-07
  • 通過jquery的$.getJSON做一個跨域ajax請求試驗

    通過jquery的$.getJSON做一個跨域ajax請求試驗

    jquery提供了$.getJSON的方法，讓我們可以實現(xiàn)跨域ajax請求，但jqueryAPI上的內(nèi)容實在太少，如何用$.getJSON，請求網(wǎng)站應該返回怎樣的數(shù)據(jù)庫才能讓$.getJSON獲取到，下面我就用一個實際例子來說明下。
    2011-05-05
  • 小試JQuery的AutoComplete插件

    小試JQuery的AutoComplete插件

    在項目制作中，有時候需要向用戶提供一定的幫助信息來提示用戶的操作，當然，suggest功能是必不可少的，但是自己開發(fā)的話，是比較費時費事的，這里就直接拿JQuery的autocomplete來用吧， 實驗證明，效果很好
    2011-05-05
  • EasyUI 中 MenuButton 的使用方法

    EasyUI 中 MenuButton 的使用方法

    在EasyUI 的Demo 中 只有MenuButton 的顯示DEMO，沒有click 事件的相關操作，項目中正好用到啦，所以研究了下，可以用js 動態(tài)的為menu item 綁定click 事件
    2012-07-07
  • javascript權威指南 學習筆記之null和undefined

    javascript權威指南 學習筆記之null和undefined

    JavaScript中的關鍵字null是一個特殊的值，它表示“無值”。null常常被看作對象類型的一個特殊值，即代表“無對象”的值。
    2011-09-09
  • 輕量級jQuery插件slideBox實現(xiàn)帶底欄輪播(焦點圖)代碼

    輕量級jQuery插件slideBox實現(xiàn)帶底欄輪播(焦點圖)代碼

    這篇文章主要介紹了輕量級jQuery插件slideBox實現(xiàn)帶底欄輪播(焦點圖)代碼，代碼簡單易懂，非常實用，特此分享腳本之家平臺供大家學習
    2016-03-03
  • jQuery之尺寸調(diào)整組件的深入解析

    jQuery之尺寸調(diào)整組件的深入解析

    本篇文章是對jQuery中的尺寸調(diào)整組件進行了詳細的分析介紹，需要的朋友參考下
    2013-06-06
  • (模仿京東用戶注冊)用JQuery實現(xiàn)簡單表單驗證,初學者必看

    (模仿京東用戶注冊)用JQuery實現(xiàn)簡單表單驗證,初學者必看

    下面小編就為初學者們分享一篇(模仿京東用戶注冊)用JQuery實現(xiàn)簡單表單驗證，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
    2018-01-01
  • JQuery 應用 JQuery.groupTable.js

    JQuery 應用 JQuery.groupTable.js

    在以往的項目中，數(shù)據(jù)瀏覽用的都table 的形式展現(xiàn)。如下圖1， 這是一個很常見的表格。通常對分類的字段先進行排序。為了讓分類表現(xiàn)的更直觀。
    2010-12-12
  • jQuery實現(xiàn)圖片放大預覽實現(xiàn)原理及代碼

    jQuery實現(xiàn)圖片放大預覽實現(xiàn)原理及代碼

    jQuery實現(xiàn)圖片放大原理很簡單，就是將圖片顯示的尺寸變大后放在瀏覽器的一個指定位置，從而實現(xiàn)圖片的放大預覽，下面有個不錯的示例，感興趣的朋友可以參考下
    2013-09-09

最新評論