ASP.NET MVC - Bootstrap

本章我們將學習 Bootstrap，這是一個現在包含在 ASP.NET 和 MVC 中的前端框架。它是一個流行的 Web 應用程式前端工具包，將幫助您使用 HTML、CSS 和 JavaScript 構建使用者介面。

它最初由 Twitter 的 Web 開發人員建立用於個人用途，但現在它是開源的，並且由於其靈活性和易用性而受到設計師和開發人員的歡迎。

您可以使用 Bootstrap 建立一個在大型桌面顯示器到小型移動螢幕上看起來都很好的介面。在本章中，我們還將瞭解 Bootstrap 如何與您的佈局檢視一起工作以構建應用程式的外觀。

Bootstrap 提供了佈局、按鈕、表單、選單、視窗小部件、圖片輪播、標籤、徽章、排版和各種功能所需的所有元件。由於 Bootstrap 完全由 HTML、CSS 和 JavaScript（所有開放標準）組成，因此您可以將其與任何框架（包括 ASP.NET MVC）一起使用。當您啟動一個新的 MVC 專案時，Bootstrap 將存在，這意味著您會在專案中找到 Bootstrap.css 和 Bootstrap.js。

讓我們建立一個新的 ASP.NET Web 應用程式。

輸入專案名稱，例如“MVCBootstrap”，然後單擊“確定”。您將看到以下對話方塊。

在此對話方塊中，如果您選擇空模板，您將獲得一個空的 Web 應用程式，並且不會存在 Bootstrap。也不會存在任何控制器或任何其他指令碼檔案。

現在選擇 MVC 模板並單擊“確定”。當 Visual Studio 建立此解決方案時，它將下載並安裝到專案中的包之一將是 Bootstrap NuGet 包。您可以透過轉到 packages.config 來驗證，您可以在其中看到 Bootstrap 版本 3 包。

您還可以看到包含不同 css 檔案的 Content 資料夾。

執行此應用程式，您將看到以下頁面。

當此頁面出現時，您看到的大部分佈局和樣式都是 Bootstrap 應用的佈局和樣式。它包括頂部的導航欄以及連結，以及宣傳 ASP.NET 的顯示。它還包括所有這些關於入門和獲取更多庫和 Web 託管的片段。

如果您稍微展開瀏覽器，它們實際上將並排排列，這是 Bootstrap 響應式設計功能的一部分。

如果您檢視 Content 資料夾，您會找到 Bootstrap.css 檔案。

NuGet 包還提供了該檔案的小型化版本，該版本略小一些。在 scripts 下，您會找到 Bootstrap.js，這是 Bootstrap 的某些元件所必需的。

它確實依賴於 jQuery，幸運的是 jQuery 也安裝在這個專案中，並且有一個小型化的 Bootstrap JavaScript 檔案版本。

現在問題是，所有這些都在應用程式中的哪裡新增？您可能期望它位於此專案的佈局模板（佈局檢視）中，該模板位於 View/Shared/_layout.cshtml 下。

佈局檢視控制 UI 的結構。以下是 _layout.cshtml 檔案中的完整程式碼。（此處應插入_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>

在上面的程式碼中，有兩點需要注意。首先，在 <title> 之後，您將看到以下程式碼行。

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

Content/css 的 Styles.Render 實際上是包含 Bootstrap.css 檔案的地方，在底部，您將看到以下程式碼行。

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

它正在呈現 Bootstrap 指令碼。因此，為了找出這些捆綁包中究竟有什麼內容，我們必須進入 BundleConfig 檔案，該檔案位於 App_Start 資料夾中。

在 BundleConfig 中，您可以看到底部 CSS 捆綁包同時包含 Bootstrap.css 和我們的自定義 site.css。

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

這是一個我們可以新增自己的樣式表以自定義應用程式外觀的地方。您還可以看到 Bootstrap 捆綁包出現在 CSS 捆綁包之前，該捆綁包包含 Bootstrap.js 和另一個 JavaScript 檔案 respond.js。

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"));

再次執行此應用程式，讓您瞭解 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>

它是來自 Bootstrap 的 CSS 類，例如 navbar、navbar inverse 和 navbar fixed top。如果您刪除其中一些類，例如 navbar inverse、navbar fixed top，並取消註釋 Bootstrap.css，然後再次執行您的應用程式，您將看到以下輸出。

您將看到我們仍然有一個 navbar，但現在它不使用反向顏色，所以它是白色的。它也不會粘在頁面的頂部。當您向下滾動時，導航欄會從頂部滾動掉，您將再也看不到它。

列印頁面