我如何能实现从bootswatch或wrapbootstrap在MVC 5项目主题?我如何能实现从b

2019-05-12 16:48发布

我将要创建一个新的ASP.Net MVC5的Web应用程序。 我想在应用程序中使用一个主题从bootswatch或wrapbootstrap,却找不到一套关于如何做到这一点的说明。

Answer 1:

申请主题的步骤是相当简单的。 要真正了解一切是如何一起工作,你需要明白什么是ASP.NET MVC 5模板提供开箱即用,以及如何你可以自定义您的需求。

注意:如果你的MVC 5模板是如何工作的一个基本的了解,向下滚动到主题化部分。


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

本演练提供了如何创建一个MVC 5项目,什么是引擎盖下回事 。 见MVC 5模板的所有功能, 这个博客 。

  1. 创建一个新项目。 在模板选择网络 > ASP.NET Web应用程序 。 输入您的项目名称,然后单击确定

  2. 在接下来的向导中,选择MVC,然后单击确定 。 这将适用于MVC 5模板。

  3. 在MVC 5模板创建一个使用引导程序来提供响应式设计和主题化特征的MVC应用程序。 引擎盖下,所述模板包括一自举3. * NuGet包 ,它安装4个文件: bootstrap.cssbootstrap.min.cssbootstrap.js ,和bootstrap.min.js

  4. 自举是在应用程序中使用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. 这是什么使得它可以运行没有任何配置了前您的应用程序。 现在,尝试运行项目。


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

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

  1. 首先,下载css要应用的主题。 在这个例子中,我将使用Bootswatch的断然 。 包括将下载的flatly.bootstrap.cssflatly.bootstrap.min.cssContent文件夹(一定要在项目以包括为好)。
  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.如果不是,作为最低限度,包括与您一起布局这两个线引导HTML模板 :

    在你<head>

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

    关闭前最后一行</body>

     @Scripts.Render("~/bundles/bootstrap") 
  4. 现在,尝试运行项目。 您应该看到新创建的应用程序现在使用你的主题。


资源

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

  • 引导
  • 引导在Visual Studio 2013的Web项目模板
  • 入门ASP.NET MVC 5
  • 引导3与ASP.NET MVC 5 -分步由星星
  • Bootswatch -自举免费的主题


Answer 2:

这可能是有点晚了; 但有人会觉得它有用。

有一个NuGet包集成AdminLTE - 一个流行的引导模板 - 到MVC5

只需在您的Visual Studio程序包管理器控制台运行此命令

Install-Package AdminLteMvc

注:这可能需要一段时间来安装,因为它下载所有必需的文件,以及创建可引导您开发的样品全部或部分视图(.cshtml文件)。 样品布局文件_AdminLteLayout.cshtml也被提供。

你会发现在文件~/Views/Shared/文件夹



Answer 3:

首先,如果你能找到你

bootstrap.css文件

bootstrap.min.js文件

在你的电脑,那么你刚才做的是

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

复制下载bootstrap.cssbootstrap.min.js文件

然后在你的电脑找到现有文件并用新下载的文件替换它们。

注:确保您下载的文件重命名 ,什么是你的文件夹中

然后,你是好去。

有时会导致可能不会立即显示。 您可能需要在浏览器上令人耳目一新的方式运行的CSS



Answer 4:

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



Answer 5:

所有您需要做的是选择和下载从Bootswatch网站bootstrap.css和bootstrap.js文件,然后用它们替换原来的文件。

当然,你必须是所有的jQuery的路径后的路径添加到您的页面布局。



文章来源: How can I implement a theme from bootswatch or wrapbootstrap in an MVC 5 project?