Question

我有一个现有项目，过去没有Bootstrap（3），但现在我必须改变它并保留旧的CSS。

我目前的CSS订单：

var bundleCSS = new StyleBundle("~/Views/bundle/newBundle").Include(
                    "~/Views/Shared/normalize.css",
                    "~/Scripts/jquery.ui/jquery-ui-latest.custom.css",
                    "~/Scripts/jquery.jqGrid/ui.jqgrid.css",
                    "~/Scripts/sweetalert/sweet-alert.css",
                    "~/Content/bootstrap.css",
                    "~/Views/Shared/OldButNeededLayout.css",
                    "~/Content/custom.css"); //will be rendered in that order

custom.css用于修复将bootstrap.css添加到项目中的所有错误。

这里的问题是，OldButNeededLayout.css有大约3000行的css-code，顺便提一下当前的项目很大。

因此，当用旧css覆盖引导程序而不是通过添加引导程序来修复错误时，比我得到不可预测的结果。（因为我不知道它会在哪里改变某些东西）

如何解决将bootstrap css / js集成到（我的）现有项目中的问题？

Answer 1

这听起来像是一种混乱Bootstrap的混乱方式，同时试图避免对OldButNeededLayout文件进行任何更改......

根据我的经验，将Bootstrap集成到现有项目中是一项艰巨的任务，需要对HTML进行大量修改（添加类和修改标记结构）以及对现有CSS进行大量修改，以使其与自举。

您的方法会使维护变得困难，并且还会向客户端提供大量不必要的CSS代码。

我建议：

从项目中删除OldButNeededLayout css并清除 custom的内容，以便绝大多数的css来自自举。
显然，这看起来与您的网站不同，所以
有条不紊地修复需要更改的每个布局或样式，在你的custom css中，直到你有一个类似于你的网站 pre-Bootstrap网站。使用来自OldButNeededLayout的位必要的，但要确保每个样式属性都是必要的。

当然，这是一项很多工作，但它会为客户提供一个更易于维护，可预测和简洁的项目。

我认为您不能将Bootstrap放到大型项目中，并且不希望对现有的HTML和CSS进行重大更改。

Answer 2

以下建议并非理想，并且确实有更好的方式来实现您的需求，但我的建议符合您的要求...

在新的custom.css文件中，您可以在声明元素时尝试更具体。因此，如果在OldButNeededLayout.css中你覆盖了Bootstrap的风格，例如：

.divclass .jumbotron h1 {
   color: red;
}

您可以在custom.css文件中声明更高级别的特异性，以确保它将覆盖您在OldButNeededLayout.css中的内容：

.parent .divclass .jumbotron h1 {
   color: blue;
}

继承/覆盖来自不同外部文件的现有CSS规则

2 个答案: