在本章中，我们将看看现在包含在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，然后再次运行应用程序，应该会看到下面的输出。
会看到有一个导航栏，但现在它不使用反色，所以它是白色的。 它也不会粘在页面的顶部。 当向下滚动时，导航栏会从顶部滚动，将无法再看到它。
