【前言】
公司需要做一个win8风格的网页，
找到了metroui，挺好的。
网址：
中文网（http://www.bootcss.com/p/metro-ui-css/index.html）
官网（http://metroui.org.ua/）
效果不错，写这篇文章完全是照办中文网的内容，加深下记忆。
【readme】
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>index.html</title>
<!-- modern.css 最主要的css -->
<link href="css/modern.css" rel="stylesheet">
<link href="css/site.css" rel="stylesheet" type="text/css">
<!-- 响应式css以及配套meta -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="modern-responsive.css" rel="stylesheet">
<!-- 网页代码高亮css -->
<link href="js/google-code-prettify/prettify.css" rel="stylesheet" type="text/css">
<!-- jquery -->
<script type="text/javascript" src="js/assets/jquery-1.9.0.min.js"></script>
<!-- 解决鼠标滚轮的插件 -->
<script type="text/javascript" src="js/assets/jquery.mousewheel.min.js"></script>
<!-- 下拉菜单插件 -->
<script type="text/javascript" src="js/modern/dropdown.js"></script>
<!-- 对话框插件 -->
<script type="text/javascript" src="js/modern/dialog.js"></script>
<!-- 手风琴效果插件 -->
<script type="text/javascript" src="js/modern/accordion.js"></script>
<!-- 按钮组插件 -->
<script type="text/javascript" src="js/modern/buttonset.js"></script>
<!-- 幻灯片插件 -->
<script type="text/javascript" src="js/modern/carousel.js"></script>
<!-- 表单插件 -->
<script type="text/javascript" src="js/modern/input-control.js"></script>
<!-- 多页标签 -->
<script type="text/javascript" src="js/modern/pagecontrol.js"></script>
<!-- 评分插件 -->
<script type="text/javascript" src="js/modern/rating.js"></script>
<!-- 滑块插件 -->
<script type="text/javascript" src="js/modern/slider.js"></script>
<!-- tile滑动插件 -->
<script type="text/javascript" src="js/modern/tile-slider.js"></script>
<!-- tile拖拽插件 -->
<script type="text/javascript" src="js/modern/tile-drag.js"></script>
</head>
<body>
<!-- 颜色------------------------ -->
<!-- 背景颜色，使用bg-color-* -->
<div class="bg-color-red">...</div>
<!-- 字体颜色，使用fg-color-* -->
<span class="fg-color-blue">...</span>
<!-- 边框颜色，使用border-color-* -->
<div class="border-color-red">...</div>
<!-- 轮廓颜色，使用outline-color-* -->
<div class="tile outline-color-red">...</div>
<!-- 布局------------------------ -->
<!-- 默认页面布局 -->
<div class="page">
<div class="page-header">
<div class="page-header-content">...</div>
</div>
<div class="page-region">
<div class="page-region-content">...</div>
</div>
</div>
<!-- 二级页面布局 -->
<div class="page secondary">
<div class="page-header">
<div class="page-header-content">...</div>
</div>
<div class="page-region">
<div class="page-region-content">...</div>
</div>
</div>
<!-- fill view -->
<div class="page fill">...</div>
<!-- snapped view -->
<div class="page snapped">...</div>
<!-- 应用栏 -->
<div class="app-bar">...</div>
<!-- charms -->
<div class="charms">...</div>
<!-- 消息对话框 -->
<div class="message-dialog">...</div>
<!-- 通知对话框 -->
<div class="error(info, warning)-bar">...</div>
<!-- 网格系统------------------------ -->
<!-- 网格 -->
<div class="grid">
<div class="row">
<!-- spanN，可以用在任何标签上，用来设置宽度 -->
<div class="spanN">...</div>
...
<!-- offsetN，与spanN相对应 -->
<div class="offsetN">...</div>
</div>
</div>
<!-- 文本------------------------ -->
<!-- h1到h6都是可以使用的 -->
<!-- 一些文本 -->
<div class="body-text">...</div>
<p class="body-secondary-text">...</p>
<p class="tertiary-text">...</p>
<p class="tertiary-secondary-text">...</p>
<p class="indent">...</p>
<p class="long-text">...</p>
<!-- 小字体 -->
<small>...</small>
<!-- 加粗字体 -->
<strong>...</strong>
<!-- 斜体字 -->
<em>...</em>
<!-- 缩略语 -->
<abbr title="Title of abbreviation">...</abbr>
<!-- 地址 -->
<address>...</address>
<!-- 引用块 -->
<blockquote>...</blockquote>
<!-- 向右的引用块 -->
<blockquote class="place-right"></blockquote>
<!-- 无样式列表 -->
<ul class="unstyled">
<li>...</li>
</ul>
<!-- 表格------------------------ -->
<!-- 条纹表格 -->
<table class="striped">...</table>
<!-- 表框表格 -->
<table class="bordered">...</table>
<!-- 悬浮表格 -->
<table class="hovered">...</table>
<!-- tr中可以添加error,success,warning,info,selected-row -->
<!-- 表单------------------------ -->
<!-- 多选 -->
<label class="input-control checkbox">
<input type="checkbox">
<span class="helper">CheckBox Caption</span>
</label>
<!-- 单选 -->
<label class="input-control radio">
<input type="radio">
<span class="helper">CheckBox Caption</span>
</label>
<!-- 开关 -->
<label class="input-control switch">
<input type="checkbox">
<span class="helper">CheckBox Caption</span>
</label>
<!-- 按钮 -->
<input type="button" value="Button"/>
<input type="submit" value="Submit"/>
<input type="reset" value="Reset" />
<input type="button" disabled value="Button" />
<!-- 文本框 -->
<div class="input-control text">
<input type="text" />
<button class="helper"></button>
</div>
<!-- 密码框 -->
<div class="input-control password">
<input type="password" />
<button class="helper"></button>
</div>
<!-- 搜索框 -->
<div class="input-control text">
<input type="text" />
<button class="btn-search"></button>
</div>
<!-- 手机号 -->
<div class="input-control text">
<input type="phone" />
<button class="helper"></button>
</div>
<!-- email -->
<div class="input-control text">
<input type="email" />
<button class="helper"></button>
</div>
<!-- 网址 -->
<div class="input-control text">
<input type="url" />
<button class="helper"></button>
</div>
<!-- 下拉选择框 -->
<div class="input-control select">
<select>
<option>...</option>
</select>
</div>
<!-- multi下拉框 -->
<div class="input-control select">
<select multiple="">
<option>...</option>
</select>
</div>
<!-- 文本域 -->
<div class="input-control textarea">
<textarea>
</textarea>
</div>
<!-- fieldset -->
<fieldset>
<legend>...</legend>
...
</fieldset>
<!-- input使用spanN -->
<div class="input-control text spanN">
<input type="text" />
<button class="helper"></button>
</div>
<!-- 按钮------------------------ -->
<!-- 普通按钮 -->
<button>按钮</button>
<button class="default">按钮</button>
<button disabled>按钮</button>
<a class="button">按钮</a>
<!-- 命令按钮 -->
<button class="command-button">
是的，分享和链接 <small>使用这个选项为家庭或工作</small>
</button>
<button class="command-button default">...</button>
<button class="command-button" disabled>...</button>
<!-- 工具条 -->
<div class="toolbar">
<button />
...
<button />
</div>
<!-- 按钮组合工具条 -->
<div class="toolbar">
<div class="toolbar-group">
<button />
...
<button />
</div>
...
<div class="toolbar-group">
<button />
...
<button />
</div>
</div>
<!-- 垂直工具条 -->
<div class="toolbar-vertical">
<button />
...
<button />
</div>
<!-- 图片按钮 -->
<button class="image-button">
标题 <img />
</button>
<button class="image-button bg-color-darken fg-color-white">
下载<img src="images/down.png" />
</button>
<!-- 按钮大小 -->
<button class="mini">按钮标题</button>
<button>按钮标题</button>
<button class="big">按钮标题</button>
<!-- 图标按钮 -->
<button>
<i class="icon-*"></i>按钮标题
</button>
<button>
按钮标题<i class="icon-*"></i>
</button>
<button class="default">
<i class="icon-*"></i>按钮标题
</button>
<!-- 分页导航 -->
<div class="pagination">
<ul>
<li class="first">
<a></a>
</li>
<li class="prev">
<a></a>
</li>
<li>
<a>1</a>
</li>
...
<li class="active">
<a>1</a>
</li>
<li class="disabled">
<a>1</a>
</li>
<li class="spaces">
<a>...</a>
</li>
...
<li>
<a>N</a>
</li>
<li class="next">
<a></a>
</li>
<li class="last">
<a></a>
</li>
</ul>
</div>
<!-- 图像------------------------ -->
<!-- 带有文字的图像 -->
<div class="image-container">
<img />
<div class="overlay">覆盖文本</div>
</div>
<div class="image-container light">
<img />
<div class="overlay">覆盖文本</div>
</div>
<div class="image-container bg-color-blue">
<img />
<div class="overlay">覆盖文本</div>
</div>
<!-- 图像集16*9 -->
<div class="image-collection">
<div>
<img />
</div>
...
<div>
<img />
</div>
</div>
<!-- 图像集4*3 -->
<div class="image-collection p4x3">
<div>
<img />
</div>
</div>
<!-- 选中的图片 -->
<div class="image-collection">
<div class="selected">
<img />
</div>
</div>
<!-- 带有朦板的图像 -->
<div class="image-collection">
<div>
<img />
<div class="overlay">Sample text</div>
</div>
</div>
<!-- 无图像 -->
<div class="image-collection">
<div></div>
</div>
<!-- tile------------------------ -->
<!-- 水平和长度，可以使用.double(-vertical), .triple(-vertical), .quadro(-vertical)来定义 -->
<div class="tile"></div>
<div class="tile double"></div>
<div class="tile selected"></div>
<div class="tile bg-color-orange"></div>
<!-- 内容 -->
<div class="tile">
<div class="tile-content">...content here...</div>
</div>
<!-- 内置类 -->
<div class="tile icon(image)">
<div class="tile-content">
<img />
</div>
</div>
------------
<div class="tile image-set">
<div class="tile-content">
<img />
</div>
<div class="tile-content">
<img />
</div>
<div class="tile-content">
<img />
</div>
<div class="tile-content">
<img />
</div>
<div class="tile-content">
<img />
</div>
</div>
------------
<div class="tile image-slider" data-role="image-slider">
<div class="tile-content">
<img />
</div>
...
<div class="tile-content">
<img />
</div>
</div>
<!-- 状态 -->
<div class="tile double bg-color-green">
<div class="brand">
<div class="badge">12</div>
<img class="icon" src="images/Mail128.png">
</div>
</div>
<!-- 徽章 -->
<div class="tile">
<div class="brand">
<div class="badge activity"></div>
</div>
</div>
<!-- 导航条------------------------ -->
<div class="nav-bar">
<div class="nav-bar-inner">
<span class="element">项目名称</span>
<span class="divider"></span>
<ul class="menu">
<li data-role="dropdown"><a href="#">菜单名称 1</a>
<ul class="dropdown-menu">
<li><a href="#">子菜单名称</a>
</li> ...
<li><a href="#">子菜单名称</a>
</li>
</ul></li>
<li><a />
</li>
<li class="divider"></li>
<li><a />
</li>
</ul>
</div>
</div>
<!-- 侧边栏------------------------ -->
<!-- 布局 -->
<div class="page [secondary] with-sidebar">
<div class="page-header" />
<div class="page-sidebar" />
<div class="page-region" />
</div>
<!-- 默认 -->
<div class="page-sidebar">
<ul>
<li>
<a>Item</a>
</li>
...
<li>
<a>Item</a>
</li>
</ul>
</div>
<!-- 彩色贴纸 -->
<div class="page-sidebar">
<ul>
<li class="sticker sticker-color-blue">
<a>Item</a>
</li>
</ul>
</div>
<!-- 二级菜单 -->
<div class="page-sidebar">
<ul>
<li>
<a>菜单名称</a>
<ul class="sub-menu">
...
</ul>
</li>
</ul>
</div>
<!-- 二级下拉菜单 -->
<div class="page-sidebar">
<ul>
<li data-role="dropdown">
<a>菜单标题</a>
<ul class="sub-menu sidebar-dropdown-menu">
...
</ul>
</li>
</ul>
</div>
<!-- 高亮显示二级菜单 -->
<div class="page-sidebar">
<ul>
<li>
<a>Item</a>
<ul class="sub-menu light">
...
</ul>
</li>
</ul>
</div>
<!-- 标签页------------------------ -->
<div class="page-control" data-role="page-control">
=== Tabs ===
<ul>
<li class="active">
<a href="#frame1">页面标题</a>
</li>
...
<li>
<a href="#frameN">页面标题N</a>
</li>
</ul>
=== Tabs content ===
<div class="frames">
<div class="frame active" id="frame1">...页面标题对应的页面内容...</div>
...
<div class="frame" id="frameN">...页面标题N对应的内容...</div>
</div>
</div>
<!-- 手风琴------------------------ -->
<ul class="accordion" data-role="accordion">
<li class="active">
<a href="#"> 标题 </a>
<div>...内容...</div>
</li>
...
<li>
<a href="#"> 标题 </a>
<div>...内容...</div>
</li>
</ul>
==== Dark ===
<ul class="accordion dark" data-role="accordion">
...
</ul>
<!-- 按钮组------------------------ -->
<div class="button-set" data-role="button-set">
<button class="active">...</button>
<button>...</button>
</div>
------------
<div class="button-set" data-role="button-set">
<button class="tool-button active">...</button>
<button class="tool-button">...</button>
</div>
<!-- 评分------------------------ -->
<!-- 静态 -->
<div class="rating" data-role="rating" data-param-vote="off" data-param-rating="3.7"></div>
<!-- 静态小 -->
<div class="rating small" data-role="rating" data-param-vote="off"
data-param-rating="3" data-param-stars="6">
</div>
<!-- 动态 -->
<div class="rating" data-role="rating"></div>
<!-- 进度条------------------------ -->
<div class="progress-bar">
<div class="bar bg-color-*" style="width: 75%"></div>
</div>
<!-- 幻灯片------------------------ -->
<div class="carousel" data-role="carousel">
<div class="slides">
<div class="slide image" id="slide1">
<img />
<div class="description">Description text here...</div>
</div>
<div class="slide mixed" id="slide2">
<img />
<div class="description">Description text here...</div>
</div>
...
</div>
<span class="control left">?</span>
<span class="control right">?</span>
</div>
<!-- 列表视图------------------------ -->
<!-- 普通 -->
<ul class="listview">
<li>
<div class="icon">
<img />
</div>
<div class="data">
<h4>Title</h4>
...
<p>text</p>
</div>
</li>
</ul>
<!-- 流体列表 -->
<ul class="listview fluid">
...
</ul>
<!-- 图像列表 -->
<ul class="listview image">
...
</ul>
<!-- 图标列表 -->
<ul class="listview iconic">
...
</ul>
<!-- 滑块------------------------ -->
<!-- 结构 -->
<div class="slider" data-role="slider">
<div class="complete"></div>
<div class="marker"></div>
</div>
<!-- 自定义 -->
<div class="slider" data-role="slider"></div>
<div class="slider" data-role="slider" data-param-init-value="35"></div>
<div class="slider" data-role="slider" data-param-accuracy="20"></div>
<div class="slider vertical" data-role="slider"></div>
<!-- 通知和回复------------------------ -->
<!-- 回复 -->
<ul class="replies">
<li class="bg-color-*">
<div class="avatar">
<img />
</div>
<div class="reply">
<div class="date">...</div>
<div class="author">...</div>
<div class="text">...</div>
</div>
</li>
</ul>
=========================================================
<div class="replies">
<div class="bg-color-*">
<div class="avatar">
<img />
</div>
<div class="reply">
<div class="date">...</div>
<div class="author">...</div>
<div class="text">...</div>
</div>
</div>
</div>
<!-- 带标签的回复 -->
<ul class="replies">
<li class="bg-color-*">
<b class="sticker sticker-left(right) sticker-color-*"></b>
<div class="avatar">
<img />
</div>
<div class="reply">
<div class="date">...</div>
<div class="author">...</div>
<div class="text">...</div>
</div>
</li>
</ul>
<!-- 通知 -->
<div class="notices">
<div class="bg-color-*">
<a href="#" class="close"></a>
<div class="notice-icon">
<img />
</div>
<div class="notice-image">
<img />
</div>
<div class="notice-header">...</div>
<div class="notice-text">...</div>
</div>
</div>
</body>
</html>