Visual StudioでASP.NET MVC5のプロジェクトを作成
Bootstrapの概要について理解できたと思いますので、Visual Studio 2013でASP.NET MVC5のプロジェクトを作成してみましょう。
Webプロジェクトの作成
まずVisual Studioからプロジェクトの作成を選び、ASP.NET Webアプリケーションの作成を選択します。
ダイアログに従って、ファイルの場所やソリューション名を入力します。
次にテンプレートの種類を選択します。今回はMVCのテンプレートを選択します（Web Formsを選択した場合もBootstrapが使われます）。
Webプロジェクトを実行
それでは、さっそく実行してみましょう。［デバッグ］メニューの［デバッグ開始］からブラウザを起動します。
ブラウザにASP.NETの初期ページが表示されます。ここでブラウザの横幅を広げると、ナビゲーションメニューにHomeやAboutが表示され、Getting startedをはじめとする3つのボックスが3つ横に並んでいることが分かります。次にここでブラウザの横幅を狭めてみましょう。
そうすると、ナビゲーションメニューは非表示となり、右上のボタンをクリックしたときだけ表示されるようになります。また、Getting startedといった説明用ボックスが縦に並んでいることが分かります。
このようなレスポンシブデザインが適用されていることが分かります。
ASP.NET MVCで生成されるひな形ページについて
続けて、Visual Studioに展開されたBootstrapのファイルについて見ていきましょう。
CSSはContensフォルダ配下に、JavaScriptはScriptsフォルダ配下に配置されていることが分かります。ASP.NET MVC4以前に比べてSite.cssのサイズはとてもコンパクトになっています。
Bootstrapのバージョン変更
ASP.NET MVC5でのBootstrapのバージョンは3.0.0です。バージョンを変えたい場合には、NuGetからアップデートできます。
最新バージョンではなく、特定のバージョンを入れたい場合には、［パッケージマネージャコンソール］からバージョン指定でインストールできます。本稿では執筆時点の最新バージョン3.1.1でアップデートします。
PM> Install-Package bootstrap -Version 3.1.1 依存関係 'jquery (>= 1.9.0)' の解決を試みています。 'bootstrap 3.1.1' をインストールしています。 'bootstrap 3.1.1' が正常にインストールされました。 BsSample から 'bootstrap 3.0.0' を削除しています。 'bootstrap 3.0.0' が BsSample から正常に削除されました。 'bootstrap 3.1.1' を BsSample に追加しています。 'bootstrap 3.1.1' が BsSample に正常に追加されました。 'bootstrap 3.0.0' をアンインストールしています。 'bootstrap 3.0.0' が正常にアンインストールされました。
Bootstrapの利用箇所の確認
Bootstrapを使用するには、CSSとJavaScriptを配置して、それらを読み込む設定を記述します。Visual Studioで生成されたコード内で、どのように記述されているか確認してみましょう。
まず、App_StartのBundleConfigクラスを確認します。BundleConfigクラスには、読み込まれる複数のファイルを効率よくまとめるバンドルという仕組みの設定を記述します。なお、バンドルに関する説明はこちらの記事が参考になるでしょう。
public class BundleConfig
{
public static void RegisterBundles(BundleCollection bundles)
{
bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
"~/Scripts/jquery-{version}.js"));
bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
"~/Scripts/jquery.validate*"));
bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(
"~/Scripts/modernizr-*"));
// （1）BootstrapのJavaScriptを読み込み
bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
"~/Scripts/bootstrap.js",
"~/Scripts/respond.js"));
// （2）BootstrapのCSSを読み込み
bundles.Add(new StyleBundle("~/Content/css").Include(
"~/Content/bootstrap.css",
"~/Content/site.css"));
}
}
（1）の部分でbootstrap.jsを、（2）の部分でbootstrap.cssを指定していることが分かります。その前ではBootstrapで使用するJQuery関連のファイルを読み込んでいます。
レイアウトの設定
バンドルしたファイルを呼び出すコードは「Views\Shared\_Layout.cshtml」に記載されています。_Layout.cshtmlは全ページで参照される共通レイアウトです。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta charset="utf-8" />
<!-- スマートフォン向けにviewportをデバイス幅に設定 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>@ViewBag.Title - マイ ASP.NET アプリケーション</title>
<!-- （1）BootstrapのCSSを読み込み -->
@Styles.Render("~/Content/css")
@Scripts.Render("~/bundles/modernizr")
</head>
<body>
<div class="container body-content">
<!-- Index.cshtmlなどを読み込み -->
@RenderBody()
<hr />
<footer>
<p>© @DateTime.Now.Year - マイ ASP.NET アプリケーション</p>
</footer>
</div>
@Scripts.Render("~/bundles/jquery")
<!-- （2）BootstrapのJavaScriptを読み込み -->
@Scripts.Render("~/bundles/bootstrap")
@RenderSection("scripts", required: false)
</body>
</html>
バンドルで指定したBootstrapを、（1）のCSS「~/Content/css」、（2）のJavaScript「~/bundles/bootstrap」で読み込んでいることが分かります。これで、すべてのページでBootstrapが利用できるようになっていることが確認できました。
