Twitter Bootstrapを使う上で知っておいたほうがいいこと

　一昨日、HTML5とか勉強会に参加していた際にTwitter　Bootstrapについてつぷやいたことをまとめておきます。

横並びのレイアウトを意識しよう

　
　webページの画面のレイアウトというと縦に列を並べた上で横方向の配置を行うマルチカラムレイアウトが思い浮かびますが、Twitter Bootstrapは横一列にきれいに並べることを意識して作られています。
　下の画像は公式サンプルを切り出したものですが、横の列が積み重なっているのがわかると思います。
　

　このように、デザインする時には横並びのレイアウトを意識することが重要です

ヘッダーが命

　Twitter Bootstrapを使ったテンプレートはどれも似たような印象になってしまうのですが、その印象のほとんどヘッダー部分が担っています。
　これを外すか、あるいはいまはやりの大きなグラデーションの入ったヘッダーに変えましょう、下の画像は公式サンプルからヘッダーを取っただけですが、それでも印象が大きく変わっています。

JSのコードも参考になる

　付属のJSですがこれも非常に参考になります。jQueryにどう複雑さを押し付け、コードをクリーンかつシンプルに保つか、そのひとつの指標になります。

まとめ

　Twitter Bootstrapは自由度の低さを代償にお手軽に作るためにあるような印象がありますが、そのルールさえ理解しどこに労力を注ぐべきかを判断できるようになれば意外なほどの自由度をもつ強力なツールになります。
　Ruby on Railsと同じようにありもののツールとそのルールを使っていかに楽をしながらクリエイティブに作るか、それを考えるのに労力の大半を費やすようになった今を象徴するようなプロダクトです。