だるろぐ

明日できることは、今日しない。

Twitter Bootstrap はカンタンかつカッコイイ

しばやんの記事を読んで、わしもやってみようかなと思った。

むっちゃカンタンだった。

f:id:daruyanagi:20120112012643p:plain

追加のプラグインを読みこめば、プルダウンリストなんかもできるみたい。

f:id:daruyanagi:20120112012724p:plain

もう一つプラグインを追加してモーダルなダイアログも作ってみた。デフォルトではちょっと小さめなので、CSSで少しデカくしてみた。

f:id:daruyanagi:20120112012824p:plain

ダイアログを画面の真ん中に表示するのは、top: 50%; left: 50% にして、縦横の半分を負のマージンで調整してるっぽい。だから、900x640に拡大するには、

.modal
{
    height: 640px;
    width: 900px;
    margin-top: -320px;
    margin-left: -450px;
}

とでもすればOK。

デザインのできない子にとってはありがたい存在。デザインがカッコいいと、ロジックを書くのも楽しくなるよね!