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

Question 1

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

Question 2

应用主题的步骤非常简单。要真正了解所有功能如何协同工作，您需要了解ASP.NET MVC 5模板提供的即用型功能以及如何根据需要自定义它。

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

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

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

创建一个新项目。在“模板”下，选择“ Web” >“ ASP.NET Web应用程序”。输入项目的名称，然后单击确定OK。
在下一个向导中，选择“ MVC”，然后单击“确定” OK。这将应用MVC 5模板。
MVC 5模板创建一个使用Bootstrap提供响应式设计和主题化功能的MVC应用程序。引擎盖下，所述模板包括一自举3. * NuGet包，它安装4个文件：bootstrap.css，bootstrap.min.css，bootstrap.js，和bootstrap.min.js。

通过使用Web优化功能，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项目中应用引导主题

首先，下载css您要应用的主题的。在这个例子中，我将使用Bootswatch的断然。将下载的flatly.bootstrap.css和包括flatly.bootstrap.min.css在Content文件夹中（确保也包括在Project中）。

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

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

在您的<head>：
```
@Styles.Render("~/Content/css")
```
关闭前的最后一行</body>：
```
@Scripts.Render("~/bundles/bootstrap")
```
立即尝试运行您的项目。您现在应该使用主题查看新创建的应用程序。

资源资源

查看James Chambers撰写的这本30天真棒演练指南，以获取有关如何将Twitter Bootstrap与ASP.NET MVC 5结合使用的更多信息，教程，技巧和窍门。

Question 3

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

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

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

Install-Package AdminLteMvc

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

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

Question 4

首先，如果您能够找到

bootstrap.css文件

和

bootstrap.min.js文件

在您的计算机中，那么您所要做的就是

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

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

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

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

即

那你很好。

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

Question 5

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

Question 6

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

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

Question 7

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

ASP.NET MVC MDB模板