在本章中，我们将看看现在包含在ASP.NET和MVC中的前端框架Bootstrap。这是一个流行的Web应用程序前端工具包，将帮助我们建立一个HTML，CSS和JavaScript的用户界面。
它最初是由Twitter的网站开发人员为个人使用而创建的，但是由于其灵活性和易用性，它现在是开源的，并且已经深受设计人员和开发人员的欢迎。
您可以使用Bootstrap创建一个从小型移动屏幕到大型桌应用的界面。在本章中，我们还将介绍Bootstrap如何与布局视图一起工作来构造应用程序的外观。
Bootstrap提供布局，按钮，表单，菜单，小部件，图片轮播，标签，徽章，排版以及各种功能所需的所有部分。由于Bootstrap都是HTML，CSS和JavaScript，所有开放的标准，你可以使用任何框架，包括ASP.NET MVC。当你开始一个新的MVC项目时，Bootstrap将会出现，在项目中可以找到Bootstrap.css 和Bootstrap.js 。
我们来创建一个新的ASP.NET Web应用程序。填写项目的名称：MVCBootstrap，然后单击确定 ，会看到下面的对话框。
在这个对话框中，如果选择了空的模板，会得到一个空的web应用程序，并且不会有Bootstrap ，不会有任何控制器或任何其他脚本文件。
现在选择MVC模板，然后单击确定 。 当Visual Studio创建这个解决方案时，它将下载并安装到项目中的一个包将成为Bootstrap NuGet包。可以通过到packages.config 进行验证，可以看到有Bootstrap版本3 的包，如下图所示 -
还可以看到包含不同 css 文件的 Content 文件夹。
运行这个应用程序，会看到下面的页面。
出现此页面时，看到的大部分布局和样式都是由 Bootstrap 应用的布局和样式。 它包括顶部的导航栏，链接以及广告ASP.NET的显示。它还包括所有这些部分，关于入门和获得更多的类库和虚拟主机。
如果只是稍微拉伸一下浏览器，那么这些浏览器实际上并排放置，这是Bootstrap 响应式设计功能的一部分。
如果查看Content文件夹，那么应该会看到有一个Bootstrap.css 文件。
NuGet软件包还提供了一个缩小版本的文件。 在Scripts目录下，应该有一个：Bootstrap.js 文件，这是Bootstrap的一些组件所必需的。
它确实依赖于jQuery，幸运的是jQuery也安装在这个项目中，并且有一个缩小版的Bootstrap JavaScript文件。
现在的问题是，所有这些在应用程序中添加了哪里？ 可能您期望它在布局模板中，位于View/Shared/_layout.cshtml 下的此项目的布局视图。
布局视图控制着用户界面的结构。 以下是_layout.cshtml文件中的完整代码。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>@ViewBag.Title - 我的 ASP.NET 应用程序</title>
@Styles.Render("~/Content/css")
@Scripts.Render("~/bundles/modernizr")
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
@Html.ActionLink("应用程序名称", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" })
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>@Html.ActionLink("主页", "Index", "Home")</li>
<li>@Html.ActionLink("关于", "About", "Home")</li>
<li>@Html.ActionLink("联系方式", "Contact", "Home")</li>
</ul>
</div>
</div>
</div>
<div class="container body-content">
@RenderBody()
<hr />
<footer>
<p>© @DateTime.Now.Year - 我的 ASP.NET 应用程序</p>
</footer>
</div>
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/bootstrap")
@RenderSection("scripts", required: false)
</body>
</html>
在上面的代码中有两点需要注意。 首先在<title>之后，看到下面这行代码。
@Styles.Render("~/Content/css")
Styles.Render对于 Content/css 实际上是Bootstrap.css文件将被包含的地方，在底部，会看到下面这行代码 -
@Scripts.Render("~/bundles/bootstrap")
它正在渲染引导脚本，找出这些包里面究竟是什么，打开App_Start文件夹中的BundleConfig.cs 文件，内容如下所示 -
在BundleConfig.cs 文件中，可以从底部看到CSS包包含了Bootstrap.css 和自定义的site.css 。如下所示 -
bundles.Add(new StyleBundle("~/Content/css").Include(
"~/Content/bootstrap.css",
"~/Content/site.css"));
这是我们添加自己的样式表来定制应用程序外观的地方。还可以看到在包含Bootstrap.js 的CSS包之前出现的Bootstrap包，以及另一个JavaScript文件respond.js。
bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
"~/Scripts/bootstrap.js",
"~/Scripts/respond.js"));
下面来注释掉Bootstrap.css 文件，如下面的代码所示 -
bundles.Add(new StyleBundle("~/Content/css").Include(
//"~/Content/bootstrap.css",
"~/Content/site.css"));
再次运行此应用程序，只是为了让您了解Bootstrap的功能，因为现在唯一可用的样式是site.css 文件中的样式。得到结果如下 -
正如上面所看到的，失去了页面顶部的导航栏。
现在来看看Bootstrap是什么。Bootstrap只是自动执行一些操作，当添加类并具有正确的HTML结构时，Bootstrap可为您做一些事情。 如果查看_layout.cshtml 文件，可以看到如以下代码所示的navbar类 -
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
@Html.ActionLink("应用程序名称", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" })
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>@Html.ActionLink("主页", "Index", "Home")</li>
<li>@Html.ActionLink("关于", "About", "Home")</li>
<li>@Html.ActionLink("联系方式", "Contact", "Home")</li>
</ul>
</div>
</div>
</div>
它是Bootstrap的CSS类，如navbar，navbar inverse和navbar fixed top。 如果删除了一些像navbar inverse，navbar fixed top这样的类，并且取消注释Bootstrap.css，然后再次运行应用程序，应该会看到下面的输出。
会看到有一个导航栏，但现在它不使用反色，所以它是白色的。 它也不会粘在页面的顶部。 当向下滚动时，导航栏会从顶部滚动，将无法再看到它。