タッチデバイスに適したMetro UIのスタイルを使ったTwitter Bootstrapベースのフレームワーク -BootMetro

HTML5, CSS3, JavaScriptで作成されたMetro UIのスタイルを使ったシンプルでフレキシブルなフレームワークを紹介します。

サイトのキャプチャ

BootMetro

デモではWindows8で採用される美しいMetro UIを使ったスタイルがたくさんあります。

デモのキャプチャ

デモページ

数多くあるデモから、いくつか紹介します。

デモのキャプチャ

Tile Templates
Metro UIといればタイルですね、テキストや画像を組み合わせたさまざまなパターンがあります。

デモのキャプチャ

Application Bar

デモのキャプチャ

Icon
アイコンは数えられないくらいたくさんあります。

デモのキャプチャ

Button Dropdown
ボタン形式のドロップダウンです、ここからはBootstrapをMetro UI風にした感じです。

デモのキャプチャ

Nav, Tab
ナビゲーションやタブなど。

デモのキャプチャ

Labels, Badges
ラベルやバッジ。

デモのキャプチャ

Tumbnails
画像の配置も多彩なパターンが用意されています。

デモのキャプチャ

Alerts
エラー、成功、インフォメーションなどのパネルです。

デモのキャプチャ

Progress
アニメーションで動くプロフレスバー。

デモのキャプチャ

Layouts
グリッドも、12カラムのベースから実用的なもので多彩です。

デモのキャプチャ

Responsive
レスポンシブ デザイン用ももちろん用意されています。

デモのキャプチャ

Forms
フォーム。

デモのキャプチャ

JavaScript
スクリプトもBootstrapベースです。

top of page

©2017 coliss