1. 続・Twitter Bootstrap入門
第27回 HTML5とか勉強会 #html5j
2012/03/13 Toshiaki Maki (@making)

2. 自己紹介
• Toshiaki Maki(@making)
• http://blog.ik.am
• 某大手えすあいあーでR&D
• 社内Javaフレームワークの開発・保守やってます
• Spring Framework好き
• Clojureとか(clojure-ja, Tokyo.clj)
• JavaEE6本の翻訳少しやりました(絶賛発売中)
• http://amzn.to/JavaEE6

3. 以前発表した資料が大好評

4. ホットエントリー
入り！

5. ページを増やして
再発表します

6. 宣伝
• @yusukey主催のTwitter
API勉強会にも是非ご参
加ください

7. コンテンツ
• Bootstrapとは？
• Bootsrapのコンポーネント紹介
• Bootstrapに関するTips

8. Bootstrapとは？
• Twitter社が提供する、Webアプリケーションのフロントエンドツール
• 2012/03/13時点 でversion 2.0.2 ←今日update?
• https://github.com/twitter/bootstrap/wiki/Changelog
• 1.X系からの変更が大きいので移行は注意
• 一般的にCSSフレームワークと呼ばれる

9. CSSフレームワーク？
• 簡単にかっこいいデザインにするための枠組み
• BlueTrip(http://bluetrip.org/)
• HTML Kickstart (http://www.99lime.com)
• などたくさんある
• CSSのclass属性に特定の値を設定するとかっこよ
くなる
• 一部Javascriptを使用することもある

10. なぜbootstrap
• カバー範囲が多い！
• ドキュメントが豊富
• かっこいい(Twitterぽい)
• IE7+にも対応
• レスポンシブ

11. プログラマのデザインって。。

12. ださい。。。
とにかください。

13. bootstrapを使うと!

14. bootstrapを使うと!
Form Table
Button
Pagination
Alert

15. 使い方
• http://twitter.github.com/bootstrap/assets/
bootstrap.zip からダウンロードして
• これだけ（一部javascriptが必要なコン
ポーネントあり）

16. コンポーネント紹介

17. layout
固定レイアウト
流動レイアウト
940px

18. grid
合わせて12
wellは強調させるためのおまけなので不要です

19. navigation

20. alert

21. button

22. label

23. form

24. table
bordered striped

25. tabs

26. breadcrumbs

27. pagination

28. pager

29. progress bars

30. miscellaneous
• page-header,well, hero-unit
• close

31. Javascriptを使用する
コンポーネント

32. jQueryが必要
• 以降は各コンポーネントの最小限な使い方を
• 詳しくは http://twitter.github.com/bootstrap/javascript.html

33. modals

34. dropdown(1/3)

35. dropdown(2/3)

36. dropdown(3/3)

37. tabs

38. tooltips

39. popovers

40. alerts

41. buttons

42. buttons

43. collapse

44. Tips

45. Getting Started
• Example(http://twitter.github.com/
bootstrap/examples.html)をコピーしてカ
スタマイズするのがおすすめ
•

46. レスポンシブ
• 2.0から対応
• 端末に合わせてサイズ
変更

47. Initializrも対応
• http://www.initializr.com/

48. 15秒でテンプレ作成

49. bootstrapの弊害
• 簡単にかっこよく
作れるのでみんな
同じデザインに...
／(^o^)＼

50. LESSでカラーやサイズ変更
• パラメータを変更し動的にCSSを出力
• パラメータ大杉。。

51. Bootswatchでテーマ変更
• http://bootswatch.com/
• カラー変更済みのテーマをダウンロード可

52. さらにカッコいいテーマを
• http://wrapbootstrap.com/
• Bootstrapベースのテーマを有償販売

53. 自分で簡単にカスタマイズ
• http://stylebootstrap.info/

54. jquery-uiのテーマにする
• http://addyosmani.github.com/jquery-ui-
bootstrap/

55. third-party製コンポーネント
• date picker
• http://www.eyecon.ro/bootstrap-
datepicker/

56. formを書くのが面倒な人へ
• formのメタ情報JSONからフォームのHTMLを出
力するサービス作成中
• http://st.ik.am/form-maker (暫定URL)

57. まとめ
• Bootstrapを使うと簡単にWebアプリの見た
目をかっこよくできる
• 様々なコンポーネントあり
• デザインが被りがちなので要差別化
• 差別化サービス続々出現
• 管理画面や簡単なモックアップに重宝

58. ご清聴ありがとう
ございました！

59. ↓からぽちってね！
• http://amzn.to/JavaEE6