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

続・Twitter bootstrap入門 #html5j

6,286
-1

Published on

Published in: Technology
0 Comments
37 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
6,286
On Slideshare
0
From Embeds
0
Number of Embeds
8
Actions
Shares
0
Downloads
67
Comments
0
Likes
37
Embeds 0
No embeds

No notes for slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • 続・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
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×