在现代 Web 开发中，Bootstrap 是一个非常流行的前端框架，它提供了响应式设计、移动优先的解决方案。Bootstrap 提供了默认的布局、字体和 JavaScript 小部件，如手风琴、轮播图等。开发者可以选择使用默认的 Bootstrap 主题，或者从网上找到自定义的 Bootstrap 主题来创建 ASP.NET MVC Web 应用。本文将展示如何轻松地更改 ASP.NET MVC 应用的默认布局，并应用自定义的 Bootstrap 主题。
本教程适用于 Visual Studio 2012、2013 和 2015。在创建带有自定义 Bootstrap 主题的 ASP.NET MVC Web 应用时，请遵循以下步骤：
首先，下载打算在 ASP.NET MVC 应用中实现的 Bootstrap 主题，并将其准备好。（可能需要从 zip 文件夹中提取文件到一个单独的文件夹中）。本文示例中使用的是自定义的 Bootstrap 主题 - Business Casual，主题文件从以下网站下载：https://startbootstrap.com/template-overviews/business-casual/
打开 Visual Studio 2012 / 2013 / 2015 并创建一个新的项目，选择 Web - ASP.NET MVC 4 Web 应用。输入项目名称 "ASPNETMVC_BootstrapCustomThemeDemo" 并点击 OK。选择 Internet 模板（VS 2012 / 2013）并点击 OK。对于 VS 2015，选择 'MVC'。
创建项目后，按 F5 运行应用程序，在 Web 浏览器中将看到默认的 ASP.NET MVC 应用模板。
要实现 Bootstrap CSS 框架，不需要 Site.css 文件，所以首先需要打开 Site.css 文件并删除其中的所有内容，然后保存并关闭文件。仍然需要这个文件来覆盖 Bootstrap CSS 元素。
接下来，打开 Bootstrap 自定义主题文件夹（例如 startbootstrap-business-casual-gh-pages），会看到一些文件和文件夹——需要将 CSS、Fonts 和 img 文件夹复制到项目结构中的 Content 文件夹下。
然后打开自定义主题文件夹中的 js 文件夹，将该文件夹中的所有 JavaScript 文件复制到项目结构中的 Scripts 文件夹下。
在 Visual Studio 中，点击 "Solution Explorer" 栏顶部的 "Show All files" 选项来查看复制到项目文件夹中的文件和文件夹。
接下来，要将文件和文件夹包含在项目中，右键点击它们并选择 "Include in Project" 选项。
在 Solution Explorer 中，打开 App_Start 文件夹下的 BundleConfig.cs 文件，并添加以下内容到 bundle 配置中：
bundles.Add(
new ScriptBundle("~/bundles/jquery")
.Include("~/Scripts/jquery.js"));
bundles.Add(
new ScriptBundle("~/bundles/bootstrap")
.Include("~/Scripts/bootstrap.js"));
bundles.Add(
new StyleBundle("~/Content/css")
.Include("~/Content/site.css")
.Include("~/Content/bootstrap.css"));
接下来，打开自定义主题文件夹中的 index.html 文件，并更新 Views/shared 下的 _layout.cshtml 视图。
几乎所有的自定义主题都是用通用布局设计的，所以很多元素/组件在每个页面中都会重复。作为 MVC 开发者，需要将重复的代码分离出来，放入布局页面，而将其他代码放入 index 页面。
从 index.html 页面复制头部部分到 _layout.cshtml，并进行修改。接下来，用 index.html 中的 nav 标签替换 _layout.cshtml 中 body 标签内的 Header 标签部分。同时，对图片的相对路径进行更改，并为每个视图添加 @html.ActionLink()，同时进行高亮显示的更改。
接下来，滚动到 _layout.cshtml 中 body 标签内的 footer 部分，并用 index.html 中的 footer 标签替换（见图 12），然后保存更改。
接下来设置 Index.cshtml 视图——为此，只复制 nav-bar 下方的容器部分并粘贴到 Index.cshtml 中（见图 13）。注意：不会复制 nav-bar 和 footer 部分，因为它们已经在 _layout.cshtml 中存在。同时确保在顶部引用 _layout.cshtml（见下文），因为它包含 nav-bar 和 footer 细节。
由于 Index.cshtml 包含轮播图，需要在 index.cshtml 视图的底部添加 jquery.js 和 bootstrap.js，以及轮播图的 jquery 脚本（见图 14）。
接下来设置 About.cshtml 视图——为此，打开 about.html 文件，只复制 nav-bar 下方的容器部分并粘贴到 About.cshtml 中（见图 15）。注意：不会复制 nav-bar 和 footer 部分，因为它们已经在 _layout.cshtml 中存在。同时确保在顶部引用 _layout.cshtml（见下文），因为它包含 nav-bar 和 footer 细节。
接下来设置 Contact.cshtml 视图——为此，打开 contact.html 文件，只复制 nav-bar 下方的容器部分并粘贴到 Contact.cshtml 中（见图 16）。注意：不会复制 nav-bar 和 footer 部分，因为它们已经在 _layout.cshtml 中存在。同时确保在顶部引用 _layout.cshtml（见下文），因为它包含 nav-bar 和 footer 细节。
最后设置 Blog.cshtml 视图——为此，打开 blog.html 文件，只复制 nav-bar 下方的容器部分并粘贴到 Blog.cshtml 中（见图 17）。注意：不会复制 nav-bar 和 footer 部分，因为它们已经在 _layout.cshtml 中存在。同时确保在顶部引用 _layout.cshtml（见下文），因为它包含 nav-bar 和 footer 细节。
关闭所有 .html 文件并保存工作。现在，按 F5 运行应用程序，在 Web 浏览器中，将看到实现的自定义 Bootstrap 模板的 ASP.NET MVC 应用。