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

【问题标题】：Ordering of the CSS stylesheets with bootstrap and kendo-bootstrap使用 bootstrap 和 kendo-bootstrap 对 CSS 样式表进行排序
【发布时间】：2016-08-28 21:07:48
【问题描述】：

我有 ASP.NET MVC 应用程序，并且我使用 Telerik 的 UI for ASP.NET MVC 框架进行一些控件。
1> 应用程序正在使用bootstrap 3.3.6
2> Telerik 还为其控件提供引导样式。所以我也捆绑了这些样式。
3> 我也有自己的 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 吗？推荐的顺序是什么？

【问题讨论】：

标签： asp.net-mvc css kendo-ui telerik

【解决方案1】：

这将是您的 razor (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")

这样引导程序不会覆盖 kendo-ui 库设置的样式。

【讨论】：