如何在 MVC 5 项目中从 bootswatch 或 wrapbootstrap 实现主题？

Posted

技术标签:

【中文标题】如何在 MVC 5 项目中从 bootswatch 或 wrapbootstrap 实现主题？【英文标题】：How can I implement a theme from bootswatch or wrapbootstrap in an MVC 5 project? 【发布时间】：2014-03-17 08:31:38 【问题描述】：

我即将创建一个新的 ASP.Net MVC5 Web 应用程序。我想在应用程序中使用 bootswatch 或 wrapbootstrap 的主题，但找不到有关如何执行此操作的说明。

【问题讨论】：

这可能不是您想要的，但它相当简单。在您的 Content 文件夹中，包含 .csstheme 并在您的 App_Start BundleConfig.cs 中，将 ~/Content/bootstrap.css 替换为 ~/Content/yourtheme.bootstrap.css 谢谢嘉莉。这是一个优雅的答案。您如何处理实际的布局页面？只需用示例中的 html 替换正文？我想确保没有 GitHub 或其他自动化程序。如果第二天没有收到更多的 cmets，我会将其标记为已回答。 至于布局页面，我认为是default template。它将与其他主题一起开箱即用。简而言之，主题只是引导程序的不同颜色/样式版本。所以，按钮可能有不同的颜色，一些组件可能有不同的边框半径，但实际的整体风格或多或少是相同的。您可以申请different layouts，只需将包含替换为捆绑包即可。 我稍后会提供一个写得很好的答案，提供更多细节：] 谢谢@Carrie。你有使用wrapbootstrap的高级主题的经验吗？原理是一样的吗？ 【参考方案1】：

应用主题的步骤相当简单。要真正了解一切如何协同工作，您需要了解 ASP.NET MVC 5 模板提供的开箱即用功能以及如何根据需要对其进行自定义。

注意：如果您对 MVC 5 模板的工作原理有基本的了解，请向下滚动到主题部分。

ASP.NET MVC 5 模板：工作原理

本演练介绍了如何创建 MVC 5 项目以及幕后发生的事情。在this blog 中查看 MVC 5 模板的所有功能。

    创建一个新项目。在模板下选择 Web > ASP.NET Web 应用程序。输入项目名称并单击确定。

    在下一个向导中，选择 MVC 并单击 OK。这将应用 MVC 5 模板。

    MVC 5 模板创建了一个 MVC 应用程序，该应用程序使用 Bootstrap 来提供响应式设计和主题化功能。在后台，该模板包含一个 bootstrap 3.* nuget package，它安装了 4 个文件：bootstrap.css、bootstrap.min.css、bootstrap.js 和 bootstrap.min.js。

    Bootstrap 通过使用 Web 优化功能捆绑在您的应用程序中。检查Views/Shared/_Layout.cshtml 并寻找

    @Styles.Render("~/Content/css")

    和

    @Scripts.Render("~/bundles/bootstrap")

    这两个路径指的是App_Start/BundleConfig.cs中设置的包：

    bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
    "~/Scripts/bootstrap.js",
    "~/Scripts/respond.js"));

bundles.Add(new StyleBundle("~/Content/css").Include(
    "~/Content/bootstrap.css",
    "~/Content/site.css"));

    这使得无需任何预先配置即可运行您的应用程序成为可能。立即尝试运行您的项目。

在 ASP.NET MVC 5 中应用引导主题

本演练介绍如何在 MVC 5 项目中应用引导主题

    首先，下载您要应用的主题的css。对于这个例子，我将使用 Bootswatch 的Flatly。将下载的flatly.bootstrap.css 和flatly.bootstrap.min.css 包含在Content 文件夹中（确保也包含在项目中）。

    打开App_Start/BundleConfig.cs 并更改以下内容：

    bundles.Add(new StyleBundle("~/Content/css").Include(
    "~/Content/bootstrap.css",
    "~/Content/site.css"));

    包含您的新主题：

    bundles.Add(new StyleBundle("~/Content/css").Include(
    "~/Content/flatly.bootstrap.css",
    "~/Content/site.css"));

    如果您使用的是 MVC 5 模板中包含的默认 _Layout.cshtml，则可以跳到第 4 步。如果没有，请至少在布局中包含这两行以及您的 Bootstrap HTML template:

    在你的<head>:

    @Styles.Render("~/Content/css")

    关闭前的最后一行</body>:

    @Scripts.Render("~/bundles/bootstrap")

    现在尝试运行您的项目。您现在应该会看到新创建的应用程序正在使用您的主题。

资源

查看James Chambers 的this awesome 30 day walk-through guide，了解有关如何将 Twitter Bootstrap 与 ASP.NET MVC 5 一起使用的更多信息、教程、提示和技巧。

Bootstrap Bootstrap in the Visual Studio 2013 web project templates Getting Started with ASP.NET MVC 5 Bootstrap 3 with ASP.NET MVC 5 – Step by Step by Twinkle Bootswatch - free themes for Bootstrap

【讨论】：

我不建议使用 CDN，主要是因为您会失去很多内置于捆绑中的优化（例如 minification）。话虽如此，您只需在步骤 4 中更改视图中的链接以反映 CDN 的链接，即 @Styles.Render("//maxcdn.bootstrapcdn.com/bootswatch/3.2.0/cerulean/bootstrap.min.css") 我这样做了（但使用了 cyborg 主题），现在当我尝试运行时，我得到“WebGrease.dll 中发生类型为 'System.IndexOutOfRangeException' 的异常”。错误发生在 Styles.Render("~/Content/css") 我永远不会使用公共 CDN，因为我无法控制 the box or the security practices in place。无论如何，这次谈话并不是这篇文章的主题，所以如果你想继续谈话，请考虑加入我chat :) @SixOThree 我不会在屏幕截图中赋予太多价值，我从其中一篇链接文章中提取它们只是为了一个视觉示例。希望有所帮助:) 我刚刚找到了解决方案：我使用的是 bootstrap v4 主题，而我的 bootstrap 版本是 3.x。一旦我为正确的版本使用了主题，一切都没有问题。@CarrieKendall，我认为如果您将这一点添加到您的答案中，这可能对即将到来的读者非常有帮助。【参考方案2】：

这可能有点晚了；但有人会发现它很有用。

有一个用于将 AdminLTE（一种流行的引导模板）集成到 MVC5 的 Nuget 包

只需在 Visual Studio 包管理器控制台中运行此命令

Install-Package AdminLteMvc

注意：安装可能需要一段时间，因为它会下载所有必要的文件并创建示例完整视图和部分视图（.cshtml 文件），以指导您进行开发。还提供了一个示例布局文件_AdminLteLayout.cshtml。

您会在~/Views/Shared/ 文件夹中找到这些文件

【讨论】：

这个 `AdminLteMvc Nuget 非常简洁！我刚刚在almsaeedstudio.com/preview 上查看了预览，它有......在管理员网站模板中需要的一切:)【参考方案3】：

首先，如果你能找到你的

bootstrap.css 文件

和

bootstrap.min.js 文件

在你的电脑里，那么你要做的就是

首先从http://bootswatch.com/下载您喜欢的主题

复制下载的bootstrap.css和bootstrap.min.js文件

然后在您的计算机中找到现有文件并将其替换为新下载的文件。

注意：确保您下载的文件重命名为您文件夹中的内容

即

那你就可以走了。

有时结果可能不会立即显示。您可能需要在浏览器上运行 css 作为刷新的一种方式

【讨论】：

【参考方案4】：

我在 MSDN 上确实有一篇文章 - 使用 VS 2012、VS 2013 和 VS 2015 创建具有自定义引导主题/布局的 ASP.NET MVC，还附有演示代码示例。 请参考以下链接。 https://code.msdn.microsoft.com/ASPNET-MVC-application-62ffc106

【讨论】：

这篇文章已于 2016 年 10 月 7 日在 asp.net 社区asp.net/community/articles 被选为“今日文章”【参考方案5】：

您所要做的就是从 Bootswatch 网站选择并下载 bootstrap.css 和 bootstrap.js 文件，然后用它们替换原始文件。

当然，您必须在 jQuery 路径之后添加布局页面的路径。

【讨论】：

【参考方案6】：

Bootswatch 是一个不错的选择，但您也可以在此处找到为 ASP.NET MVC 制作的多种使用 MDBootstrap（构建在 Bootstrap 之上的前端框架）的免费模板：

ASP.NET MVC MDB Templates

【讨论】：

以上是关于如何在 MVC 5 项目中从 bootswatch 或 wrapbootstrap 实现主题？的主要内容，如果未能解决你的问题，请参考以下文章

在 ASP.NET MVC 显示问题中更改引导主题

如何解决 ASP.Net MVC 5 中的 glyphicons-halflings-regular.woff2 Err_Aborted 问题

在 asp.net core 5 MVC 视图中从 C# 代码调用 JavaScript 函数

在 ASP.NET MVC 5 中从数据库加载 Razor 视图

如何在javascript中从控制器（MVC）获取布尔值？

无法在 ASP.NET MVC 5 中从视图到控制器获取 Select2 标记值