css - 仅在指定的类或ID中集成CSS框架工作

我的问题是我的项目集成到另一个网站。
例如，我的网站从0开始构建，而我的指定系统在boostrap或Foundation上构建。当我尝试将其集成到我的网站时，我所有的网站都开始使用boostrap或Foundation样式。
仅在例如可能使该CSS工作

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

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

最佳答案

有很多方法。

1-使用更少（在您的更少文件中包括这样的引导程序）

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

2-详细解决方案：

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


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


供参考，请参见此链接link 1