Twitter Bootstrap を使ってみた
非常に亀な記事ですが、久しぶりに HTML, CSS を真面目に触る機会が出来たので Twitter Bootstrap を使ってみました。
コードを載せる云々は今回はせず、自分の雑感を中心に纏めていきたいと思います。
メリット
先ずは実際に使ってみてメリットと感じた部分から。
とにかく速い
何が速いって見た目を形作る速度が半端無く速いです。Bootstrap を読み込み、自分の思い描くレイアウトに近い Demo ページの Style をコピーするだけで殆ど出来た様な物。ここまでの作業に 2 分要らないと思います。後は自分の思った通りの形に変更するだけ。
わかりやすい
ええ、もう本当に分かりやすいんです。特に HTML、CSS の初心者でも触れるように、ページの作り方のサンプル置いてます。テンプレート使って読み込む部分を用意、そして、やりたい事はマニュアルにサンプルコードと実際のレンダリング結果付きで用意されてます。マニュアルは英語で書かれてますがもはや英語を読む必要なく、コードだけ見れば分かる。それほどに簡単でした。特に HTML って簡単に見た目確認出来るんで試すのに変な労力要らないんですよね。便利。
カッコいい
ボタンとか、ラベル、ナビゲーション等のオブジェクトがいちいち格好いいんですよね。良く CSS で書いたボタンとかありますが、そこまで凝るのはめんどくさいけどある程度格好いいのが欲しいって場合には非常にオススメです。配置もある程度思い通りです。
デメリット
と、ここまで誉め称えましたが、逆に使ってて面倒だった点もあげていきます。
細かいところに手を入れにくい
CSS ファイルを読み込む訳なので、ある意味ブラックボックスです。そのため、ひとたびデザインの細かい部分を修正しようと思うと、どこでどんな設定を入れてるのかを探す旅に出る必要があります。ボタンの色や、文字のサイズ、配置場所等々。直にソースを読んでも良いと思いますが、いちいち読むのが面倒くさい僕は Google Chrome のデバッガを使ってハックしてました。細かく指定しても上書き出来ない場合は、HTML ファイルに Style を書いて最優先項目にしてしまうのが一番速かったです。あんまり取りたく無い手段ですが、多少は我慢すべきなんでしょう。Bootstrap を直に弄るのはバグを生みそうなので絶対にしません。
btn-group-vertical が効いてくれない (バグ?)
そのまんまです。ボタンの配置を垂直に行うクラスなんですが、全く反応無しでした。僕の使い方が間違っていたのかもしれませんが、とにかく効いてくれなかったです。
