多页控件 · Bootstrap Metro UI CSS 中文版

页面 1
页面 2
页面 3
页面 4

页面 1

Windows8已经到来，基于Metro UI风格完全改变了Window要操作系统。Metro是微软的设计语言，微软将这个新的UI用于他们的所有平台，包括台式机、平板电脑、手机和他们的网站。就我个人而言，我喜欢Metro　UI，它的简单性、基于网格的接口（适合响应式设计），以及他在每个部分的一致性很适合现代网页设计的需求。Metro　UI也将挑起网页设计的一股新浪潮。

页面 2

现在Metro的概念传播到多种产品上。品牌宣传、媒体中心，Windows Phone，Windows8操作系统。其最大特点就是通过方正的区块标记简单的连接到需要的地方，简单明了，从视觉上就能告诉我们要去的地方是什么？微软是这样描述的：“Metro是我们的设计语言。我们称之为‘Metro’，是因为他的现代和简约，而且他在移动时，速度非常的快，他的排版结合印刷术。而且他是完全真实的”。

页面 3

Metro UI风格大家一定见识了不少，至于其好坏我们在此不做讨论，今天开始，我们在w3cplus上会推出一系列的Metro UI设计风格的DEMO，当然这些DEMO不是仅仅的Metro UI风格，我们会尽量使用CSS3属性，让其效果更佳优美，或者我们也会将其结合Bootstrap制作一些DEMO以供大家学习。另外广大网友提意在DEMO中加入简单的介绍，方便理解。那么从今天开始的DEMO，我们会加入一些说明，如果您有更好的建议，希望能告诉我们。谢谢！

页面 4

W3CPLUS是一个前端爱好者的家园，W3CPLUS努力打造最优秀的web 前端学习的站点。W3CPLUS力求原创，以一起学习，一起进步，共同分享为原则。W3CPLUS站提供了有关于css,css3,html,html5,jQuery,手机移动端的技术文档、DEMO、资源，与前端爱好者一起共勉。

自定义组件

    <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>

Javascript