タッチデバイスに適したMetro UIのスタイルを使ったTwitter Bootstrapベースのフレームワーク -BootMetro
Post on:2012年10月3日
HTML5, CSS3, JavaScriptで作成されたMetro UIのスタイルを使ったシンプルでフレキシブルなフレームワークを紹介します。
![サイトのキャプチャ](/wp-content/uploads-2012-2d/2012100304.png)
デモではWindows8で採用される美しいMetro UIを使ったスタイルがたくさんあります。
![デモのキャプチャ](/wp-content/uploads-2012-2d/2012100305.png)
数多くあるデモから、いくつか紹介します。
![デモのキャプチャ](/wp-content/uploads-2012-2d/2012100306-01.png)
Tile Templates
Metro UIといればタイルですね、テキストや画像を組み合わせたさまざまなパターンがあります。
![デモのキャプチャ](/wp-content/uploads-2012-2d/2012100306-02.png)
![デモのキャプチャ](/wp-content/uploads-2012-2d/2012100306-03.png)
Icon
アイコンは数えられないくらいたくさんあります。
![デモのキャプチャ](/wp-content/uploads-2012-2d/2012100306-04.png)
Button Dropdown
ボタン形式のドロップダウンです、ここからはBootstrapをMetro UI風にした感じです。
![デモのキャプチャ](/wp-content/uploads-2012-2d/2012100306-05.png)
Nav, Tab
ナビゲーションやタブなど。
![デモのキャプチャ](/wp-content/uploads-2012-2d/2012100306-06.png)
Labels, Badges
ラベルやバッジ。
![デモのキャプチャ](/wp-content/uploads-2012-2d/2012100306-07.png)
Tumbnails
画像の配置も多彩なパターンが用意されています。
![デモのキャプチャ](/wp-content/uploads-2012-2d/2012100306-08.png)
Alerts
エラー、成功、インフォメーションなどのパネルです。
![デモのキャプチャ](/wp-content/uploads-2012-2d/2012100306-09.png)
Progress
アニメーションで動くプロフレスバー。
![デモのキャプチャ](/wp-content/uploads-2012-2d/2012100306-10.png)
Layouts
グリッドも、12カラムのベースから実用的なもので多彩です。
![デモのキャプチャ](/wp-content/uploads-2012-2d/2012100306-11.png)
Responsive
レスポンシブ デザイン用ももちろん用意されています。
![デモのキャプチャ](/wp-content/uploads-2012-2d/2012100306-12.png)
Forms
フォーム。
![デモのキャプチャ](/wp-content/uploads-2012-2d/2012100306-13.png)
JavaScript
スクリプトもBootstrapベースです。
sponsors