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>
<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，最后使用了打包和压缩技术来实现对资源文件的打包，从而提高了网站的性能。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。