Fatal编程技术网
  • asp.net-mvc/
  • Asp.net mvc 如何在MVC5项目中实现bootswatch或wrapbootstrap中的主题？

Asp.net mvc 如何在MVC5项目中实现bootswatch或wrapbootstrap中的主题？

asp.net-mvc twitter-bootstrap asp.net-mvc-5

Asp.net mvc 如何在MVC5项目中实现bootswatch或wrapbootstrap中的主题？,asp.net-mvc,twitter-bootstrap,asp.net-mvc-5,bootswatch,Asp.net Mvc,Twitter Bootstrap,Asp.net Mvc 5,Bootswatch,我将创建一个新的ASP.NETMVC5 web应用程序。我想在应用程序中使用bootswatch或wrapbootstrap中的主题，但找不到一组有关如何执行此操作的说明。应用主题的步骤相当简单。要真正了解所有东西是如何协同工作的，您需要了解ASP.NET MVC 5模板提供了什么现成的功能，以及如何根据需要对其进行自定义 注意：如果您基本了解MVC5模板的工作原理，请向下滚动到主题部分 ASP.NET MVC 5模板：工作原理 本演练将介绍如何创建MVC5项目以及该项目下正在进行的工作。请参

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

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

注意：如果您基本了解MVC5模板的工作原理，请向下滚动到主题部分

ASP.NET MVC 5模板：工作原理 本演练将介绍如何创建MVC5项目以及该项目下正在进行的工作。请参阅中MVC5模板的所有功能

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

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

  • MVC5模板创建了一个MVC应用程序，它使用引导提供响应性设计和主题化功能。在引擎盖下，该模板包括一个安装4个文件的模板：
    bootstrap.css
    ，
    bootstrap.min.css
    ，
    bootstrap.js
    ，和
    bootstrap.min.js

  • 通过使用Web优化功能将引导捆绑到应用程序中。检查
    视图/Shared/_Layout.cshtml
    并查找

    @Styles.Render（“~/Content/css”）
    及

    @Scripts.Render（“~/bundles/bootstrap”）
    这两条路径指的是在
    App\u Start/BundleConfig.cs
    中设置的捆绑包：

    bundles.Add（新脚本包（“~/bundles/bootstrap”）。包括(
“~/Scripts/bootstrap.js”，
“~/Scripts/respond.js”）；
添加（新样式包（“~/Content/css”）。包括(
“~/Content/bootstrap.css”，
“~/Content/site.css”）；
  • 这使得无需预先进行任何配置即可运行应用程序。现在尝试运行您的项目

    • 在ASP.NET MVC 5中应用引导主题 本演练介绍如何在MVC5项目中应用引导主题

  • 首先，下载您想要应用的主题的
    css
    。对于这个例子，我将使用Bootswatch的。将下载的
    flatly.bootstrap.css
    和
    flatly.bootstrap.min.css
    包含在
    Content
    文件夹中（确保也包含在项目中）
  • 打开
    App\u Start/BundleConfig.cs
    并更改以下内容：

    bundles.Add（新样式包（“~/Content/css”）。包括(
“~/Content/bootstrap.css”，
“~/Content/site.css”）；
    要包含新主题，请执行以下操作：

    bundles.Add（新样式包（“~/Content/css”）。包括(
“~/Content/flatly.bootstrap.css”，
“~/Content/site.css”）；
  • 如果使用MVC5模板中包含的默认
    \u Layout.cshtml
    ，则可以跳到步骤4。如果没有，至少在布局中包括以下两行：

    在您的
    中：

    @Styles.Render（“~/Content/css”）
    关闭前的最后一行
    ：

    @Scripts.Render（“~/bundles/bootstrap”）
  • 现在尝试运行您的项目。您现在应该可以看到新创建的应用程序正在使用您的主题

    • 资源 有关如何在ASP.NET MVC 5中使用Twitter引导程序的更多信息、教程、提示和技巧，请查看

    • 一闪而过
      • 这可能有点晚了；但有人会发现它很有用

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

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

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

        您将在
        ~/Views/Shared/
        文件夹中找到这些文件

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

        当然，您必须在jQuery路径之后将路径添加到布局页面，这就是全部。

        如果您能够找到您的

        bootstrap.css文件

        及

        bootstrap.min.js文件

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

        首先下载您最喜欢的主题，即

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

        然后在计算机中找到现有文件并用新下载的文件替换它们

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

        i、 e

        那你就可以走了

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

        我确实有一篇关于MSDN的文章-使用VS 2012、VS 2013和VS 2015创建具有自定义引导主题/布局的ASP.NET MVC，还附带了一个演示代码示例。。 请参考下面的链接。

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

        这可能不是您想要的，但它相当简单。在您的内容文件夹中，包括
        .css
        主题，并在您的应用程序\u Start BundleConfig.cs中，将
        ~/Content/bootstrap.css
        替换为
        ~/Content/yourtheme.bootstrap.css
        谢谢。这是一个优雅的回答。你对空调怎么办