Bootstrapのバックグランドの色を変えたい

何事も、はじめは真似からということで、クックパッドのトップ画面を参考に自分のサイトのトップ画面を作ろうとしている。 Bootstrap3を採用してみる。

でも、いきなり躓く。 バックグラウンドの色をかえたら うえのメニューのところも色が 変わってしまった。

html, body {
height: 100%;
width: 100%;
background-color: #C3EDFD;
}

さて、どうやるんだ？

Twitter Bootstrap3を試す Bootstrap 3 RC1をGruntで効率的にカスタマイズ

にネタがありました。

今まで、私はnode.jsを避けて通ってきましたが。 やらないとこれはやばいのでインストール。 bootstrap3をソースからダウンロード

そして、lessというフォルダにあるvariable.less

@body-bg:               #fff;
↓
@body-bg:               #C3EDFD;

あとは、ナビバーを下記のようにした。

    <nav class="navbar navbar-default" role="navigation">
        <ul class="nav nav-pills">
            <li><a href="/">トップ</a></li>
            <li><a href="/register">コース登録</a></li>
            <li><a href="/search">コース検索</a></li>
        </ul>
    </nav>

これで、 gruntコマンドを発行してコンパイルしてあげて ＣＳＳが吐き出されるので置換してあげれば完成。