鈍足ランナーのIT日記

走るのが好きな5流のITエンジニアのブログ。

趣味の範囲は広いけど、どれも中途半端なクソブロガー楽しめるWebアプリを作ってあっと言わせたい。サーバーサイドPerl(Mojolicious)、クライアントサイドVue.js。Arduinoにも触手を伸ばす予定。

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

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

f:id:kechiya:20130912074442p:plain

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

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コマンドを発行してコンパイルしてあげて CSSが吐き出されるので置換してあげれば完成。