作為一名 Web 開發(fā)者而言,如果不借助任何前端框架,從零開始使用 HTML 和 CSS 來構(gòu)建友好的頁面是非常困難的。特別是對(duì)于 Windows Form 的開發(fā)者而言,更是難上加難。 正是由于這樣的原因,Bootstrap 誕生了。Twitter Bootstrap 為開發(fā)者提供了豐富的 CSS 樣式、組件、插件、響應(yīng)式布局等。同時(shí)微軟已經(jīng)完全集成在 ASP.NET MVC 模板中。
你可以通過.來下載最新版本的 Bootstrap。
解壓文件夾后,可以看到 Bootstrap 的文件分布結(jié)構(gòu)如下,包含 3 個(gè)文件夾:
css 文件夾中包含了 4 個(gè).css 文件和 2 個(gè).map 文件。我們只需要將 bootstrap.css 文件包含到項(xiàng)目里這樣就能將 Bootstrap 應(yīng)用到我們的頁面中了。bootstrap.min.css 即為上述 css 的壓縮版本。
.map 文件不必包含到項(xiàng)目里,你可以將其忽略。這些文件被用來作為調(diào)試符號(hào)(類似于Visual Studio 中的.pdb 文件),最終能讓開發(fā)人員在線編輯預(yù)處理文件。
Bootstrap 使用 Font Awesome(一個(gè)字體文件包含了所有的字形圖標(biāo),只為 Bootstrap 設(shè)計(jì))來顯示不同的圖標(biāo)和符號(hào),fonts 文件夾包含了 4 類的不同格式的字體文件:
建議將所有的字體文件包含在你的 Web 應(yīng)用程序中,因?yàn)檫@能讓你的站點(diǎn)在不同的瀏覽器中顯示正確的字體。
EOT 字體格式文件需要 IE9 及以上瀏覽器支持,TTF 是傳統(tǒng)的舊字體格式文件,WOFF 是從 TTF 中壓縮得到的字體格式文件。如果你只需要支持 IE8 之后的瀏覽器、iOS 4 以上版本、同時(shí)支持 Android,那么你只需要包含 WOFF 字體即可。
js 文件夾包含了 3 個(gè)文件,所有的 Bootstrap 插件被包含在 boostrap.js 文件中,bootstrap.min.js 即上述 js 的壓縮版本,npm.js 通過項(xiàng)目構(gòu)建工具 Grunt 自動(dòng)生成。
在引用 boostrap.js 文件之前,請確保你已經(jīng)引用了 JQuery 庫因?yàn)樗械?Bootstrap 插件需要 JQuery。
打開 Visual Studio 2013,創(chuàng)建標(biāo)準(zhǔn)的 ASP.NET MVC 項(xiàng)目,默認(rèn)情況下已經(jīng)自動(dòng)添加了 Bootstrap 的所有文件,如下所示:
http://wiki.jikexueyuan.com/project/think-in-asp-net-mvc/images/Chapter1/1.png" alt="" />
說明微軟對(duì)于 Bootstrap 是非常認(rèn)可的,高度集成在 Visual Studio 中。
值得注意的是,在 Scripts 文件中添加了一個(gè)名為_references.js 的文件,這是一個(gè)非常有用的功能,當(dāng)我們在使用 Bootstrap 等一些前端庫時(shí),它可以幫助 Visual Studio 啟用智能提示。
當(dāng)然我們也可以創(chuàng)建一個(gè)空的 ASP.NET MVC 項(xiàng)目手動(dòng)去添加這些依賴文件,正如下圖所示這樣,選擇空的模板:
http://wiki.jikexueyuan.com/project/think-in-asp-net-mvc/images/Chapter1/2.png" alt="" />
對(duì)于新創(chuàng)建的空白 ASP.NET MVC 項(xiàng)目來說,沒用 Content,F(xiàn)onts,Scripts 文件夾——我們必須手動(dòng)去創(chuàng)建他們,如下所示:
http://wiki.jikexueyuan.com/project/think-in-asp-net-mvc/images/Chapter1/3.png" alt="" />
當(dāng)然,也可以用 Nuget 來自動(dòng)添加 Bootstrap 資源文件。如果使用圖形界面來添加 Bootstrap Nuget Package,則直接搜索 Bootstrap 即可;如果使用 Package Manager Console 來添加Bootstrap Nuget Package,則輸入 Install-Package bootstrap。
為了讓我們的網(wǎng)站保持一致的風(fēng)格,我將使用 Bootstrap 來構(gòu)建 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 會(huì)將虛擬或者相對(duì)路徑轉(zhuǎn)換為絕對(duì)路徑,這樣確保 Bootstrap 資源文件被引用。
新建一個(gè)名為 Home 的 Controller,并且添加默認(rèn) Index 的視圖,使其套用上述的 Layout 布局頁面,如下所示:
http://wiki.jikexueyuan.com/project/think-in-asp-net-mvc/images/Chapter1/5.png" alt="" />
捆綁打包(bundling)和壓縮(minification)是 ASP.NET 中的一項(xiàng)新功能,允許你提升網(wǎng)站加載速度,這是通過限制請求 CSS 和 JavaScript 文件的次數(shù)來完成的。本質(zhì)上是將這類文件結(jié)合到一個(gè)大文件以及刪除所有不必要的字符(比如:注釋、空格、換行)。
對(duì)于大多數(shù)現(xiàn)代瀏覽器訪問一個(gè)主機(jī)名都有 6 個(gè)并發(fā)連接的極限,這意味著如果你在一張頁面上引用了 6 個(gè)以上的 CSS、JavaScript 文件,瀏覽器一次只會(huì)下載 6 個(gè)文件。所以限制資源文件的個(gè)數(shù)是個(gè)好辦法,真正意義上的使命必達(dá),而不是浪費(fèi)在加載資源上。
因?yàn)槲覀儎?chuàng)建的是空的 ASP.NET MVC 項(xiàng)目,所以并沒有自動(dòng)引用與打包相關(guān)的程序集。打開 Nuget Package Manager Console 來完成對(duì) 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 對(duì)象實(shí)例化時(shí)接受一個(gè)參數(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,編譯器會(huì)忽略這些文件因?yàn)樗麄円呀?jīng)被壓縮過了。
在 ASP.NET MVC 布局頁使用 @Styles.Render("~/bootstrap/css")、@Scripts.Render("~/bootstrap/js")來添加對(duì)打包文件的引用。
如果 Visual Studio HTML 編輯器表明無法找到 Styles 和 Scripts 對(duì)象,那就意味著你缺少了命名空間的引用,你可以手動(dòng)在布局頁的頂部添加 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>
當(dāng)然為了通用性,最佳的實(shí)踐是在 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。
當(dāng)然你可以在 Application_Start 方法中設(shè)置 BundleTable.EnableOptimizations = true 來同樣達(dá)到上述效果(它會(huì) override web.config 中的設(shè)置,即使 debug 屬性為 true)。
最后瀏覽網(wǎng)頁,查看源代碼,可以清楚看到打包文件的路徑是之前定義過的相對(duì)路徑,點(diǎn)擊這個(gè)鏈接,瀏覽器為我們打開了經(jīng)過壓縮處理過后的打包文件,如下圖所示:
http://wiki.jikexueyuan.com/project/think-in-asp-net-mvc/images/Chapter1/7.png" alt="" />
在這一章節(jié)中,簡單為大家梳理了 Bootstrap 的體系結(jié)構(gòu),然后怎樣在 ASP.NET MVC 項(xiàng)目中添加 Bootstrap,最后使用了打包和壓縮技術(shù)來實(shí)現(xiàn)對(duì)資源文件的打包,從而提高了網(wǎng)站的性能。