ASP.NET MVC-ブートストラップ

この章では、ASP.NETおよびMVCに含まれるフロントエンドフレームワークであるBootstrapについて説明します。 Webアプリケーション用の一般的なフロントエンドツールキットであり、HTML、CSS、およびJavaScriptを使用してユーザーインターフェイスを構築するのに役立ちます。

もともとはTwitterのWeb開発者が個人用に作成したものですが、現在ではオープンソースであり、柔軟性と使いやすさからデザイナーや開発者に人気があります。

Bootstrapを使用して、大きなデスクトップディスプレイから小さなモバイル画面まで、あらゆるものに適したインターフェイスを作成できます。この章では、Bootstrapがレイアウトビューと連携してアプリケーションの外観を構成する方法についても説明します。

ブートストラップは、レイアウト、ボタン、フォーム、メニュー、ウィジェット、画像カルーセル、ラベル、バッジ、タイポグラフィ、およびあらゆる種類の機能に必要なすべての要素を提供します。 BootstrapはすべてHTML、CSS、およびJavaScriptであり、すべてオープンスタンダードであるため、ASP.NET MVCを含む任意のフレームワークで使用できます。新しいMVCプロジェクトを開始すると、Bootstrapが表示されます。つまり、プロジェクトにBootstrap.cssとBootstrap.jsがあります。

新しいASP.NET Webアプリケーションを作成しましょう。

ASP.NET Webアプリケーション

プロジェクトの名前を入力し、「MVCBootstrap」と言って[OK]をクリックします。次のダイアログが表示されます。

MVCBootstrap

このダイアログで、空のテンプレートを選択すると、空のWebアプリケーションが表示され、ブートストラップは表示されません。コントローラや他のスクリプトファイルもありません。

MVCテンプレートを選択し、[OK]をクリックします。 Visual Studioがこのソリューションを作成すると、ダウンロードしてプロジェクトにインストールするパッケージの1つがBootstrap NuGetパッケージになります。 packages.configにアクセスすると確認でき、Bootstrapバージョン3パッケージを確認できます。

ブートストラップバージョン3パッケージ

また、さまざまなcssファイルを含むContentフォルダーを確認できます。

コンテンツフォルダー

このアプリケーションを実行すると、次のページが表示されます。

このアプリケーションを実行

このページが表示されるとき、表示されるレイアウトとスタイルのほとんどは、Bootstrapによって適用されたレイアウトとスタイルです。これには、ASP.NETを宣伝しているディスプレイだけでなく、リンクを含むナビゲーションバーが上部に含まれています。また、使用を開始し、より多くのライブラリとWebホスティングを取得することについてのこれらすべての情報も含まれています。

ブラウザをもう少し拡張すると、それらは実際に並んでレイアウトされ、Bootstrapのレスポンシブデザイン機能の一部になります。

ブートストラップのレスポンシブデザイン機能

コンテンツフォルダの下を見ると、Bootstrap.cssファイルがあります。

Bootstrap.cssファイル

NuGetパッケージは、そのファイルの縮小バージョンも提供しますが、これは少し小さくなっています。スクリプトの下には、Bootstrapのコンポーネントのいくつかに必要なBootstrap.jsがあります。

Bootstrap.js

jQueryへの依存関係があり、幸いなことにjQueryもこのプロジェクトにインストールされており、Bootstrap JavaScriptファイルの縮小バージョンがあります。

ここで問題は、これらすべてがアプリケーションのどこに追加されるのかということです。 View/Shared/_layout.cshtmlの下にあるこのプロジェクトのレイアウトビューであるレイアウトテンプレートにあると予想されるかもしれません。

レイアウトビューコントロール

レイアウトビューは、UIの構造を制御します。以下は、_layout.cshtmlファイルの完全なコードです。

<!DOCTYPE html>
<html>
   <head>
      <meta charset = "utf-8"/>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1.0">
      <title>@ViewBag.Title - My ASP.NET Application</title>
      @Styles.Render("~/Content/css")
      @Scripts.Render("~/bundles/modernizr")
   </head>

   <body>
      <div class = "navbar navbar-inverse navbar-fixed-top">
         <div class = "container">

            <div class = "navbar-header">
               <button type = "button" class = "navbar-toggle" datatoggle =
                  "collapse" data-target = ".navbar-collapse">
                  <span class = "icon-bar"></span>
                  <span class = "icon-bar"></span>
                  <span class = "icon-bar"></span>
               </button>

               @Html.ActionLink("Application name", "Index", "Home", new
                  { area = "" }, new { @class = "navbar-brand" })
            </div>

            <div class = "navbar-collapse collapse">
               <ul class = "nav navbar-nav">
                  <li>@Html.ActionLink("Home", "Index", "Home")</li>
                  <li>@Html.ActionLink("About", "About", "Home")</li>
                  <li>@Html.ActionLink("Contact", "Contact", "Home")</li>
               </ul>

               @Html.Partial("_LoginPartial")
            </div>

         </div>

      </div>
      <div class = "container body-content">
         @RenderBody()
         <hr/>
         <footer>
            <p>© @DateTime.Now.Year - My ASP.NET Application</p>
         </footer>
      </div>

      @Scripts.Render("~/bundles/jquery")
      @Scripts.Render("~/bundles/bootstrap")
      @RenderSection("scripts", required: false)

   </body>
</html>

上記のコードには、注意すべきことが2つあります。最初に、<title>の後に、次のコード行が表示されます。

@Styles.Render("~/Content/css")

Content/cssのStyles.Renderは、実際にはBootstrap.cssファイルが含まれる場所であり、下部に次のコード行が表示されます。

@Scripts.Render("~/bundles/bootstrap")

Bootstrapスクリプトをレンダリングしています。したがって、これらのバンドルの内容を正確に調べるには、App_StartフォルダーにあるBundleConfigファイルに移動する必要があります。

BundleConfigファイル

BundleConfigでは、下部にCSSバンドルにBootstrap.cssとカスタムsite.cssの両方が含まれていることがわかります。

bundles.Add(new StyleBundle("~/Content/css").Include(
   "~/Content/bootstrap.css",
   "~/Content/site.css"));

これは、独自のスタイルシートを追加して、アプリケーションの外観をカスタマイズできる場所です。 Bootstrap.js、および別のJavaScriptファイル、respond.jsを含むCSSバンドルの前に表示されるBootstrapバンドルも確認できます。

bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
   "~/Scripts/bootstrap.js",
   "~/Scripts/respond.js"));

次のコードに示すように、Bootstrap.cssをコメントしましょう。

bundles.Add(new StyleBundle("~/Content/css").Include(
  //"~/Content/bootstrap.css",
   "~/Content/site.css"));

使用可能な唯一のスタイルがsite.cssにあるスタイルであるため、Bootstrapが何をしているのかを知るために、このアプリケーションを再度実行します。

site.cssのスタイル

ご覧のとおり、ページ上部のナビゲーションバーであるレイアウトが失われました。今ではすべてが普通で退屈に見えます。

ここで、Bootstrapのすべてを見てみましょう。 Bootstrapが自動的に行うことはいくつかあり、クラスを追加して適切なHTML構造を持っている場合にBootstrapができることもいくつかあります。 _layout.cshtmlファイルを見ると、次のコードに示すようにnavbarクラスが表示されます。

<div class = "navbar navbar-inverse navbar-fixed-top">
   <div class = "container">

      <div class = "navbar-header">
         <button type = "button" class = "navbar-toggle" datatoggle =
            "collapse" data-target = ".navbar-collapse">
            <span class = "icon-bar"></span>
            <span class = "icon-bar"></span>
            <span class = "icon-bar"></span>
         </button>
         <a class = "navbar-brand" href = "/">Application name</a>
      </div>

      <div class = "navbar-collapse collapse">
         <ul class = "nav navbar-nav">
            <li><a href = "/">Home</a></li>
            <li><a href = "/Home/About">About</a></li>
            <li><a href = "/Home/Contact">Contact</a></li>
         </ul>

         <ul class = "nav navbar-nav navbar-right">
            <li><a href = "/Account/Register" id = "registerLink">Register</a></li>
            <li><a href = "/Account/Login" id = "loginLink">Log in</a></li>
         </ul>

      </div>

   </div>

</div>

これは、navbar、navbar inverse、およびnavbar fixed topのようなBootstrapのCSSクラスです。 navbar inverse、navbar fixed topなどのこれらのクラスをいくつか削除し、Bootstrap.cssのコメントを解除してからアプリケーションを再度実行すると、次の出力が表示されます。

CSSクラス

ナビゲーションバーがまだあることがわかりますが、逆色を使用していないため、白になります。また、ページの上部には貼り付けられません。下にスクロールすると、ナビゲーションバーが上からスクロールして表示されなくなります。

Navbar

Asp.net-mvc-bootstrap

ASP.NET MVC-ブートストラップ