如何在 MVC 5 项目中实现 bootswatch 或 wrapbootstrap 的主题? [英] How can I implement a theme from bootswatch or wrapbootstrap in an MVC 5 project?

问题描述

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

解决方案

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

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

<小时>

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

本演练介绍了如何创建 MVC 5 项目以及幕后发生的事情.在 ，它安装了 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中设置的bundle:

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 项目中应用引导程序主题

1. 首先，下载您要应用的主题的 css.在这个例子中，我将使用 Bootswatch 的 的每日演练指南，了解有关如何使用的更多信息、教程、提示和技巧使用 ASP.NET MVC 5 的 Twitter 引导程序.
   • 引导程序
   • 可视化中的引导程序Studio 2013 网络项目模板
   • ASP.NET MVC 5 入门
   • 使用 ASP.NET 的 Bootstrap 3MVC 5 – 一步一步 by Twinkle
   • Bootswatch - Bootstrap 的免费主题

   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.

   解决方案

   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.

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

   ---

   ASP.NET MVC 5 Template: How it works

   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.

   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 MVC and 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 package that 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.cshtml and 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.

   ---

   Applying Bootstrap Themes in ASP.NET MVC 5

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

   1. First, download the css of the theme you'd like to apply. For this example, I'll be using Bootswatch's Flatly. Include the downloaded flatly.bootstrap.css and flatly.bootstrap.min.css in the Content folder (be sure to Include in Project as well).

   2. Open App_Start/BundleConfig.cs and 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.cshtml included 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.

   ---

   Resources

   Check out this awesome 30 day walk-through guide by James Chambers for more information, tutorials, tips and tricks on how to use Twitter Bootstrap with 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

   这篇关于如何在 MVC 5 项目中实现 bootswatch 或 wrapbootstrap 的主题?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！