2013年6月15日(土) 技術ひろば.net 勉強会でのセッション

1. ASP.NET MVC で
Bootstrap
私に出来たから
あなたにも絶対出来る
瀬尾佳隆 (@seosoft)
Microsoft MVP for Visual C# 技術ひろば.net 勉強会 2013年6月

2. 自己紹介
瀬尾 佳隆 （せお よしたか）
MVP for Visual C# (Jan 2009 – Dec 2013)
“デザインセンスがありません！”
ブログ・・・http://yseosoft.wordpress.com/
Twitter ・・・@seosoft
劇団四季と AKB48 とディズニーリゾートが好き

3. アジェンダ
Bootstrap とは
Twitter.Bootstrap.MVC4
ASP.NET MVC への適用例

4. Bootstrap とは

5. Bootstrap とは
http://twitter.github.io/bootstrap/

6. Bootstrap とは
http://twitter.
github.io/
bootstrap/
Twitter が
公開した
CSS フレーム
ワーク
クラス指定で
クールな
見た目に！

7. Bootstrap とは
これらのファイルをコピーすればいいだけ

8. 実例でイメージを膨らませる
サイト上に実例が紹介されています
http://twitter.github.io/bootstrap/getting-
started.html#examples
これらのソースコードを
参考にすると良さそう

9. Bootstrap を使うと・・・

10. 要素にクラスを指定

11. Grid System
横方向を 12等分
span1～span12, offset1～offset12 で
カラムの幅を指定
“-fluid” にすると Responsive にも対応

12. Grid System
横方向を 12等分
span1～span12, offset1～offset12 で
カラムの幅を指定
“-fluid” にすると Responsive にも対応

13. コンテナー
“container”
クラス指定
左右に適切な
マージンを
取ってくれます

14. コンポーネント
基本的な HTML 要素と
再利用可能なコンポーネントが
定義されています
サイトに全てのコンポーネントの
コードと表示結果が掲載

15. アイコン
140種類のアイコンが同梱されています

16. Twitter.Bootstrap.MVC4

17. Twitter.Bootstrap.MVC4
Eric Hexter 氏が公開している
ASP.NET MVC4 用の Bootstrap パッケージ
http://lostechies.com/erichexter/2012/11/20/
twitter-bootstrap-mvc4-the-template-nuget-
package-for-asp-net-mvc4-projects/

18. インストール方法
Nuget パッケージの形で公開されています

19. スキャフォールディング
View テンプレートが用意されているので
Controller を作るだけで
Bootstrap なページが完成！
簡単に統一感のあるアプリを
作るのに便利
私はテンプレートの理解が浅く、
Visual Studio が生成する
View を編集しました

20. マスターページ
“_BootstrapLayout.basic.cshtml”
アプリ共通のヘッダー (nav-bar) や
メニュー (nav-lists) はココに

21. ASP.NET MVC への適用例

22. 自動生成される View を Bootstrap 化
クールな Web アプリを一気に作る前に
自動生成される View を “ちょっとクール” に
手順を通して Bootstrap の基本を整理

23. Index View

24. Index View

25. Index View

26. Index View

27. Index View

28. Details View

29. Details View

30. Details View

31. Edit / Create View

32. Edit / Create View

33. Edit / Create View

34. Delete View

35. Delete View

36. Delete View

37. Delete View

38. 参考） スタートページを追加

39. 参考） インラインフォーム

40. まとめ

41. まとめ
Bootstrap を使うとクールな Web アプリが
簡単に作れます
Twitter.Bootstrap.MVC4 パッケージで
MVC4 アプリも簡単に Bootstrap 化
まずは自動生成される View を
“ちょっとクールに” 変更するところから
始めると理解しやすいかも

42. 情報源
 Bootstrap
 本家サイト
 http://twitter.github.io/bootstrap/
 Twitter.Bootstrap.MVC4
 今回使ったパッケージの紹介
 http://lostechies.com/erichexter/2012/11/20/twitter-
bootstrap-mvc4-the-template-nuget-package-for-asp-net-
mvc4-projects/
 ドットインストール
 3分程度の動画 18回で Bootstrap が学べます
 http://dotinstall.com/lessons/basic_twitter_bootstrap_v3