我如何能实现从bootswatch或wrapbootstrap在MVC 5项目中的主题？ [英] 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项目，什么是引擎盖下回事。见MVC 5模板的所有功能在<一个href=\"http://blogs.msdn.com/b/webdev/archive/2013/10/16/asp-net-features-in-new-project-templates-in-visual-studio-2013.aspx\">this博客。

1. 创建一个新项目。在模板中选择的网站的>的 ASP.NET Web应用程序的。输入项目名称，然后点击<大骨节病>确定​​。




2. 在接下来的向导中，选择的 MVC 的，然后点击<大骨节病>确定​​。这将适用于MVC 5模板。

   




3. 在MVC 5模板创建一个使用引导程序来提供响应式设计和主题化特征的MVC应用程序。引擎盖下，该模板包括引导用于安装4个文件3. *的NuGet包：引导的.css ， bootstrap.min.css ， bootstrap.js 和 bootstrap.min.js 。

   




4. 引导在应用程序中使用Web优化功能捆绑在一起。检查查看/共享/ _Layout.cshtml ，并查找

   @ Styles.Render（〜/内容/ CSS）


   和

   @ Scripts.Render（〜/包/引导）


   这两个路径是指在建立包 App_Start / BundleConfig.cs ：

   bundles.Add（新ScriptBundle（〜/包/引导）。包括（
    〜/脚本/ bootstrap.js
    〜/脚本/ respond.js））;bundles.Add（新StyleBundle（〜/内容/ CSS）。包括（
    〜/内容/ bootstrap.css
    〜/内容/的site.css））;





5. 这是什么使得它可以运行没有任何配置在前面您的应用程序。现在，尝试运行项目。

   

---

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

本演练涵盖了如何在MVC 5项目申请自举的主题

1. 首先，下载您想要应用的主题的 CSS 。在这个例子中，我将使用Bootswatch的断然。包括下载 flatly.bootstrap.css 和 flatly.bootstrap.min.css 在内容文件夹（一定要在项目以包括为好）。



2. 打开 App_Start / BundleConfig.cs 并更改以下内容：

   bundles.Add（新StyleBundle（〜/内容/ CSS）。包括（
    〜/内容/ bootstrap.css
    〜/内容/的site.css））;


   要包含新的主题：

   bundles.Add（新StyleBundle（〜/内容/ CSS）。包括（
    〜/内容/ flatly.bootstrap.css
    〜/内容/的site.css））;





3. 如果您使用的是默认的 _Layout.cshtml 包含在MVC 5模板，您可以跳到步骤4.如果不是，作为一个最低限度包括在布局这两个符合你的引导HTML模板：

   在你的＆LT; HEAD＆GT; ：

   @ Styles.Render（〜/内容/ CSS）


   最后一行在结束前＆LT; /身体GT; ：

   @ Scripts.Render（〜/包/引导）





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

   

---

资源

查看这真棒30天步行通过导通过詹姆斯·钱伯斯了解如何使用Twitter的引导与ASP.NET MVC 5. <更多信息，教程，技巧和窍门/ p>

• 引导


• Bootstrap在Visual Studio 2013的Web项目模板


• 入门ASP.NET MVC 5


• 引导3 ASP.NET MVC 5 - 分步一步一闪


• Bootswatch - 自举免费的主题

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

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