简介：
Metro UI CSS 是一套用来创建类似于Windows 8 Metro UI风格网站的样式. 这组风格被开发成一个独立的解决方案。Metro UI CSS包含两种类型的许可证: MIT和 Commercial
LESS
Metro UI CSS是用LESS在开发. 一个很优秀的男人，Alexis Sellier创建了这个动态CSS语言LESS。 它使开发CSS更快、更简便、更有趣。
Metro UI CSS 环境搭建：
Metro UI CSS 提供Demo 模板文件：
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="css/metro-bootstrap.css">
<script src="js/jquery/jquery.min.js"></script>
<script src="js/jquery/jquery.widget.min.js"></script>
<script src="js/metro/metro.min.js"></script>
</head>
<body class="metro">
... markup page ...
</body>
</html>
参考Metro UI CSS Demo 编写案例：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<link rel="stylesheet" href="css/metro-bootstrap.css">
<script src="js/jquery/jquery.min.js"></script>
<script src="js/jquery/jquery.widget.min.js"></script>
<script src="js/metro/metro.min.js"></script>
</head>
<body class="metro">
<h1>Metro UI CSS 学习笔记</h1>
</body>
</html>
效果展示：
Metro UI CSS 高仿windows8 效果展示
<!DOCTYPE>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="product" content="Metro UI CSS Framework">
<meta name="description" content="Simple responsive css framework">
<meta name="author" content="Sergey S. Pimenov, Ukraine, Kiev">
<meta name="keywords" content="js, css, metro, framework, windows 8, metro ui">
<!--metro UI css 样式文件-->
<link href="css/metro-bootstrap.css" rel="stylesheet">
<link href="css/metro-bootstrap-responsive.css" rel="stylesheet">
<!--字体样式文件-->
<link href="css/iconFont.css" rel="stylesheet">
<!--自定义样式-->
<link href="css/docs.css" rel="stylesheet">
<!--控件样式css-->
<link href="js/prettify/prettify.css" rel="stylesheet">
<!-- Load JavaScript Libraries -->
<!--加载jquery js 文件-->
<script src="js/jquery/jquery.min.js"></script>
<script src="js/jquery/jquery.widget.min.js"></script>
<script src="js/jquery/jquery.mousewheel.js"></script>
<!--控件样式js-->
<script src="js/prettify/prettify.js"></script>
<!-- Metro UI CSS JavaScript plugins -->
<!--判读metro js 样式是否加载成功-->
<script src="js/load-metro.js"></script>
<!-- Local JavaScript -->
<!--初始化函数-->
<script src="js/docs.js"></script>
<!--github 操作-->
<!-- <script src="js/github.info.js"></script>-->
<title>Metro UI CSS : Metro Bootstrap CSS 类库</title>
<style>
</style>
</head>
<body class="metro" style="background-color: #efeae3">
<!--<header class="bg-dark" data-load="header.html"></header>-->
<div class="">
<div style="background: url(images/b1.jpg) top left no-repeat; background-size: cover; height: 300px;">
<div class="container" style="padding: 50px 20px">
<h1 class="fg-white">Metro UI CSS 2.0</h1>
<h2 class="fg-white">
Metro UI CSS 样式控件<br /> 用来创建 Windows 8 风格.
</h2>
<!-- <a href="https://github.com/olton/Metro-UI-CSS/archive/master.zip"-->
<!-- class="place-left button bg-darkRed bg-hover-red fg-white fg-hover-white bd-orange" style="margin-top: 10px">-->
<!-- <h3 style="margin: 10px 40px">Download <span class="icon-download-2 on-right"></span></h3>-->
<!-- </a>-->
</div>
</div>
<div class="container">
<div class="grid fluid">
<div class="row">
<div class="span4 bg-amber padding20 text-center">
<h2 class="fg-white">容易学</h2>
</div>
<div class="span4 bg-green padding20 text-center">
<h2 class="fg-white">less 资源</h2>
</div>
<div class="span4 bg-red padding20 text-center">
<h2 class="fg-white">许可证</h2>
</div>
</div>
</div>
</div>
<div class="container">
<div class="grid no-margin">
<div class="row">
<div class="span4 no-tablet-portrait no-phone">
<div class="notice marker-on-right bg-lighterBlue padding20 text-center" style="height: 200px">
<h1 class="fg-white" style="font-size: 120px; line-height: 80px; margin-bottom: 30px">5</h1>
<p class="subheader-secondary fg-white">样式简单添加</p>
</div>
</div>
<div class="span8">
<div class="notice marker-on-bottom no-desktop padding10 bg-lighterBlue text-center ">
<p class="subheader-secondary fg-white no-margin">5步简单添加样式</p>
</div>
<ol class="styled">
<li style="width: 90%">创建一个<strong>HTML5 DOCTYPE</strong></li>
<li style="width: 90%">引入 <strong>metro-bootstrap.css</strong></li>
<li style="width: 90%">引入 <strong>metro.min.js</strong> (jquery.js 必须)</li>
<li style="width: 90%">创建一个容器Class包含 <strong>.metro</strong></li>
<li style="width: 90%">在需要创建Metro UI CSS 样式页面，引入以上标记（Metro UI CSS相关资源）</li>
</ol>
</div>
</div>
</div>
<pre class="prettyprint linenums no-phone" style="margin-top: 10px;">
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="css/metro-bootstrap.css">
<script src="js/jquery/jquery.min.js"></script>
<script src="js/jquery/jquery.widget.min.js"></script>
<script src="js/metro/metro.min.js"></script>
</head>
<body class="metro">
... markup page ...
</body>
</html>
</pre>
</div>
<div class="bg-steel no-tablet-portrait no-phone">
<div class="container padding20 fg-white">
<div class="carousel bg-transparent no-overflow" id="carousel2">
<div class="slide">
<div class="place-right">
<img src="./images/css-logo.png"
alt="" class="span3"/>
</div>
<h2 class="fg-white ntm">Developed with advice</h2>
<p class="fg-white">Metro UI CSS developed with the advice of Microsoft to build the user interface and include: general styles, grid, layouts, typography, 20+ components, 300+ built-in icons.</p>
<p class="fg-white">Metro UI CSS build with {LESS}. Metro UI CSS is open source and has MIT licensing model.</p>
</div>
<div class="slide">
<div class="place-right padding20 ntp nrp nbp">
<img src="./images/bizspark_b_2.png"
alt="" class="span3"/>
</div>
<h2 class="fg-white ntm">BizSpark Startup</h2>
<p class="fg-white">Metro UI CSS is a BizSpark Startup. Microsoft BizSpark is a global program that helps software startups succeed by giving them access to software development tools, connecting them with key industry players, and providing marketing visibility.</p>
<p class="fg-white">BizSpark provides free software, support, and visibility to help startups succeed. Join BizSpark and become part of a global community that has over 50,000 members in 100+ countries.</p>
<a class="button small1 inverse" href="http://bizspark.com">Join the BizSpark Program now</a>
</div>
<div class="slide">
<div class="place-right">
<img src="./images/phpstorm_7_eap.png"
alt="" class="span3"/>
</div>
<h2 class="fg-white ntm">Thanks to JetBrains</h2>
<p class="fg-white">Thanks to the company JetBrains for supporting the project in the form of a license for a great product PhpStorm.</p>
<a class="button small1 inverse" href="http://www.jetbrains.com/phpstorm/">Get PhpStorm now!</a>
</div>
</div>
<!-- <script>-->
<!-- $(function(){-->
<!-- $("#carousel2").carousel({-->
<!-- height: 210,-->
<!-- period: 5000,-->
<!-- duration: 1000,-->
<!-- effect: 'fade',-->
<!-- markers: {-->
<!-- show: false-->
<!-- }-->
<!-- });-->
<!-- })-->
<!-- </script>-->
</div>
</div>
<div class="bg-dark">
<div class="container" style="padding: 10px 0;">
<div class="grid no-margin">
<div class="row no-margin">
<div class="span3 padding10">
<img src="./images/spface.jpg" alt="" class="polaroid"/>
</div>
<div class="span6 padding10">
<h3 class="fg-white">关于作者</h3>
<p class="fg-white">大家好! 我叫 Sergey Pimenov ,是Metro UI CSS 的作者来自乌克兰的首都基辅.</p>
</div>
<div class="span3 padding10">
<a class="button danger " style="width: 100%; margin-bottom: 5px" href="http://bizspark.com">Microsoft BizSpark</a>
<a class="button success " style="width: 100%; margin-bottom: 5px" href="http://jetbrains.com">JetBrains</a>
<a class="button info " style="width: 100%; margin-bottom: 5px" href="https://github.com/olton/Metro-UI-CSS">Github</a>
<a class="button warning " style="width: 100%; margin-bottom: 5px;" href="http://lesscss.org">{ Less }</a>
</div>
</div>
</div>
</div>
<div class="container tertiary-text bg-dark fg-white" style="padding: 10px">
2012-2013, Metro UI CSS © by <a href="mailto:sergey@pimenov.com.ua" class="fg-yellow">Sergey Pimenov</a>
</div>
</div>
</div>
<!--系统函数-->
<!--<script src="js/hitua.js"></script>-->
</body>
</html>
效果展示:
Metro UI CSS 资源下载：
