做爲一名Web開發者而言，若是不借助任何前端框架，從零開始使用HTML和CSS來構建友好的頁面是很是困難的。特別是對於Windows Form的開發者而言，更是難上加難。html
正是因爲這樣的緣由，Bootstrap誕生了。Twitter Bootstrap爲開發者提供了豐富的CSS樣式、組件、插件、響應式佈局等。同時微軟已經徹底集成在ASP.NET MVC 模板中。前端
Bootstrap結構介紹
你能夠經過http://getbootstrap.com.來下載最新版本的Bootstrap。web
解壓文件夾後，能夠看到Bootstrap的文件分佈結構以下，包含3個文件夾：npm
- css
- fonts
- js
css文件夾中包含了4個.css文件和2個.map文件。咱們只須要將bootstrap.css文件包含到項目裏這樣就能將Bootstrap應用到咱們的頁面中了。bootstrap.min.css即爲上述css的壓縮版本。bootstrap
.map文件沒必要包含到項目裏，你能夠將其忽略。這些文件被用來做爲調試符號（相似於Visual Studio中的.pdb文件），最終能讓開發人員在線編輯預處理文件。瀏覽器
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是傳統的舊字體格式文件，WOFF是從TTF中壓縮獲得的字體格式文件。若是你只須要支持IE8以後的瀏覽器、iOS 4以上版本、同時支持Android，那麼你只須要包含WOFF字體便可。框架
js文件夾包含了3個文件，全部的Bootstrap插件被包含在boostrap.js文件中，bootstrap.min.js即上述js的壓縮版本，npm.js經過項目構建工具Grunt自動生成。
在引用boostrap.js文件以前，請確保你已經引用了JQuery庫由於全部的Bootstrap插件須要JQuery。
在ASP.NET MVC 項目中添加Bootstrap文件
打開Visual Studio 2013，建立標準的ASP.NET MVC項目，默認狀況下已經自動添加了Bootstrap的全部文件，以下所示：
說明微軟對於Bootstrap是很是承認的，高度集成在Visual Studio中。
值得注意的是，在Scripts文件中添加了一個名爲_references.js的文件，這是一個很是有用的功能，當咱們在使用Bootstrap等一些前端庫時，它能夠幫助Visual Studio啓用智能提示。
固然咱們也能夠建立一個空的ASP.NET MVC項目手動去添加這些依賴文件，正以下圖所示這樣，選擇空的模板：
對於新建立的空白ASP.NET MVC項目來講，沒用Content，Fonts，Scripts文件夾——咱們必須手動去建立他們，以下所示：
固然，也能夠用Nuget來自動添加Bootstrap資源文件。若是使用圖形界面來添加Bootstrap Nuget Package，則直接搜索Bootstrap便可；若是使用Package Manager Console來添加Bootstrap Nuget Package，則輸入Install-Package bootstrap。
爲網站建立Layout佈局頁
爲了讓咱們的網站保持一致的風格，我將使用Bootstrap來構建Layout佈局頁。在Views文件夾建立MVC Layout Page(Razor)佈局文件，以下圖所示：
在新建立的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佈局頁面，以下所示:
使用捆綁打包和壓縮來提高網站性能
捆綁打包(bundling)和壓縮(minification)是ASP.NET中的一項新功能，容許你提高網站加載速度，這是經過限制請求CSS和JavaScript文件的次數來完成的。本質上是將這類文件結合到一個大文件以及刪除全部沒必要要的字符（好比：註釋、空格、換行）。
對於大多數現代瀏覽器訪問一個主機名都有6個併發鏈接的極限，這意味着若是你在一張頁面上引用了6個以上的CSS、JavaScript文件，瀏覽器一次只會下載6個文件。因此限制資源文件的個數是個好辦法，真正意義上的使命必達，而不是浪費在加載資源上。
在Bootstrap項目中使用捆綁打包
由於咱們建立的是空的ASP.NET MVC項目，因此並無自動引用與打包相關的程序集。打開Nuget Package Manager Console來完成對Package的安裝，使用以下PowerShell命令：
install-package Microsoft.AspNet.Web.Optimization 來安裝Microsoft.AspNet.Web.Optimization NuGet package以及它依賴的Package，以下所示：
在安裝完成後，在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對象實例化時接受一個參數用來表明打包文件的虛擬路徑，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，編譯器會忽略這些文件由於他們已經被壓縮過了。
在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>
@*<link href="@Url.Content("~/css/bootstrap.css")" rel="stylesheet">
<script src="@Url.Content("~/js/bootstrap.js")"></script>*@
@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>
測試打包和壓縮
爲了使用打包和壓縮，打開網站根目錄下的web.config文件，而且更改compilation元素的dubug屬性爲false，即爲release。
<system.web> <compilation debug="false" targetFramework="4.5" /> <httpRuntime targetFramework="4.5" /> </system.web>
固然你能夠在Application_Start方法中設置BundleTable.EnableOptimizations = true來一樣達到上述效果（它會override web.config中的設置，即便debug屬性爲true）。
最後瀏覽網頁，查看源代碼，能夠清楚看到打包文件的路徑是以前定義過的相對路徑，點擊這個連接，瀏覽器爲咱們打開了通過壓縮處理事後的打包文件，以下圖所示：
小結
在這一章節中，簡單爲你們梳理了Bootstrap的體系結構，而後怎樣在ASP.NET MVC項目中添加Bootstrap，最後使用了打包和壓縮技術來實現對資源文件的打包，從而提升了網站的性能。