asp.net-mvc 如何在 MVC 5 项目中实现 bootswatch 或 wrapbootstrap 的主题？

How can I implement a theme from bootswatch or wrapbootstrap in an MVC 5 project?

提问by Peter Loudon

I am about to create a new ASP.Net MVC5 web application. I would like to use a theme from bootswatch or wrapbootstrap in the application, but cannot find a set of instructions on how to do this.

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

回答by Carrie Kendall

The steps to apply a theme are fairly simple. To really understand how everything works together, you'll need to understand what the ASP.NET MVC 5 template is providing out of the box and how you can customize it for your needs.

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

_{Note: If you have a basic understanding of how the MVC 5 template works, scroll down to the theming section.}

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

---

---

ASP.NET MVC 5 Template: How it works

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

This walk-through goes over how to create an MVC 5 project and what's going on under the hood. See all the features of MVC 5 Template in this blog.

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

1. Create a new project. Under Templates Choose Web> ASP.NET Web Application. Enter a name for your project and click OK.

2. On the next wizard, choose MVCand click OK. This will apply the MVC 5 template.

   

3. The MVC 5 template creates an MVC application that uses Bootstrap to provide responsive design and theming features. Under the hood, the template includes a bootstrap 3.* nuget packagethat installs 4 files: bootstrap.css, bootstrap.min.css, bootstrap.js, and bootstrap.min.js.

   

4. Bootstrap is bundled in your application by using the Web Optimization feature. Inspect Views/Shared/_Layout.cshtmland look for

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

   and

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

   These two paths refer to bundles set up in 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. This is what makes it possible to run your application without any configuring up front. Try running your project now.

   

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

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

   

3. MVC 5 模板创建了一个 MVC 应用程序，该应用程序使用 Bootstrap 提供响应式设计和主题功能。引擎盖下，所述模板包括一自举3. * NuGet包，它安装4个文件：bootstrap.css，bootstrap.min.css，bootstrap.js，和bootstrap.min.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. 这使得无需任何预先配置即可运行您的应用程序成为可能。现在尝试运行您的项目。

   

---

---

Applying Bootstrap Themes in ASP.NET MVC 5

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

This walk-through covers how to apply bootstrap themes in an MVC 5 project

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

1. First, download the cssof the theme you'd like to apply. For this example, I'll be using Bootswatch's Flatly. Include the downloaded flatly.bootstrap.cssand flatly.bootstrap.min.cssin the Contentfolder (be sure to Include in Project as well).

2. Open App_Start/BundleConfig.csand change the following:

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

   to include your new theme:

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

3. If you're using the default _Layout.cshtmlincluded in the MVC 5 template, you can skip to step 4. If not, as a bare minimum, include these two line in your layout along with your Bootstrap HTML template:

   In your <head>:

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

   Last line before closing </body>:

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

4. Try running your project now. You should see your newly created application now using your theme.

   

1. 首先，下载css您要应用的主题。在这个例子中，我将使用Bootswatch的断然。将下载的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. 现在尝试运行您的项目。您现在应该会看到新创建的应用程序正在使用您的主题。

   

---

---

Resources

资源

Check out this awesome 30 day walk-through guideby James Chambersfor more information, tutorials, tips and tricks on how to use Twitter Bootstrap with ASP.NET MVC 5.

看看这真棒30天步行通过引导由詹姆斯·钱伯斯关于如何使用Twitter的引导与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 Stepby Twinkle
• Bootswatch - free themes for Bootstrap

• 引导程序
• Visual Studio 2013 Web 项目模板中的 Bootstrap
• ASP.NET MVC 5 入门
• Bootstrap 3 with ASP.NET MVC 5 – Step by Stepby Twinkle
• Bootswatch - Bootstrap 的免费主题

回答by Soma Mbadiwe

This may be a little late; but someone will find it useful.

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

There's a Nuget Package for integrating AdminLTE - a popular Bootstrap template - to MVC5

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

Simply run this command in your Visual Studio Package Manager console

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

Install-Package AdminLteMvc

NB: It may take a while to install because it downloads all necessary files as well as create sample full and partial views (.cshtml files) that can guide you as you develop. A sample layout file _AdminLteLayout.cshtmlis also provided.

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

You'll find the files in ~/Views/Shared/folder

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

回答by Omari Victor Omosa

First, if you are able to locate your

首先，如果你能找到你的

bootstrap.cssfile

bootstrap.css文件

and

和

bootstrap.min.jsfile

bootstrap.min.js文件

in your computer, then what you just do is

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

First download your favorite theme i.e. from http://bootswatch.com/

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

Copy the downloaded bootstrap.cssand bootstrap.min.jsfiles

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

Then in your computer locate the existing files and replace them with the new downloaded files.

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

NOTE:ensure your downloaded files are renamedto what is in your folder

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

i.e.

IE

Then you are good to go.

然后你就可以走了。

sometimesresult may not display immediately. your may need to run the css on your browser as a way of refreshing

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

回答by Hussain Patel

I do have an article on MSDN - Creating ASP.NET MVC with custom bootstrap theme / layout using VS 2012, VS 2013 and VS 2015, also have a demo code sample attached.. Please refer below link. https://code.msdn.microsoft.com/ASPNET-MVC-application-62ffc106

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

回答by Ignacio

Bootswatch is a good alternative, but you can also find multiple types of free templates made for ASP.NET MVC that use MDBootstrap (a front-end framework built on top of Bootstrap) here:

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

ASP.NET MVC MDB Templates

ASP.NET MVC MDB 模板

回答by shaddad

All what you have to do is to select and download the bootstrap.css and bootstrap.js files from Bootswatch website, and then replace the original files with them.

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

Of course you have to add the paths to your layout page after the jQuery path that is all.

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