个人中心
gpt4 book ai didi

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

转载 作者：行者123 更新时间：2023-12-03 05:16:28 24 4
gpt4 key购买 nike

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

最佳答案

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

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

<小时/>

ASP.NET MVC 5 模板:工作原理

本演练介绍如何创建 MVC 5 项目以及幕后情况。查看 this blog 中 MVC 5 模板的所有功能.

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

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

    Example of choosing MVC Template

  3. MVC 5 模板创建一个 MVC 应用程序，该应用程序使用 Bootstrap 提供响应式设计和主题功能。在引擎盖下，模板包括 bootstrap 3.* nuget package安装 4 个文件:bootstrap.css , bootstrap.min.css , bootstrap.js ，和bootstrap.min.js 。

    Example of installed css and js

  4. 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"));

  5. 这使得您无需预先进行任何配置即可运行应用程序。现在尝试运行您的项目。

    Default Application Running

<小时/>

在 ASP.NET MVC 5 中应用 Bootstrap 主题

本演练介绍如何在 MVC 5 项目中应用 Bootstrap 主题

  1. 首先，下载css您想要应用的主题。对于此示例，我将使用 Bootswatch 的 Flatly 。包括下载的flatly.bootstrap.css和flatly.bootstrap.min.css在 Content文件夹(请确保也包含在项目中)。

  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。如果没有，至少将这两行与 Bootstrap HTML template 一起包含在您的布局中。 :

    在您的 <head> 中:

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

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

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

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

    Default template using flatly theme

<小时/>

资源

查看this awesome 30 day walk-through guide通过 James Chambers有关如何将 Twitter Bootstrap 与 ASP.NET MVC 5 结合使用的更多信息、教程、提示和技巧。

关于asp.net-mvc - 如何在 MVC 5 项目中从 bootswatch 或 wrapbootstrap 实现主题？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/21839351/

24 4 0
文章推荐： loops - Lua 上的 For 循环
文章推荐： vim - 如何在vim中将选定的行复制到剪贴板
文章推荐： multithreading - 好的多线程设计是否会过早优化？
文章推荐： web-applications - Web应用程序相对于桌面应用程序的优势
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com