Bootstrap を ASP.NET MVC に適用してみる

私のように美的センスがマイナス(=ゼロ以下w)の人でも、なんとなくそれっぽい Web アプリが作れてしまうフレームワークが Twitter Bootstrap です。
もちろん ASP.NET MVC のソリューションでも利用可能です。自分の才能を過信してしまう(でも、実は才能は無い・・・)ようなアプリが本当に作れます。

これについて 6月15日(土) の技術ひろば.net の勉強会 で紹介します。

どのように記述するのかについては勉強会で実際に見ていただけるとうれしいのですが、まずはどのくらい垢抜けるのかをスクリーンショットで紹介。
もちろん Bootstrap を使わないにしてもレイアウトをもうちょっと考えるはずですが、Controller 作成時に自動生成される View そのままと、それに対して Bootstrap の基本的なクラスを適用したものとを比較してみます。Bootstrap のクラスをいくつか追加するだけで、どのくらい画面の印象が変わるものなのかを感じていただければ。
※キャプションの英語/日本語の差異などについては、今回は無視してください。

 

Index ページ(一覧ページ)

image image
Bootstrap なし Bootstrap あり

 

Details ページ

image image
Bootstrap なし Bootstrap あり

 

Edit ページ

image image
Bootstrap なし Bootstrap あり

 

Delete ページ

image image
Bootstrap なし Bootstrap あり

 

なんだか、すごいでしょ?でも、この程度であればそれほど難しいことはありません。
私にできたのだから、あなたにも絶対にできます!

 

6月の技術ひろば.net の勉強会は 15日(土) の開催です。メインテーマは「今どきの Web 技術」 です。

Bootstrap セッションの他にも、

  • インフラジスティックスの池原さん(@Neri78)の 「HTML / jQuery で実現するインタラクティブ UI 構築
  • MS 井上章さん(@chack411)の 「TypeScript ファーストステップ

をお願いしています。どちらも面白そうなテーマで、いつも通り実は瀬尾がこれらのセッションを一番楽しみにしているかも。

ご都合のつく方は、ぜひぜひ遊びに来てください!
初心者でもベテランでも楽しめる内容だと思います。

広告
カテゴリー: Web タグ: , パーマリンク

Bootstrap を ASP.NET MVC に適用してみる への1件のフィードバック

  1. ピンバック: Bootstrap な ASP.NET MVC ページをスマホ/タブレットで表示してみる | 技術との戯れ

コメントを残す

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト / 変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト / 変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト / 変更 )

Google+ フォト

Google+ アカウントを使ってコメントしています。 ログアウト / 変更 )

%s と連携中