10大流行的 Metro UI 风格的 Bootstrap 主题和模板

╰+哭是因爲堅強的太久メ 2023-10-16 20:16 101阅读 0赞

Metro UI 是一种界面展示技术，是 Windows 8 的主要界面显示风格。 [**Metro**][Metro] 界面和 iOS、Android 界面最大的区别在于：后两种都是以应用为主要呈现对象，而 Metro 界面强调的是信息本身，而不是冗余的界面元素。同时在视觉效果方面，这有助于形成一种身临其境的感觉。

如果你的下一个网站项目或 [ **Web**][_Web] 应用程序想使用 Windows 8 Metro 风格，那么下面列表中收集的10套流行的 Metro UI 风格的 Twitter Bootstrap 主题和模板一定不能错过。Enjoy !

#### 1. BootMetro ####

基于 Twitter Bootstrap 的简单灵活的 [ **HTML**][_HTML]、[**CSS**][CSS] 和 [ **Javascript**][_Javascript] 框架，Win8 风格，大爱啊！

[![10141336-0eaf58d1f57641cbad7e9fc045187cfe.jpg][]][10141336-0eaf58d1f57641cbad7e9fc045187cfe.jpg 1]

[立即下载][Link 1] [效果演示][10141336-0eaf58d1f57641cbad7e9fc045187cfe.jpg 1]

#### 2. Bootswatch – Cosmo ####

一套用于 [ **Twitter Bootstrap**][_Twitter Bootstrap] 开发框架的 Metro UI 风格主题，可以免费使用。

[![10141705-d3a54f54308e418e8762131c12d9d461.jpg][]][10141705-d3a54f54308e418e8762131c12d9d461.jpg 1]

[立即下载][10141705-d3a54f54308e418e8762131c12d9d461.jpg 1] [效果演示][10141705-d3a54f54308e418e8762131c12d9d461.jpg 1]

#### 3. Metro Flexible Navigation ####

帮助你试下简洁灵活的 Windows 8 [ **Metro**][_Metro] 风格的网格布局，支持水平、垂直布局，拖放滚动，很炫！

[![10113145-b92ae807f9ef45af9d077fb14de2cfd7.png][]][10113145-b92ae807f9ef45af9d077fb14de2cfd7.png 1]

[立即下载][Link 2] [效果演示][10113145-b92ae807f9ef45af9d077fb14de2cfd7.png 1]

#### 4. Metro UI CSS ####

Metro UI CSS 是一个样式包，用于创建 Windows 8 [ **Metro**][_Metro] 风格的 UI，效果相当漂亮！

[![10143120-17c73b61ff98478186d55e31a3930fad.jpg][]][10143120-17c73b61ff98478186d55e31a3930fad.jpg 1]

[立即下载][Link 3] [效果演示][10143120-17c73b61ff98478186d55e31a3930fad.jpg 1]

#### 5. metro-bootstrap ####

简洁优雅的 Twitter Bootstrap [**Metro**][_Metro] 界面风格开发框架，是 GitHub 上的开源项目。

[![10142449-850b569cd45c4bf78d8eef0f018d69b4.jpg][]][10142449-850b569cd45c4bf78d8eef0f018d69b4.jpg 1]

[立即下载][Link 4] [效果演示][Link 5]

#### 6. MelonHTML5 – Metro UI ####

基于 [ **HTML5**][_HTML]、[**CSS3**][CSS] 和 [ **JavaScript**][_Javascript] 的 Metro UI 框架，可以通过配置参数满足实际的需要。

[![10145107-b01531ffb572451e85b6c37d60ccdfbf.png][]][10145107-b01531ffb572451e85b6c37d60ccdfbf.png 1]

[立即下载][Link 6] [效果演示][10145107-b01531ffb572451e85b6c37d60ccdfbf.png 1]

#### 7. Metro Mania ####

Metro Mania 是专业的，响应式的 Bootstrap [ **Metro**][_Metro] 风格主题，有6套颜色可供选择使用 。

[![10143552-f00fb1b727fd41e696c991da0fc8d1ee.jpg][]][10143552-f00fb1b727fd41e696c991da0fc8d1ee.jpg 1]

[立即下载][Link 7] [效果演示][Link 8]

#### 8. Scaffold – Metro Style Template ####

这是一个网站模板，用于构建基于 Twitter Bootstrap 的 [ **Metro**][Metro] 风格网站和 [ **Web**][_Web] 应用。

[![10144059-df19dec6c86947d9bfa16526ab0d1dc5.jpg][]][10144059-df19dec6c86947d9bfa16526ab0d1dc5.jpg 1]

[立即下载][Link 9] [效果演示][Link 10]

#### 9. MADMIN – Admin Theme ####

比较稀有的 [ **Metro**][Metro] 风格的网站后台管理系统主题。可惜是付费的，有点小贵啊。

[![10144349-5b7d1210bc97436da735e9f14258fb32.jpg][]][10144349-5b7d1210bc97436da735e9f14258fb32.jpg 1]

[立即下载][Link 11][效果演示][10144349-5b7d1210bc97436da735e9f14258fb32.jpg 1]

#### 10. Metro Help Desk Support Tickets ####

简洁优雅的 [ **Metro**][Metro] 风格的帮助面板，集成了 FAQ 和手册系统，减少响应时间，提高效率。

[![10144806-ace7a44ccd544ae2b4e112bb497b7aa7.jpg][]][10144806-ace7a44ccd544ae2b4e112bb497b7aa7.jpg 1]

[立即下载][Link 12] [效果演示][10144806-ace7a44ccd544ae2b4e112bb497b7aa7.jpg 1]

[Metro]: http://www.cnblogs.com/lhb25/archive/2013/03/19/windows-8-metro-style-icon-packs.html
[_Web]: http://www.cnblogs.com/lhb25/category/279316.html
[_HTML]: http://www.cnblogs.com/lhb25/category/146076.html
[CSS]: http://www.cnblogs.com/lhb25/category/146075.html
[_Javascript]: http://www.cnblogs.com/lhb25/category/146074.html
[10141336-0eaf58d1f57641cbad7e9fc045187cfe.jpg]: http://images.cnitblog.com/blog/36987/201304/10141336-0eaf58d1f57641cbad7e9fc045187cfe.jpg
[10141336-0eaf58d1f57641cbad7e9fc045187cfe.jpg 1]: http://dreamsky.github.io/main/blog/bootmetro/hub.html
[Link 1]: http://dreamsky.github.io/main/blog/bootmetro/bootmetro.rar
[_Twitter Bootstrap]: http://www.cnblogs.com/lhb25/archive/2012/09/11/resources-that-complement-twitter-bootstrap.html
[10141705-d3a54f54308e418e8762131c12d9d461.jpg]: http://images.cnitblog.com/blog/36987/201304/10141705-d3a54f54308e418e8762131c12d9d461.jpg
[10141705-d3a54f54308e418e8762131c12d9d461.jpg 1]: http://bootswatch.com/cosmo/
[_Metro]: http://www.cnblogs.com/lhb25/archive/2013/04/11/10-metro-bootstraps-ui-templates.html
[10113145-b92ae807f9ef45af9d077fb14de2cfd7.png]: http://images.cnitblog.com/blog/36987/201304/10113145-b92ae807f9ef45af9d077fb14de2cfd7.png
[10113145-b92ae807f9ef45af9d077fb14de2cfd7.png 1]: http://codecanyon.net/item/-metro-flexible-navigation/full_screen_preview/2796746
[Link 2]: http://codecanyon.net/item/-metro-flexible-navigation/2796746
[10143120-17c73b61ff98478186d55e31a3930fad.jpg]: http://images.cnitblog.com/blog/36987/201304/10143120-17c73b61ff98478186d55e31a3930fad.jpg
[10143120-17c73b61ff98478186d55e31a3930fad.jpg 1]: http://metroui.org.ua/
[Link 3]: https://github.com/olton/Metro-UI-CSS/archive/master.zip
[10142449-850b569cd45c4bf78d8eef0f018d69b4.jpg]: http://images.cnitblog.com/blog/36987/201304/10142449-850b569cd45c4bf78d8eef0f018d69b4.jpg
[10142449-850b569cd45c4bf78d8eef0f018d69b4.jpg 1]: http://talkslab.github.io/metro-bootstrap/components.html
[Link 4]: https://github.com/TalksLab/metro-bootstrap/archive/master.zip
[Link 5]: http://talkslab.github.com/metro-bootstrap/components.html
[10145107-b01531ffb572451e85b6c37d60ccdfbf.png]: http://images.cnitblog.com/blog/36987/201304/10145107-b01531ffb572451e85b6c37d60ccdfbf.png
[10145107-b01531ffb572451e85b6c37d60ccdfbf.png 1]: http://www.melonhtml5.com/
[Link 6]: http://codecanyon.net/item/melonhtml5-metro-ui/2986068
[10143552-f00fb1b727fd41e696c991da0fc8d1ee.jpg]: http://images.cnitblog.com/blog/36987/201304/10143552-f00fb1b727fd41e696c991da0fc8d1ee.jpg
[10143552-f00fb1b727fd41e696c991da0fc8d1ee.jpg 1]: http://responsivewebinc.com/premium/metro/lblue/
[Link 7]: https://wrapbootstrap.com/theme/metro-mania-no.1-metro-bootstrap-theme-WB07F9G8L
[Link 8]: http://responsivewebinc.com/premium/metro/
[10144059-df19dec6c86947d9bfa16526ab0d1dc5.jpg]: http://images.cnitblog.com/blog/36987/201304/10144059-df19dec6c86947d9bfa16526ab0d1dc5.jpg
[10144059-df19dec6c86947d9bfa16526ab0d1dc5.jpg 1]: http://wbpreview.com/previews/WB013995G/
[Link 9]: https://wrapbootstrap.com/theme/scaffold-metro-style-template-WB013995G
[Link 10]: http://wrapbootstrap.com/preview/WB013995G
[10144349-5b7d1210bc97436da735e9f14258fb32.jpg]: http://images.cnitblog.com/blog/36987/201304/10144349-5b7d1210bc97436da735e9f14258fb32.jpg
[10144349-5b7d1210bc97436da735e9f14258fb32.jpg 1]: http://wbpreview.com/previews/WB042R743/
[Link 11]: https://wrapbootstrap.com/theme/madmin-admin-theme-WB042R743
[10144806-ace7a44ccd544ae2b4e112bb497b7aa7.jpg]: http://images.cnitblog.com/blog/36987/201304/10144806-ace7a44ccd544ae2b4e112bb497b7aa7.jpg
[10144806-ace7a44ccd544ae2b4e112bb497b7aa7.jpg 1]: http://www.factorysoft.org/demo/helpdesk/
[Link 12]: http://codecanyon.net/item/metro-help-desk-support-tickets/3281394