Question

我有ASP.NET MVC应用程序，我使用Telerik的 UI for ASP.NET MVC 框架进行少量控制。
1 GT;该应用程序正在使用bootstrap 3.3.6
2 - ; Telerik还为其控件提供引导样式。所以我也捆绑了那些款式。
3 GT;我也有自己的site.css所以我可以覆盖一些样式。

这是我的BundleConfig.cs

    public class BundleConfig
    {
        public static void RegisterBundles(BundleCollection bundles)
        {
            // jQuery, bootstrap and kendo JavaScripts are bundled here



            // kendo bootstrap-theme CSS
            bundles.Add(new StyleBundle("~/Content/kendo-bootstrap/css").Include(
                      "~/Content/kendo/2016.1.412/kendo.common-bootstrap.min.css",
                      "~/Content/kendo/2016.1.412/kendo.bootstrap.min.css"));

            // bootstrap CSS
            bundles.Add(new StyleBundle("~/Content/bootstrap/css").Include(
                     "~/Content/bootstrap.min.css"));

            // site CSS
            bundles.Add(new StyleBundle("~/Content/css").Include(
                     "~/Content/site.css"));
        }
    }

这是我在layout.cshtml中引用它们的方式

    <html>
        <head>
            <meta charset="utf-8" />
            <meta name="viewport" content="width=device-width, initial-scale=1.0">


            @Styles.Render("~/Content/kendo-bootstrap/css")
            @Styles.Render("~/Content/bootstrap/css")
            @Styles.Render("~/Content/css")


            @Scripts.Render("~/bundles/jquery")
            @Scripts.Render("~/bundles/kendo/2016.1.412")
            @Scripts.Render("~/bundles/bootstrap")
            @Scripts.Render("~/bundles/modernizr")

        </head>
        <body>
        </body>
    </html>

我们需要按特定顺序引用CSS吗？什么是推荐的订单？

Answer 1

这将是您的剃刀（cshtml）文件中的顺序：

// Generic bootstrap css
@Styles.Render("~/Content/bootstrap/css")  
// Css that kendo overwrites or extends based on bootstrap
@Styles.Render("~/Content/kendo-bootstrap/css")
// Your own css that can override the previous css files
@Styles.Render("~/Content/css")

这样bootstrap不会覆盖kendo-ui库设置的样式。

使用bootstrap和kendo-bootstrap对CSS样式表进行排序

1 个答案: