做为一名Web开发者而言，若是不借助任何前端框架，从零开始使用HTML和CSS来构建友好的页面是很是困难的。特别是对于Windows Form的开发者而言，更是难上加难。html
正是因为这样的缘由，Bootstrap诞生了。Twitter Bootstrap为开发者提供了丰富的CSS样式、组件、插件、响应式布局等。同时微软已经彻底集成在ASP.NET MVC 模板中。前端
Bootstrap结构介绍
你能够经过http://getbootstrap.com.来下载最新版本的Bootstrap。web
解压文件夹后，能够看到Bootstrap的文件分布结构以下，包含3个文件夹：npm
- css
- fonts
- js
css文件夹中包含了4个.css文件和2个.map文件。咱们只须要将bootstrap.css文件包含到项目里这样就能将Bootstrap应用到咱们的页面中了。bootstrap.min.css即为上述css的压缩版本。bootstrap
.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("~/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("~/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，最后使用了打包和压缩技术来实现对资源文件的打包，从而提升了网站的性能。