集成 css 框架仅在指定的 class 或 id 中工作

Question

我的问题是我的项目与另一个网站的集成。例如，我的网站是从 0 开始构建的，而我指定的系统是在 boostrap 或基础上构建的。当我尝试将它集成到我的网站时，我所有的网站都开始使用 boostrap 或基础样式。仅在例如

中可以使此 css 工作

<div id="boostrap_only">
    <table class="table table-bordered">...</table> <!-- here works -->
</div>

<table class="table table-bordered">...</table> <!-- here don't work -->

Answer 1

有很多方法。

1- 使用 less（在你的 less 文件中像这样包含你的 bootstrap）

.bootstrap {
    @import "/path-to-bootstrap-less.less"
    @import "/path-to-bootstrap-responsive-less.less"
}

2- 详细解决方案：

最后的解决方法是使用 SASS（有人 off-site 推荐），因为它允许您嵌套元素，然后自动生成最终的 CSS。一步一步的过程是：

将两个 Bootstrap 文件（bootstrap.css 和 bootstrap-responsive.css）连接成 bootstrap-all.css.
创建一个新的 SASS 文件 bootstrap-all.scss，内容为 div.bootstrap {.
将 bootstrap-all.css 附加到 bootstrap-all.scss。
通过将 } 附加到 bootstrap-all.scss 来关闭 div.bootstrap 选择器。
运行 SASS 在 bootstrap-all.scss 上生成最终的 CSS 文件。
运行 YUI Compressor 生成最小化版本的最终文件。
将最小化版本添加到 head 元素并将我想要应用样式的所有内容包装在 <div class="bootstrap"></div>。

参考链接 link 1

集成 css 框架仅在指定的 class 或 id 中工作

Integrate css framework work only in specified class or id

css

twitter-bootstrap

zurb-foundation

twitter-bootstrap-3