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

Question

我有从头开始构建的网站，并且我指定的系统构建在 Bootstrap 或基础上。当我尝试将其集成到我的网站上时，我的所有网站都开始使用 Bootstrap 或基础样式。

仅在示例中才能使用此 CSS

<div id="bootstrap_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 {
    @import "/path-to-bootstrap-less.less"
    @import "/path-to-bootstrap-responsive-less.less"
}

2-详细解决方案：

最终的解决方案是使用 SASS（由场外人员推荐），因为它允许您嵌套元素，然后自动生成最终的 CSS。逐步过程是：

1. 将两个 Bootstrap 文件（

   bootstrap.css

   和

   bootstrap-responsive.css

   ）连接到

   bootstrap-all.css

   。
2. 创建一个新的 SASS 文件

   bootstrap-all.scss

   ，其内容为

   div.bootstrap {

   。
3. 将

   bootstrap-all.css

   附加到

   bootstrap-all.scss

   。
4. 通过将

   div.bootstrap

   附加到

   }

   来关闭

   bootstrap-all.scss

   选择器。
5. 在

   bootstrap-all.scss

   上运行 SASS 以生成最终的 CSS 文件。
6. 在最终文件上运行 YUI Compressor 以生成最小化版本。
7. 将最小化版本添加到 head 元素，并将我想要应用样式的所有内容包装在

   <div class="bootstrap"></div>

   中。

供参考，请参阅此链接链接1