javascript HTML 5 中的现代 UI (Metro) 样式磁贴？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16190743/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Modern UI (Metro) style tile in HTML 5?
提问by Bastien Vandamme
I would like to know if it's possible to recreate the tile system of modern UI from Windows 8 on a HTML page.
我想知道是否可以在 HTML 页面上从 Windows 8 重新创建现代 UI 的磁贴系统。
I already created thisfrom this website. Here is the code
<div class="tile pos1-1 w1h1 techolive"></div>
<div class="tile pos1-2 w1h1 techblue"></div>
<div class="tile pos2-2 w1h1 techred"></div>
<div class="tilebanner" style="font-size: 20px !important;">
<a class="tile pos2-3 w2h1 techdarkblue" href="...">
List of<br/>
Sessions
</a>
</div>
Now i would like to add the same slide movementeffect of modern UI. I guest I need javaScript to create that. Perhaps this feature or a similar feature is included in HTML 5 or CSS. Do you know where I can find a sample?
现在我想添加与现代 UI相同的滑动移动效果。我来宾我需要 javaScript 来创建它。也许此功能或类似功能包含在 HTML 5 或 CSS 中。你知道我在哪里可以找到样品吗？
回答by Jan Hommes
There is a plugin for jQuery called Metro JS. Maybe you can use this to create the tiles with jquery and javascript.
有一个名为Metro JS 的jQuery 插件。也许您可以使用它来创建带有 jquery 和 javascript 的图块。
回答by Harry Mustoe-Playfair
Anyone looking at this now should check out MetroUI- it follows a very similar methodology to Twitter Bootstrap and is very easy to use and produces really nice results.
现在看到这个的任何人都应该查看MetroUI- 它遵循与 Twitter Bootstrap 非常相似的方法，并且非常易于使用并产生非常好的结果。
It's also:
这也是：
Developed with the advice of Microsoft to build the user interface
在 Microsoft 的建议下开发以构建用户界面
So you get something really true to Windows 8
所以你会得到真正适用于 Windows 8 的东西
