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

Question

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

Answer 1

应用主题的步骤非常简单。要真正了解所有内容如何协同工作，您需要了解ASP.NET MVC 5模板提供的开箱即用内容以及如何根据需要对其进行自定义。

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

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

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

创建一个新项目。在模板下选择 Web ＆gt; ASP.NET Web应用程序。输入项目名称，然后单击确定。
在下一个向导中，选择 MVC 并单击确定。这将应用MVC 5模板。
MVC 5模板创建一个MVC应用程序，该应用程序使用Bootstrap提供响应式设计和主题功能。在幕后，该模板包含一个bootstrap 3.* nuget package，可安装4个文件：bootstrap.css，bootstrap.min.css，bootstrap.js和bootstrap.min.js。

使用Web Optimization功能将Bootstrap捆绑在您的应用程序中。检查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中应用Bootstrap主题

本演练内容介绍了如何在MVC 5项目中应用bootstrap主题

首先，下载您要申请的主题的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")
```
立即尝试运行您的项目。您现在应该使用主题看到新创建的应用程序。

资源

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

Answer 2

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

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

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

即可

Install-Package AdminLteMvc

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

您将在~/Views/Shared/文件夹

中找到这些文件

Answer 3

首先，如果你能找到你的

bootstrap.css 文件

和

bootstrap.min.js 文件

在你的电脑中，你刚才做的是

首先从http://bootswatch.com/

下载您最喜欢的主题

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

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

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

即。

然后你很高兴。

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

Answer 4

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

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

Answer 5

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

Answer 6

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

ASP.NET MVC MDB Templates

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

6 个答案:

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

在ASP.NET MVC 5中应用Bootstrap主题

资源