82

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

4

6 回答 6

187

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

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

ASP.NET MVC 5 模板：它是如何工作的

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

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

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

    选择 MVC 模板的示例

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

    已安装的 css 和 js 示例

  4. 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"));

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

    默认应用程序运行

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

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

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

  2. 打开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"));

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

    在你的<head>：

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

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

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

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

    使用 flatly 主题的默认模板

资源

查看James Chambers撰写的精彩 30 天演练指南，了解有关如何将 Twitter Bootstrap 与 ASP.NET MVC 5 结合使用的更多信息、教程、提示和技巧。

于 2014-02-18T20:23:03.913 回答
20

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

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

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

Install-Package AdminLteMvc

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

您将在文件~/Views/Shared/夹中找到文件

于 2015-12-25T20:51:46.190 回答
3

首先，如果您能够找到您的

bootstrap.css文件

和

bootstrap.min.js文件

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

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

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

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

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

IE

在此处输入图像描述

那你就可以走了。

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

于 2016-03-05T17:50:44.923 回答
0

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

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

于 2016-03-04T04:36:57.247 回答
0

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

于 2016-09-23T16:23:53.537 回答
0

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

ASP.NET MVC MDB 模板

于 2020-03-17T13:29:26.483 回答