BootswatchでBootstrapをオシャレに変身～♪

こんにちは。ザクです。緑で坊主のやつです。

前回の記事では、.Net MVC4アプリケーションにBootstrapをLessとして組み込んでみました。なんでLessにしたかは、この記事で説明することをしたかったからです。

Bootstrapには無料のテーマファイルが公開されていたりします。その代表が「Bootswatch」です。

Bootswatch: Free themes for Bootstrap

どこまでもプログラマーにやさしいですBootstrap！Bootswatchでは16種類のテーマが用意されています。これを先に作成したアプリケーションに導入したいわけですが、Lessなら元のBootstrapをほとんど変更することなく、簡単にテーマが導入できてしまいます。

Previewボタンで、各テーマのデザイン一覧が見れるので見てください。気に入ったテーマがあったら、そこにあるDownloadをクリックしてください。４つのファイルがダウンロードできるようになっていると思います。Lessで利用する場合は、以下の２つのファイルをダウンロードします。

• bootswatch.less
• variables.less

variables.lessは、元のBootstrapにも同じ名前のファイルがあるので、上書きする場合はバックアップを取っておいたほうがよいでしょう。（プロジェクトごとGitで管理してもOKです）テーマの変更はこの２つのファイルを、Content内にあるBootstrapのフォルダにコピーするだけです。

アプリケーションを起動してみましょう。今回はCosmoを選んでみました。ボタンの部分が微妙に変わったのがわかるでしょうか？