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




asp.net-mvc twitter-bootstrap (4)

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

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

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

这个演练回顾了如何创建一个MVC 5项目以及发生了什么 。 在此博客中查看MVC 5 Template的所有功能。

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

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

  3. MVC 5模板创建一个使用Bootstrap提供响应式设计和主题功能的MVC应用程序。 在底层 ,模板包括一个bootstrap3 * nuget包 ,它安装4个文件: bootstrap.cssbootstrap.min.cssbootstrap.jsbootstrap.min.js

  4. Bootstrap通过使用Web优化功能捆绑在您的应用程序中。 检查Views/Shared/_Layout.cshtml并寻找

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

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

    这两个路径引用了在App_Start/BundleConfig.cs设置的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.css包含在Content文件夹中(确保也包含在Project中)。
  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. 如果您使用MVC 5模板中包含的默认_Layout.cshtml ,则可以跳到步骤4.如果不是,请至少将布局中的以下两行与Bootstrap HTML模板一起包含在您的布局中:

    在你的<head>

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

    关闭前的最后一行</body>

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

资源

查看James Chambers撰写的 这篇令人敬畏的30天漫步指南,了解如何在ASP.NET MVC 5中使用Twitter Bootstrap的更多信息,教程,技巧和窍门。

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



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

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

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

Install-Package AdminLteMvc

注意:安装可能需要一段时间,因为它会下载所有必需的文件,并创建示例全部和部分视图(.cshtml文件),以便在开发时指导您。 还提供了示例布局文件_AdminLteLayout.cshtml

你会在~/Views/Shared/ folder中找到这些文件


首先,如果你能找到你的

bootstrap.css文件

bootstrap.min.js文件

在你的电脑里,你刚刚做的是

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

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

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

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

那么你很好去。

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





bootswatch