menu
書いてる野郎
orebike@gmail.com
Webアプリにおける基本的なUI部分のルックアンドフィールの趣味の良いプリセット集と思えば良い。
look and feel | class | memo | |
---|---|---|---|
ボタン系 | 要素をボタンっぽい外観にする | btn | aタグとかbuttonタグとかinput buttonにつけるとtwitterのボタンっぽくなる |
ボタンの大きさを変える | btn-large btn-small btn-mini | ボタン化したボタンに対して大きさもある程度変えられる | |
位置系 | 要素を右寄せにする | pull-right | 右寄せになる |
<div class="input-append"> <input type="text"><button class="btn" type="button">OK</button> </div>
ポイントはinputとbuttonを改行もスペースも含まずピッタリとくっつけて記述すること。
あとver 2.0.2ではバグっていてちゃんとくっつかない
このコードを追記するとくっつく。
.input-prepend input, .input-append input, .input-prepend select, .input-append select, .input-prepend .uneditable-input, .input-append .uneditable-input { border-radius: 0 3px 3px 0; margin-bottom: 0; position: relative; vertical-align: middle; }
Bootstrapではbuttonタグをよく使うことになるがそれがformタグの中に入っていた場合submitボタンとして動作してしまい、JavaScriptのトリガーとして使いにくかったりする。
button要素を単なるボタンとして使いたい場合は明示的に
<button class="btn" type="button">hoge</button>
としてボタンとして使いますよと書く。
幅を指定して、左マージンを逆に指定した幅の半分だけ戻す
#hogehoge.modal{ width:900px; margin-left:-450px; }