Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

続・Twitter bootstrap入門 #html5j

7,709 views

Published on

Published in: Technology
  • Be the first to comment

続・Twitter bootstrap入門 #html5j

  1. 1. 続・Twitter Bootstrap入門 第27回 HTML5とか勉強会 #html5j 2012/03/13 Toshiaki Maki (@making)
  2. 2. 自己紹介• Toshiaki Maki(@making)• http://blog.ik.am• 某大手えすあいあーでR&D • 社内Javaフレームワークの開発・保守やってます • Spring Framework好き• Clojureとか(clojure-ja, Tokyo.clj)• JavaEE6本の翻訳少しやりました(絶賛発売中) • http://amzn.to/JavaEE6
  3. 3. 以前発表した資料が大好評
  4. 4. ホットエントリー 入り!
  5. 5. ページを増やして再発表します
  6. 6. 宣伝• @yusukey主催のTwitter API勉強会にも是非ご参 加ください
  7. 7. コンテンツ• Bootstrapとは?• Bootsrapのコンポーネント紹介• Bootstrapに関するTips
  8. 8. Bootstrapとは?• Twitter社が提供する、Webアプリケーションのフロントエンドツール • 2012/03/13時点 でversion 2.0.2 ←今日update? • https://github.com/twitter/bootstrap/wiki/Changelog • 1.X系からの変更が大きいので移行は注意• 一般的にCSSフレームワークと呼ばれる
  9. 9. CSSフレームワーク?• 簡単にかっこいいデザインにするための枠組み • BlueTrip(http://bluetrip.org/) • HTML Kickstart (http://www.99lime.com) • などたくさんある• CSSのclass属性に特定の値を設定するとかっこよ くなる• 一部Javascriptを使用することもある
  10. 10. なぜbootstrap• カバー範囲が多い!• ドキュメントが豊富• かっこいい(Twitterぽい)• IE7+にも対応• レスポンシブ
  11. 11. プログラマのデザインって。。
  12. 12. ださい。。。とにかください。
  13. 13. bootstrapを使うと!
  14. 14. bootstrapを使うと! Form Table Button Pagination Alert
  15. 15. 使い方• http://twitter.github.com/bootstrap/assets/ bootstrap.zip からダウンロードして• これだけ(一部javascriptが必要なコン ポーネントあり)
  16. 16. コンポーネント紹介
  17. 17. layout固定レイアウト 流動レイアウト 940px
  18. 18. grid合わせて12wellは強調させるためのおまけなので不要です
  19. 19. navigation
  20. 20. alert
  21. 21. button
  22. 22. label
  23. 23. form
  24. 24. tablebordered striped
  25. 25. tabs
  26. 26. breadcrumbs
  27. 27. pagination
  28. 28. pager
  29. 29. progress bars
  30. 30. miscellaneous• page-header,well, hero-unit• close
  31. 31. Javascriptを使用する コンポーネント
  32. 32. jQueryが必要• 以降は各コンポーネントの最小限な使い方を• 詳しくは http://twitter.github.com/bootstrap/javascript.html
  33. 33. modals
  34. 34. dropdown(1/3)
  35. 35. dropdown(2/3)
  36. 36. dropdown(3/3)
  37. 37. tabs
  38. 38. tooltips
  39. 39. popovers
  40. 40. alerts
  41. 41. buttons
  42. 42. buttons
  43. 43. collapse
  44. 44. Tips
  45. 45. Getting Started• Example(http://twitter.github.com/ bootstrap/examples.html)をコピーしてカ スタマイズするのがおすすめ•
  46. 46. レスポンシブ• 2.0から対応• 端末に合わせてサイズ 変更
  47. 47. Initializrも対応• http://www.initializr.com/
  48. 48. 15秒でテンプレ作成
  49. 49. bootstrapの弊害• 簡単にかっこよく 作れるのでみんな 同じデザインに... /(^o^)\
  50. 50. LESSでカラーやサイズ変更• パラメータを変更し動的にCSSを出力• パラメータ大杉。。
  51. 51. Bootswatchでテーマ変更• http://bootswatch.com/• カラー変更済みのテーマをダウンロード可
  52. 52. さらにカッコいいテーマを• http://wrapbootstrap.com/• Bootstrapベースのテーマを有償販売
  53. 53. 自分で簡単にカスタマイズ• http://stylebootstrap.info/
  54. 54. jquery-uiのテーマにする• http://addyosmani.github.com/jquery-ui- bootstrap/
  55. 55. third-party製コンポーネント• date picker • http://www.eyecon.ro/bootstrap- datepicker/
  56. 56. formを書くのが面倒な人へ• formのメタ情報JSONからフォームのHTMLを出 力するサービス作成中• http://st.ik.am/form-maker (暫定URL)
  57. 57. まとめ• Bootstrapを使うと簡単にWebアプリの見た 目をかっこよくできる• 様々なコンポーネントあり• デザインが被りがちなので要差別化 • 差別化サービス続々出現• 管理画面や簡単なモックアップに重宝
  58. 58. ご清聴ありがとうございました!
  59. 59. ↓からぽちってね!• http://amzn.to/JavaEE6

×