ASP.NET MVC如何使用Bootstrap的執行個體分析

來源:互聯網
上載者:User
本篇文章主要介紹了ASP.NET MVC 使用Bootstrap的方法,小編覺得挺不錯的,現在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧

作為一名Web開發人員而言,如果不藉助任何前端架構,從零開始使用HTML和CSS來構建友好的頁面是非常困難的。特別是對於Windows Form的開發人員而言,更是難上加難。

正是由於這樣的原因,Bootstrap誕生了。Twitter Bootstrap為開發人員提供了豐富的CSS樣式、組件、外掛程式、響應式布局等。同時微軟已經完全整合在ASP.NET MVC 模板中。

Bootstrap結構介紹

下載最新版本的Bootstrap。

解壓檔案夾後,可以看到Bootstrap的檔案分布結構如下,包含3個檔案夾:

  • css

  • fonts

  • js

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

.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(" rel="external nofollow" rel="external nofollow" ~/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(" rel="external nofollow" rel="external nofollow" ~/css/bootstrap.css")" rel="stylesheet"> <script src="@Url.Content("~/js/bootstrap.js")"></script>*@ @Scripts.Render("~/bootstrap/js") @Styles.Render("~/bootstrap/css") </head> <body> <p>  @*@RenderBody()*@ </p></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,最後使用了打包和壓縮技術來實現對資源檔的打包,從而提高了網站的效能。

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.