c# - 地铁 UI CSS ASP NET MVC

标签 c# css asp.net-mvc asp.net-mvc-4 metro-ui-css

<分区>

编辑问题以包含 desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem .这将有助于其他人回答问题。

关闭 8 年前。

Improve this question

我想在我的应用中使用 METRO UI CSS:

创建 ASP NET MVC 元素
我通过以下方式下载了 METRO UI MVC:

包管理器控制台:PM> Install-Package Metro.UI.CSS

将包更改为此图片:

        bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
                        "~/Scripts/jquery-{version}.js",
                        "~/Scripts/metro-ui/jquery.ui.widget.js",
                        "~/Scripts/metro-ui/metro.min.js"
                        ));

        bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
                    "~/Scripts/jquery.validate*",
                    "~/Scripts/metro-ui/jquery.ui.widget.js"
                    ));

        // Use the development version of Modernizr to develop with and learn from. Then, when you're
        // ready for production, use the build tool at http://modernizr.com to pick only the tests you need.
        bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(
                    "~/Scripts/modernizr-*"));

        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",
                  "~/Content/metro-ui/css/metro-bootstrap.css",
                  "~/Content/metro-ui/css/metro-bootstrap-responsive.css",
                  "~/Content/metro-ui/css/iconFont.min.css"));
    }

我的 _Layout.cshtml 头:

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@ViewBag.Title - My ASP.NET Application</title>

    <link href="Content/metro-bootstrap.css" rel="stylesheet" />
    <link href="Content/metro-bootstrap-responsive.css" rel="stylesheet" />

    <script src="Scripts/jquery-1.10.2.js"></script>
    <script src="Scripts/jquery.widget.min.js"></script>
    <script src="Scripts/metro.min.js"></script>

    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/modernizr")
    @Styles.Render("~/Content/metro-ui/css")

</head>

在 body 结束之前我有:

   <body class="metro">
      (...)
      @RenderBody()

      @Scripts.Render("~/bundles/jquery")
      @Scripts.Render("~/bundles/metro-ui")
      @Scripts.Render("~/bundles/bootstrap")
      @RenderSection("scripts", required: false)
   </body>
</html>

我的解决方案资源管理器部分如下所示:

enter image description here