65.9K
CodeProject 正在变化。 阅读更多。
Home

ASP.NET MVC 应用程序搭配自定义 Bootstrap 主题 - VS 2012、VS 2013 和 VS 2015

Hussain Patel
starIconstarIconstarIcon
emptyStarIcon
starIcon
emptyStarIcon

3.55/5 (22投票s)

2016 年 9 月 20 日

CPOL

6分钟阅读

viewsIcon

57269

downloadIcon

1751

在本文中，我将展示如何创建一个带有自定义 Bootstrap 主题/布局的 ASP.NET MVC 网页应用程序。在此演示中，我使用的是 Visual Studio 2012、ASP.NET MVC 4 和自定义 Bootstrap 主题（Bootstrap Business Casual）。

引言

在本文中，我将展示如何创建一个带有自定义 Bootstrap 主题/布局的 ASP.NET MVC 网页应用程序。在此演示中，我使用的是 Visual Studio 2012、ASP.NET MVC 4 和自定义 Bootstrap 主题（Bootstrap Business Casual）。

背景

Bootstrap 是用于开发响应式、移动优先的 Web 项目最受欢迎的HTML、CSS 和 JS框架。它提供了默认的布局、字体和 JavaScript 小部件，如手风琴、轮播等。您可以选择默认的boostrap.css，也可以使用在线的自定义 Bootstrap 主题来创建您的 ASP.NET MVC Bootstrap Web 应用程序。在本文中，我将展示如何轻松更改默认的 ASP.NET MVC 布局，并为您的 MVC Web 应用程序应用自定义 Bootstrap 主题/布局。

入门

本教程可用于 VS 2012、VS 2013 和 VS 2015。

创建带有自定义 Bootstrap 主题的 ASP.NET MVC 网页应用程序

步骤 I – 下载您打算在 ASP.NET MVC 应用程序中实现的主题，并准备好。（您可能需要将 zip 文件中的文件解压到单独的文件夹中）。在此演示中，我使用的是自定义 Bootstrap 主题 - Business casual，我从以下网站下载了该主题：https://startbootstrap.com/template-overviews/business-casual/ 。

步骤 II – 创建一个 ASP.NET MVC 网页应用程序，请按照以下步骤操作。

  • 打开 VS 2012 / VS 2013 / VS 2015 并创建新项目，选择 Web – ASP.NET MVC 4 Web 应用程序。
  • 输入项目名称 –“ASPNETMVC_BootstrapCustomThemeDemo”。单击确定。
  • 选择 Internet 模板（VS 2012 / VS 2013）并单击确定。对于 VS 2015，选择“MVC”。
  • 我即将实现的自定义 Bootstrap 主题有一个博客菜单和博客.html 页面，因此我在 HomeController 中创建了一个 Blog.cshtml 视图及其对应的操作，并在 _layout.cshtml 中添加了博客菜单。（参见图 3）。
  • 项目创建完成后，按 F5 运行应用程序，您将在 Web 浏览器中看到默认的 ASP.NET MVC 应用程序模板。（参见图 3）。

Figure 1

注意：对于 VS 2015，有一个细微的差别：每个 ASP.NET MVC Web 应用程序项目都附带默认的 Bootstrap 主题（参见图 1），并且 ASP.NET MVC 模板是 Bootstrap 模板 - jumbotron（参见图 2）。您需要先使用NuGet 包管理器卸载当前/默认的 Bootstrap 版本和 jQuery 包，然后从步骤 III开始。

 

Figure 2

Figure 3

步骤 III - 为您的 ASP.NET MVC Web 应用程序实现自定义 Bootstrap 主题。

  • 由于我们将实现 Bootstrap CSS 框架，因此不需要Site.css文件，所以您需要做的第一件事是打开Site.css文件，并删除该文件中的所有内容（参见图 4），然后保存文件并关闭它。我们仍然需要这个文件来覆盖 Bootstrap CSS 元素。
  • Figure 4
  • 接下来，打开 Bootstrap 自定义主题文件夹（startbootstrap-business-casual-gh-pages），您会看到一些文件和文件夹 – 您需要将CSS、Fonts 和 img文件夹复制到项目结构中，放在Content文件夹下（参见图 5）。
  • Figure 5
  • 接下来，打开自定义主题文件夹内的js文件夹，将该文件夹中的所有JavaScript文件复制到项目结构中，放在Scripts文件夹下（参见图 6）。
  • Figure 6
  • 接下来，转到Visual Studio，在解决方案资源管理器栏的顶部，单击“显示所有文件”选项以查看我们复制到项目文件夹中的文件和文件夹（参见图 7）。
  • Figure 7
  • 接下来，为了使文件和文件夹成为项目的一部分 - 右键单击其中的每一个，然后选择“包含到项目”选项（参见图 8）。
  • Figure 8

步骤 IV - 配置 ASP.NET MVC 网页应用程序以使用自定义 Bootstrap 主题。

  • 在解决方案资源管理器中，打开App_Start文件夹下的BundleConfig.cs文件，并将以下内容添加到捆绑配置中（也参见图 9）。
  • 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"));
    Figure 9
     
  • 接下来，打开自定义主题文件夹中的index.html文件，并更新 Views/shared 下的_layout.cshtml视图。注意：几乎所有的自定义主题都设计有通用的布局，因此每个页面中的大部分元素/组件都会重复，作为 MVC 开发者，我们需要将重复的代码分离出来，放在布局页面中，而将特定页面的代码放在索引页面中。
     
  • 将 index.html 页面的 head 部分复制到 _layout.cshtml 并进行更改（参见图 10）。
    Figure 10
     
  • 接下来，用 index.html 中的 nav 标签替换 _layout.cshtml 中 body 标签内的 Header 标签部分（见下文）。此外，对图像的相对路径进行以下更改，并为每个视图添加 @html.ActionLink()，同时进行突出显示的更改（参见图 11）。
    Figure 11
  • 接下来，向下滚动并将 _layout.cshtml 中 body 标签内的 footer 部分替换为 index.html 中的 footer 标签（参见图 12）并保存更改。
  • Figure 12
     
  • 接下来设置 Index.cshtml 视图 – 为此，仅复制 nav-bar 下方的 container 部分，并将其粘贴到 Index.cshtml 中（参见图 13）。注意：我们不会复制 nav-bar 和 footer 部分，因为它们已经存在于我们的 _layout.cshtml 中。同时，请确保在顶部引用 _layout.cshtml（见下文），因为它包含 nav-bar 和 footer 的详细信息。

    Figure 13
     
  • 由于 Index.cshtml 包含轮播，我们需要在 index.cshtml 视图的底部添加 jquery.js 和 bootstrap.js 以及用于轮播的 jQuery 脚本（参见图 14）。

    Figure 14
     
  • 接下来设置 About.cshtml 视图 – 为此，打开 about.html 文件，仅复制 nav-bar 下方的 container 部分，并将其粘贴到 About.cshtml 中（参见图 15）。注意：我们不会复制 nav-bar 和 footer 部分，因为它们已经存在于我们的 _layout.cshtml 中。同时，请确保在顶部引用 _layout.cshtml（见下文），因为它包含 nav-bar 和 footer 的详细信息。

    Figure 15
     
  • 接下来设置 Contact.cshtml 视图 – 为此，打开 contact.html 文件，仅复制 nav-bar 下方的 container 部分，并将其粘贴到 Contact.cshtml 中（参见图 16）。注意：我们不会复制 nav-bar 和 footer 部分，因为它们已经存在于我们的 _layout.cshtml 中。同时，请确保在顶部引用 _layout.cshtml（见下文），因为它包含 nav-bar 和 footer 的详细信息。

    Figure 16
     
  • 最后设置 Blog.cshtml 视图 – 为此，打开 blog.html 文件，仅复制 nav-bar 下方的 container 部分，并将其粘贴到 Blog.cshtml 中（参见图 17）。注意：我们不会复制 nav-bar 和 footer 部分，因为它们已经存在于我们的 _layout.cshtml 中。同时，请确保在顶部引用 _layout.cshtml（见下文），因为它包含 nav-bar 和 footer 的详细信息。

    Figure 17
     
  • 关闭所有 .html 文件并保存所有工作。现在，按 F5 运行应用程序，在 Web 浏览器中，您将看到 ASP.NET MVC 应用程序以我们实现自定义 Bootstrap 模板的样式显示（参见图 18）。

    Figure 18

需要注意的几点

  • _layout.cshtml 将包含公共元素 – 如页眉（Logo）、菜单和页脚。对于动态组件，请确保在页面底部引用 jquery.js 和 boostrap.js 文件，并在需要时引用一些 jQuery 脚本。
  • 确保正确引用图像和 CSS 链接。

这样就完成了使用自定义 Bootstrap 主题创建 ASP.NET MVC 网页应用程序所需的步骤。

© . All rights reserved.