Twitter Bootstrap

Twitter Bootstrap

Twitter Bootstrapとは

Webアプリにおける基本的なUI部分のルックアンドフィールの趣味の良いプリセット集と思えば良い。

style

look and feelclass 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;
}

form中でbuttonタグを使うとsubmitされてしまう

Bootstrapではbuttonタグをよく使うことになるがそれがformタグの中に入っていた場合submitボタンとして動作してしまい、JavaScriptのトリガーとして使いにくかったりする。

button要素を単なるボタンとして使いたい場合は明示的に

<button class="btn" type="button">hoge</button>

としてボタンとして使いますよと書く。

modalダイアログに幅指定する

幅を指定して、左マージンを逆に指定した幅の半分だけ戻す

#hogehoge.modal{
    width:900px;
    margin-left:-450px;
}

関連ページ

参考サイト

バージョン

  • 2012-02-06

タグ

twitter_bootstrap.txt · 最終更新: 2014-07-11 13:10 by ore