作為一名 Web 開發(fā)者而言，如果不借助任何前端框架，從零開始使用 HTML 和 CSS 來構建友好的頁面是非常困難的。特別是對于 Windows Form 的開發(fā)者而言，更是難上加難。 正是由于這樣的原因，Bootstrap 誕生了。Twitter Bootstrap 為開發(fā)者提供了豐富的 CSS 樣式、組件、插件、響應式布局等。同時微軟已經(jīng)完全集成在 ASP.NET MVC 模板中。

Bootstrap 結構介紹

你可以通過.來下載最新版本的 Bootstrap。

解壓文件夾后，可以看到 Bootstrap 的文件分布結構如下，包含 3 個文件夾：

css 文件夾中包含了 4 個.css 文件和 2 個.map 文件。我們只需要將 bootstrap.css 文件包含到項目里這樣就能將 Bootstrap 應用到我們的頁面中了。bootstrap.min.css 即為上述 css 的壓縮版本。

.map 文件不必包含到項目里，你可以將其忽略。這些文件被用來作為調試符號（類似于Visual Studio 中的.pdb 文件），最終能讓開發(fā)人員在線編輯預處理文件。

Bootstrap 使用 Font Awesome（一個字體文件包含了所有的字形圖標，只為 Bootstrap 設計）來顯示不同的圖標和符號，fonts 文件夾包含了 4 類的不同格式的字體文件：

• Embedded OpenType (glyphicons-halflings-regular.eot)
• Scalable Vector Graphics (glyphicons-halflings-regular.svg)
• TrueType font (glyphicons-halflings-regular.ttf)
• Web Open Font Format (glyphicons-halflings-regular.woff)

建議將所有的字體文件包含在你的 Web 應用程序中，因為這能讓你的站點在不同的瀏覽器中顯示正確的字體。

EOT 字體格式文件需要 IE9 及以上瀏覽器支持，TTF 是傳統(tǒng)的舊字體格式文件，WOFF 是從 TTF 中壓縮得到的字體格式文件。如果你只需要支持 IE8 之后的瀏覽器、iOS 4 以上版本、同時支持 Android，那么你只需要包含 WOFF 字體即可。

js 文件夾包含了 3 個文件，所有的 Bootstrap 插件被包含在 boostrap.js 文件中，bootstrap.min.js 即上述 js 的壓縮版本，npm.js 通過項目構建工具 Grunt 自動生成。

在引用 boostrap.js 文件之前，請確保你已經(jīng)引用了 JQuery 庫因為所有的 Bootstrap 插件需要 JQuery。

在 ASP.NET MVC 項目中添加 Bootstrap 文件

打開 Visual Studio 2013，創(chuàng)建標準的 ASP.NET MVC 項目，默認情況下已經(jīng)自動添加了 Bootstrap 的所有文件，如下所示：

http://wiki.jikexueyuan.com/project/think-in-asp-net-mvc/images/Chapter1/1.png" alt="" />

說明微軟對于 Bootstrap 是非常認可的，高度集成在 Visual Studio 中。

值得注意的是，在 Scripts 文件中添加了一個名為_references.js 的文件，這是一個非常有用的功能，當我們在使用 Bootstrap 等一些前端庫時，它可以幫助 Visual Studio 啟用智能提示。

當然我們也可以創(chuàng)建一個空的 ASP.NET MVC 項目手動去添加這些依賴文件，正如下圖所示這樣，選擇空的模板：

http://wiki.jikexueyuan.com/project/think-in-asp-net-mvc/images/Chapter1/2.png" alt="" />

對于新創(chuàng)建的空白 ASP.NET MVC 項目來說，沒用 Content，F(xiàn)onts，Scripts 文件夾——我們必須手動去創(chuàng)建他們，如下所示：

http://wiki.jikexueyuan.com/project/think-in-asp-net-mvc/images/Chapter1/3.png" alt="" />

當然，也可以用 Nuget 來自動添加 Bootstrap 資源文件。如果使用圖形界面來添加 Bootstrap Nuget Package，則直接搜索 Bootstrap 即可；如果使用 Package Manager Console 來添加Bootstrap Nuget Package，則輸入 Install-Package bootstrap。

為網(wǎng)站創(chuàng)建 Layout 布局頁

為了讓我們的網(wǎng)站保持一致的風格，我將使用 Bootstrap 來構建 Layout 布局頁。在 Views 文件夾創(chuàng)建 MVC Layout Page(Razor)布局文件，如下圖所示：

http://wiki.jikexueyuan.com/project/think-in-asp-net-mvc/images/Chapter1/4.png" alt="" />

在新創(chuàng)建的 Layout 布局頁中，使用如下代碼來引用 Bootstrap 資源文件。

<link href="@Url.Content("~/css/bootstrap.css")" rel="stylesheet">
<script src="@Url.Content("~/js/bootstrap.js")"></script>

其中使用 @Url.Content 會將虛擬或者相對路徑轉換為絕對路徑，這樣確保 Bootstrap 資源文件被引用。

新建一個名為 Home 的 Controller，并且添加默認 Index 的視圖，使其套用上述的 Layout 布局頁面，如下所示:

http://wiki.jikexueyuan.com/project/think-in-asp-net-mvc/images/Chapter1/5.png" alt="" />

使用捆綁打包和壓縮來提升網(wǎng)站性能

捆綁打包(bundling)和壓縮(minification)是 ASP.NET 中的一項新功能，允許你提升網(wǎng)站加載速度，這是通過限制請求 CSS 和 JavaScript 文件的次數(shù)來完成的。本質上是將這類文件結合到一個大文件以及刪除所有不必要的字符（比如：注釋、空格、換行）。

對于大多數(shù)現(xiàn)代瀏覽器訪問一個主機名都有 6 個并發(fā)連接的極限，這意味著如果你在一張頁面上引用了 6 個以上的 CSS、JavaScript 文件，瀏覽器一次只會下載 6 個文件。所以限制資源文件的個數(shù)是個好辦法，真正意義上的使命必達，而不是浪費在加載資源上。

在 Bootstrap 項目中使用捆綁打包

因為我們創(chuàng)建的是空的 ASP.NET MVC 項目，所以并沒有自動引用與打包相關的程序集。打開 Nuget Package Manager Console 來完成對 Package 的安裝，使用如下 PowerShell 命令：

install-package Microsoft.AspNet.Web.Optimization 來安裝Microsoft.AspNet.Web.Optimization NuGet package 以及它依賴的 Package，如下所示：

http://wiki.jikexueyuan.com/project/think-in-asp-net-mvc/images/Chapter1/6.png" alt="" />

在安裝完成后，在 App_Start 中添加 BundleConfig 類：

public static void RegisterBundles(BundleCollection bundles)
{
   bundles.Add(new ScriptBundle("~/bootstrap/js").Include(
   "~/js/bootstrap.js",
   "~/js/site.js"));
   bundles.Add(new StyleBundle("~/bootstrap/css").Include(
   "~/css/bootstrap.css",
   "~/css/site.css"));
}

ScriptBundle 和 StyleBundle 對象實例化時接受一個參數(shù)用來代表打包文件的虛擬路徑，Include顧名思義將你需要的文件包含到其中。

然后在 Application_Start 方法中注冊它：

protected void Application_Start()
{
   AreaRegistration.RegisterAllAreas();
   RouteConfig.RegisterRoutes(RouteTable.Routes);
   BundleConfig.RegisterBundles(BundleTable.Bundles);
   BundleTable.EnableOptimizations = true;
}

記住，不要去包含.min 類型的文件到打包文件中，比如 bootstrap.min.css、bootstrap.min.js，編譯器會忽略這些文件因為他們已經(jīng)被壓縮過了。

在 ASP.NET MVC 布局頁使用 @Styles.Render("~/bootstrap/css")、@Scripts.Render("~/bootstrap/js")來添加對打包文件的引用。

如果 Visual Studio HTML 編輯器表明無法找到 Styles 和 Scripts 對象，那就意味著你缺少了命名空間的引用，你可以手動在布局頁的頂部添加 System.Web.Optimization 命名空間，如下代碼所示：

@using System.Web.Optimization
<!DOCTYPE html>
<html>
 <head>
  <meta name="viewport" content="width=device-width" />
  <title>@ViewBag.Title</title>
  @Scripts.Render("~/bootstrap/js")
  @Styles.Render("~/bootstrap/css")
 </head>
 <body>
  <div>
   @*@RenderBody()*@
 </div>
</body>
</html>

當然為了通用性，最佳的實踐是在 Views 文件夾的 web.config 中添加 System.Web.Optimization 名稱空間的引用，如下所示：

<namespaces>
  <add namespace="System.Web.Mvc" />
  <add namespace="System.Web.Mvc.Ajax" />
  <add namespace="System.Web.Mvc.Html" />
  <add namespace="System.Web.Routing" />
  <add namespace="Bootstrap.Web" />
  <add namespace="System.Web.Optimization" />
</namespaces>

測試打包和壓縮

為了使用打包和壓縮，打開網(wǎng)站根目錄下的 web.config 文件，并且更改 compilation 元素的 dubug 屬性為 false，即為 release。

當然你可以在 Application_Start 方法中設置 BundleTable.EnableOptimizations = true 來同樣達到上述效果（它會 override web.config 中的設置，即使 debug 屬性為 true）。

最后瀏覽網(wǎng)頁，查看源代碼，可以清楚看到打包文件的路徑是之前定義過的相對路徑，點擊這個鏈接，瀏覽器為我們打開了經(jīng)過壓縮處理過后的打包文件，如下圖所示：

http://wiki.jikexueyuan.com/project/think-in-asp-net-mvc/images/Chapter1/7.png" alt="" />

小結

在這一章節(jié)中，簡單為大家梳理了 Bootstrap 的體系結構，然后怎樣在 ASP.NET MVC 項目中添加 Bootstrap，最后使用了打包和壓縮技術來實現(xiàn)對資源文件的打包，從而提高了網(wǎng)站的性能。