這篇文章主要介紹了ASP.NET MVC 使用Bootstrap的方法，小編覺得蠻不錯的，現在分享給大家，也給大家做個參考。一起跟著小編過來看看吧
身為Web開發者而言，如果不借助任何前端框架，從零開始使用HTML和CSS來建立友善的頁面是非常困難的。特別是對於Windows Form的開發者而言，更是難上加難。
正是因為這樣的原因，Bootstrap誕生了。 Twitter Bootstrap為開發者提供了豐富的CSS樣式、元件、外掛程式、響應式佈局等。同時微軟已經完全整合在ASP.NET MVC 模板中。
Bootstrap結構介紹
你可以透過http://getbootstrap.com.來下載最新版本的Bootstrap。
解壓縮資料夾後，可以看到Bootstrap的檔案分散結構如下，包含3個資料夾：
在ASP.NET MVC 專案中新增Bootstrap檔案
#開啟Visual Studio 2013，建立標準的ASP.NET MVC項目，預設已經自動新增了Bootstrap的所有文件，如下所示：
為網站建立Layout佈局頁
為了讓我們的網站保持一致的風格，我將使用Bootstrap來建立Layout佈局頁。在Views資料夾中建立MVC Layout Page(Razor)佈局文件，如下圖所示：
<link href="@Url.Content(" rel="external nofollow" rel="external nofollow" ~/css/bootstrap.css")" rel="stylesheet">
<script src="@Url.Content("~/js/bootstrap.js")"></script>
使用捆绑打包和压缩来提升网站性能
捆绑打包(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中文網其他相關文章！
