Bootstrap：テキスト入力とボタンを組み合わせる

Component の Input groups を使うと、複数の入力要素を組み合わせることができる。
例えばテキスト入力とボタンを組み合わせると以下のようになる。

<div class="input-group">
    <span class="input-group-btn">
        <button class="btn btn-default">更新</button>
    </span>
    <input type="text" class="form-control">
</div>

Bootstrap: 枠付のテーブル

通常のテーブル

<table class="table">
    <tr>
        <td>りんご</td>
        <td>¥100</td>
    </tr>
    <tr>
        <td>みかん</td>
        <td>¥200</td>
    </tr>
</table>

枠付のテーブル

<table class="table">
    <tr>
        <td>りんご</td>
        <td>¥100</td>
    </tr>
    <tr>
        <td>みかん</td>
        <td>¥200</td>
    </tr>
</table>

TinyMCE とBootstrap の CSS が競合する

Bootstrap で作ったページ内に TinyMCE を配置したところ、
表やリンクなどのプラグインで出現するモーダルのサイズが、
通常よりも小さく表示されてしまい文字が読めない状態になった。

BootStrap の CSS を外してみたところ、元の状態で表示された。

<iframe> の中に TinyMCE を入れて CSS を適用されないようにすることも考えたけど面倒そう。
とりあえず慣れている NicEdit は競合しなかったのでこちらを使用することにした。

Bootstrap + TinyMCE の CSS の競合は時間があったら解決できないか調べてみる。

Bootstrap: modal の幅を変える方法

Twitter Bootstrap ではモーダルなど便利なパーツが提供されています。
モーダルはデフォルトのサイズと小さいサイズが準備されているのですが、
中に入れたいコンテンツと微妙に幅が異なっている場合があります。

今回はデフォルトサイズのモーダルで幅が足りなかったので増やしまました。

div id="edit-modal" class="modal fade">
    <div class="modal-dialog">
        <div class="modal-content" style="width:740px; margin-left: -70px;">
            <div class="modal-header"><strong>ヘッダ</strong></div>
            <div class="modal-body">
            </div>
            <div class="modal-footer">
                フッター
            </div>
        </div>
    </div>
</div>

モーダルの白い部分は .modal-content です。
ここの幅を変えるとモーダルの幅が変わります。
モーダルは幅によって中央寄せされないので、
モーダルの幅を増やすとその分右へ伸びてしまいます。
そのため、伸びた分をネガティブマージンで戻して中央へ寄せています。

.modal-content のデフォルトの幅が 600px だったので、
600px から増やした幅の半分をネガティブマージンへ回します。
今回は 600px -> 740px へ 140px 増やしたので、
増分 140px の半分 70px を使用しています。

BootStrap：navbar-fixed-top するときに画面が隠れる

Twitter Bootstrap で navbar-fixed-top を使用すると画面の上に固定されるナビゲーションバーを作ることができるが、そのまま使うとコンテンツがバーの後ろに回りこんでしまい、一部表示されない。

この場合はコンテンツを少し下に下げる必要がある。

body {
    padding-top: 70px;
}

こに詳しく書かれている。
http://getbootstrap.com/components/#navbar-fixed-top