ASP.NET MVC 使用Bootstrap方法介紹-C#.Net教程-PHP中文網

首頁

後端開發

C#.Net教程

ASP.NET MVC 使用Bootstrap方法介紹

巴扎黑

Sep 20, 2017 am 09:42 AM

asp.netbootstrap介紹

這篇文章主要介紹了ASP.NET MVC 使用Bootstrap的方法，小編覺得蠻不錯的，現在分享給大家，也給大家做個參考。一起跟著小編過來看看吧

身為Web開發者而言，如果不借助任何前端框架，從零開始使用HTML和CSS來建立友善的頁面是非常困難的。特別是對於Windows Form的開發者而言，更是難上加難。

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

Bootstrap結構介紹

你可以透過http://getbootstrap.com.來下載最新版本的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)

建議將所有的字體檔案包含在你的網路應用程式中，因為這能讓你的網站在不同的瀏覽器中顯示正確的字體。

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，最后使用了打包和压缩技术来实现对资源文件的打包，从而提高了网站的性能。

以上是ASP.NET MVC 使用Bootstrap方法介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

C＃.NET的未來：趨勢和機遇Apr 29, 2025 am 12:02 AM

C#.NET的未來趨勢主要集中在雲計算、微服務、AI和機器學習集成以及跨平台開發三個方面。 1）雲計算和微服務：C#.NET通過Azure平台優化雲環境表現，支持構建高效微服務架構。 2）AI和機器學習集成：借助ML.NET庫，C#開發者可在應用中嵌入機器學習模型，推動智能化應用發展。 3）跨平台開發：通過.NETCore和.NET5 ，C#應用可在Windows、Linux和macOS上運行，擴展部署範圍。

C＃.NET開發今天：趨勢和最佳實踐Apr 28, 2025 am 12:25 AM

C#.NET開發的最新動態和最佳實踐包括：1.異步編程提高應用響應性，使用async和await關鍵字簡化非阻塞代碼；2.LINQ提供強大查詢功能，通過延遲執行和表達式樹高效操作數據；3.性能優化建議包括使用異步編程、優化LINQ查詢、合理管理內存、提升代碼可讀性和維護性、以及編寫單元測試。

C＃.NET：使用.NET生態系統構建應用程序Apr 27, 2025 am 12:12 AM

如何利用.NET構建應用？使用.NET構建應用可以通過以下步驟實現：1)了解.NET基礎知識，包括C#語言和跨平台開發支持；2)學習核心概念，如.NET生態系統的組件和工作原理；3)掌握基本和高級用法，從簡單控制台應用到復雜的WebAPI和數據庫操作；4)熟悉常見錯誤與調試技巧，如配置和數據庫連接問題；5)應用性能優化與最佳實踐，如異步編程和緩存。

C＃作為多功能.NET語言：應用程序和示例Apr 26, 2025 am 12:26 AM

C#在企業級應用、遊戲開發、移動應用和Web開發中均有廣泛應用。 1)在企業級應用中，C#常用於ASP.NETCore開發WebAPI。 2)在遊戲開發中，C#與Unity引擎結合，實現角色控制等功能。 3)C#支持多態性和異步編程，提高代碼靈活性和應用性能。

C＃.NET用於網絡，桌面和移動開發Apr 25, 2025 am 12:01 AM

C#和.NET適用於Web、桌面和移動開發。 1)在Web開發中，ASP.NETCore支持跨平台開發。 2)桌面開發使用WPF和WinForms，適用於不同需求。 3)移動開發通過Xamarin實現跨平台應用。

C＃.NET生態系統：框架，庫和工具Apr 24, 2025 am 12:02 AM

C#.NET生態系統提供了豐富的框架和庫，幫助開發者高效構建應用。 1.ASP.NETCore用於構建高性能Web應用，2.EntityFrameworkCore用於數據庫操作。通過理解這些工具的使用和最佳實踐，開發者可以提高應用的質量和性能。

將C＃.NET應用程序部署到Azure/AWS：逐步指南Apr 23, 2025 am 12:06 AM

如何將C#.NET應用部署到Azure或AWS？答案是使用AzureAppService和AWSElasticBeanstalk。 1.在Azure上，使用AzureAppService和AzurePipelines自動化部署。 2.在AWS上，使用AmazonElasticBeanstalk和AWSLambda實現部署和無服務器計算。