Your SlideShare is downloading. ×
続・Twitter bootstrap入門 #html5j
続・Twitter bootstrap入門 #html5j
続・Twitter bootstrap入門 #html5j
続・Twitter bootstrap入門 #html5j
続・Twitter bootstrap入門 #html5j
続・Twitter bootstrap入門 #html5j
続・Twitter bootstrap入門 #html5j
続・Twitter bootstrap入門 #html5j
続・Twitter bootstrap入門 #html5j
続・Twitter bootstrap入門 #html5j
続・Twitter bootstrap入門 #html5j
続・Twitter bootstrap入門 #html5j
続・Twitter bootstrap入門 #html5j
続・Twitter bootstrap入門 #html5j
続・Twitter bootstrap入門 #html5j
続・Twitter bootstrap入門 #html5j
続・Twitter bootstrap入門 #html5j
続・Twitter bootstrap入門 #html5j
続・Twitter bootstrap入門 #html5j
続・Twitter bootstrap入門 #html5j
続・Twitter bootstrap入門 #html5j
続・Twitter bootstrap入門 #html5j
続・Twitter bootstrap入門 #html5j
続・Twitter bootstrap入門 #html5j
続・Twitter bootstrap入門 #html5j
続・Twitter bootstrap入門 #html5j
続・Twitter bootstrap入門 #html5j
続・Twitter bootstrap入門 #html5j
続・Twitter bootstrap入門 #html5j
続・Twitter bootstrap入門 #html5j
続・Twitter bootstrap入門 #html5j
続・Twitter bootstrap入門 #html5j
続・Twitter bootstrap入門 #html5j
続・Twitter bootstrap入門 #html5j
続・Twitter bootstrap入門 #html5j
続・Twitter bootstrap入門 #html5j
続・Twitter bootstrap入門 #html5j
続・Twitter bootstrap入門 #html5j
続・Twitter bootstrap入門 #html5j
続・Twitter bootstrap入門 #html5j
続・Twitter bootstrap入門 #html5j
続・Twitter bootstrap入門 #html5j
続・Twitter bootstrap入門 #html5j
続・Twitter bootstrap入門 #html5j
続・Twitter bootstrap入門 #html5j
続・Twitter bootstrap入門 #html5j
続・Twitter bootstrap入門 #html5j
続・Twitter bootstrap入門 #html5j
続・Twitter bootstrap入門 #html5j
続・Twitter bootstrap入門 #html5j
続・Twitter bootstrap入門 #html5j
続・Twitter bootstrap入門 #html5j
続・Twitter bootstrap入門 #html5j
続・Twitter bootstrap入門 #html5j
続・Twitter bootstrap入門 #html5j
続・Twitter bootstrap入門 #html5j
続・Twitter bootstrap入門 #html5j
続・Twitter bootstrap入門 #html5j
続・Twitter bootstrap入門 #html5j
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

続・Twitter bootstrap入門 #html5j

5,358

Published on

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

No Downloads
Views
Total Views
5,358
On Slideshare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
64
Comments
0
Likes
36
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
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
  • Transcript

    • 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合わせて12wellは強調させるためのおまけなので不要です
    • 19. navigation
    • 20. alert
    • 21. button
    • 22. label
    • 23. form
    • 24. tablebordered 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

    ×