使用BootStrap和Metroui设计的metro风格微网站或手机app界面
作者：Zhuang miao 发布时间：2024-05-02 17:32:09
标签：bootstrap,metroui
今天使用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界面网站的支持！
来源：http://www.cnblogs.com/mz121star/p/weixinmetroui.html
0
投稿猜你喜欢
- MySQL 序列 AUTO_INCREMENT详解及实例代码MySQL序列是一组整数：1, 2, 3, ...，由于一张数据表只能有一个字段
- Oracle LogMiner 是Oracle公司从产品8i以后提供的一个实际非常有用的分析工具，使用该工具可以轻松获得Oracle 重作日
概念关键字：array，数据的组合（多个）存储到一个指定的容器中，用变量指向该容器，然后可以通过变量一次性得到该容器中的所有数据.数组定义语- 完整卸载MySQL数据库的过程，具体内容如下1、关掉mysql服务右键“我的电脑”，选择“管理”，打开计算机管理，选择“服务”右键MySQL
- 前言本文章仅记录某次内网渗透过程中遇到的MySQL 采用UDF提权等方式进行获取权限，文章中内容仅用于技术交流，切勿用于非授权下渗透攻击行为
- Socket 是进程间通信的一种方式，它与其他进程间通信的一个主要不同是：它能实现不同主机间的进程间通信，我们网络上各种各样的服务大多都是基
- 大家做网站，特别是自己写的代码，常常担心被一些黑客入侵服务器，从而导致网站代码被盗，给自己带来一些损失。那么我们怎么样做，就算黑客盗了你的代
- PyTorch中数据读取的一个重要接口是torch.utils.data.DataLoader，该接口定义在dataloader.py脚本中
- 目录什么是websocket?第一步 准备工作第二步 编写聊天室页面第三步 编写后台websocket路由及处理方法第四步 运行看效果小结C
- 需求描述数据库中 num字段值为：实现的效果：需要将一行数据变成多行实现的sqlSELECT SUBSTRING_INDEX(SUBSTRI
- 概述具体的案例描述在此就不多赘述. 同一数据集我们在机器学习里的随机森林模型中已经讨论过.导包import numpy as npimpor
- IE的特殊性 IE的DOM元素属性与Firefox, Opera, Safari有些不同。在IE中，我们可以给DOM添加任意自定
- 前言今天我们一起来看一看 vue3+ts如何优雅的封装axios，并结合 mock.js 实现敏捷开发；但是我们要注意区分 Axios 和
- 在知乎上遇到一个问题，说：计算机中的「null」怎么读？null正确的发音是/n^l/，有点类似四声‘纳儿&rs
- 一、什么是"非构造函数"的继承？比如，现在有一个对象，叫做"中国人"。var Chinese = {
- 一、gfile模块是什么 gfile模块定义在tensorflow/python/platform/gfile.py，但其源代码实现主要位于
- 本博文源于绘图基础，主要讲解如何用python的plot绘制气温的折线图。先讲解plot参数如何使用后给出一个气温折线图样例绘制使用plot
- LDA(Latent Dirichlet allocation)模型是一种常用而用途广泛地概率主题模型。其实现一般通过Variational
- excel转置分为两种情况，一个是较为简单的只需要行转列，列转行最简单的转置，利用pandas里面的转置**.T**函数代码如下：impor
- 1.图像处理库import cv2 as cvfrom PIL import *常用的图像处理技术有图像读取，写入，绘图，图像色彩空间转换，
