Twitter Bootstrap入門Toshiaki Maki (@making)

12年2月23日木曜日

自己紹介• Toshiaki Maki(@making)

• http://blog.ik.am

• 某大手えすあいあーでR&D

• 社内Javaフレームワークの開発・保守やってます

• Spring Framework好き

• Clojureとか(clojure-ja, Tokyo.clj)

• JavaEE6本の翻訳少しやりました(3月発売)

• http://books.shoeisha.co.jp/book/b92647.html

12年2月23日木曜日

ここにくるまでの経緯

12年2月23日木曜日

12年2月23日木曜日

コンテンツ

• Bootstrapとは？

• Bootsrapのコンポーネント紹介

• Bootstrapに関するTips

12年2月23日木曜日

Bootstrapとは？• Twitter社が提供する、Webアプリケーションのフロントエンドツール

• 2012/02 でversion 2.0.1

• 1.X系からの変更が大きいので移行は注意

• 一般的にCSSフレームワークと呼ばれる

12年2月23日木曜日

CSSフレームワーク？• 簡単にかっこいいデザインにするための枠組み

• BlueTrip

• 99lime

• などたくさんある• CSSのclass属性に特定の値を設定するとかっこよくなる

• 一部Javascriptを使用することもある

12年2月23日木曜日

なぜbootstrap

• カバー範囲が多い！

• ドキュメントが豊富

• かっこいい(Twitterぽい)

12年2月23日木曜日

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

12年2月23日木曜日

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

12年2月23日木曜日

bootstrapを使うと!

12年2月23日木曜日

bootstrapを使うと!

Form Table

Button Pagination

Alert

12年2月23日木曜日

使い方• http://twitter.github.com/bootstrap/assets/

bootstrap.zip からダウンロードして

• これだけ（一部javascriptが必要なコンポーネントあり）

12年2月23日木曜日

コンポーネント紹介

12年2月23日木曜日

grid

合わせて12

wellは強調させるためのおまけなので不要です12年2月23日木曜日

layout

固定レイアウト940px

流動レイアウト

12年2月23日木曜日

form

12年2月23日木曜日

navigation

12年2月23日木曜日

alert

12年2月23日木曜日

button

12年2月23日木曜日

label

12年2月23日木曜日

table

bordered striped

12年2月23日木曜日

Tips

12年2月23日木曜日

Getting Started

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

•

12年2月23日木曜日

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

12年2月23日木曜日

15秒でテンプレ作成

12年2月23日木曜日

• 簡単にかっこよく作れるのでみんな同じデザインに...

／(^o^)＼

bootstrapの弊害

12年2月23日木曜日

LESSでカラーやサイズ変更

• パラメータを変更し動的にCSSを出力

• パラメータ大杉。。

12年2月23日木曜日

Bootswatchでテーマ変更• http://bootswatch.com/

• カラー変更済みのテーマをダウンロード可

12年2月23日木曜日

さらにカッコいいテーマを

• http://wrapbootstrap.com/

• Bootstrapベースのテーマを有償販売

12年2月23日木曜日

自分で簡単にカスタマイズ

• http://stylebootstrap.info/

12年2月23日木曜日

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

bootstrap/

• 2.0対応は現在進行中

12年2月23日木曜日

formを書くのが面倒な人へ

• formのメタ情報JSONからフォームのHTMLを出力するサービス作成中

• http://st.ik.am/form-maker (暫定URL)

12年2月23日木曜日

まとめ• Bootstrapを使うと簡単にWebアプリの見た目をかっこよくできる

• 様々なコンポーネントあり

• デザインが被りがちなので要差別化

• 差別化サービス続々出現

12年2月23日木曜日