1. まとめトップ

Twitter Bootstrap入門 | デザインが苦手なWebサービス開発者へ

Twitter社が提供する、Webアプリケーションのフロントエンドツール…こんな説明だと難しそうだと思うかもしれませんが、まずは触ってみてください!カンタンに優れたデザインのWebサイトが作れます。

更新日: 2012年10月12日

akiueoさん

  • このまとめをはてなブックマークに追加
15 お気に入り 11897 view
お気に入り追加

Bootstrapとは?

•Twitter社が提供する、Webアプリケーションのフロントエンドツール
•2012/02でversion2.0.1
•1.X系からの変更が大きいので移行は注意
•一般的にCSSフレームワークと呼ばれる

CSSフレームワーク?

CSSフレームワークとはlink要素で読み込むだけで、主要な要素や汎用クラスのデザインが適用される便利CSS

•簡単にかっこいいデザインにするための枠組み
•BlueTrip•99lime•などたくさんある
•CSSのclass属性に特定の値を設定するとかっこよくなる
•一部Javascriptを使用することもある

なぜbootstrap

•カバー範囲が多い!
•ドキュメントが豊富
•かっこいい(Twitterぽい)

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

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

使い方

http://twitter.github.com/bootstrap/assets/bootstrap.zipからダウンロードして、
index.htmlに
<link rel=stylesheet href=css/bootstrap.css type=text/css>と記載するだけ。

(一部javascriptが必要なコンポーネントあり)

とにかくカンタンに始めたいよ!って方はここを見て!

Tips

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

Initializrも対応

http://www.initializr.com/

15秒でテンプレ作成できます

bootstrapの弊害

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

LESSでカラーやサイズ変更

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

Bootswatchでテーマ変更

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

1 2





料理、Web関連、ライフハック、エンタメ系。