当 <article> 具有“Bootstrap”类时，将 Bootstrap CSS 和 JS 应用于特定的 <div> 类答案

【问题标题】：Apply Bootstrap CSS and JS to Specific <div> Class when <article> Has Class "Bootstrap"当 <article> 具有“Bootstrap”类时，将 Bootstrap CSS 和 JS 应用于特定的 <div> 类
【发布时间】：2014-05-10 02:18:55
【问题描述】：

标题几乎说明了一切。我正在尝试将 Bootstrap 的 CSS/JS only 应用于 div 的类“bootstrap”，但 only 当 <article> 元素具有类“tag”时-load-bootstrap”。

所以，在下面的代码中：

<html>
  <head></head>
  <body>
    <article class="tag-load-bootstrap">
      <div class="bootstrap"></div>
      <div></div>
    </article>
  </body>
</html>

Bootstrap 的 CSS/JS 将应用于第一个 div，但不会应用于第二个。我已经尝试过很多不同的方法（例如，jQuery、LESS），但还没有太多的运气。任何帮助将不胜感激。鉴于此特定网站的要求，iframe 不是一个选项。

更新：这是一个指向我试图让它工作的页面的链接：http://coreyjmahler.com/2013/12/21/writer-pro-for-os-x-and-ios/。如您所见，页面底部的链接在设计时考虑了 Bootstrap，但未应用 Bootstrap CSS/JS。到目前为止，我已经尝试了两种不同的方法：

我在我网站的自定义 CSS 文件（即 coreyjmahler-com.css）中使用了 @import 并将其定向到 bootstrap.less，该文件又引用了 Bootstrap CDN。我不确定为什么这不起作用，但它没有。
目前，该站点在上述 bootstrap.less 文件的<head> 中有一个<link>，该文件保留了对 Bootstrap CDN 的引用。如您所见，这也不起作用。

【问题讨论】：

标签： javascript jquery css twitter-bootstrap less

【解决方案1】：

这会给你一个非常臃肿的 css，但使用 LESS：

.tag-load-bootstrap > .bootstrap{
    @import "bootstrap.less";
}

相反，我建议只扩展您需要的代码。

至于 JavaScript，只需在特定元素上使用您需要的任何内容，无论是数据属性还是编程 API。

【讨论】：

我添加了更多信息，因为我无法让这个特定的解决方案发挥作用。
当您尝试@import CDN 时，您尝试导入的文件是css 文件，但LESS 只能导入.less 文件，因此可以对其进行预处理。因此，如果您想以任何方式更改它，您必须将 Bootstrap 下载到您的计算机并在本地对其进行预处理，就像我上面解释的那样。
我下载了 LESS 文件，然后将它们上传到我的服务器。我现在在站点 (<link rel="stylesheet/less" type="text/css" href="/wp-content/css/bootstrap.less" />) 的标题中调用了 bootstrap.less 文件，但它似乎没有加载，我不确定为什么。
LESS 是一个预处理器，你不能用 css 文件来替代它。您需要在本地使用它，在您的计算机上，而不是在服务器上。您在计算机上编译 css，然后只将 css 上传到服务器。
如果我没记错的话，只要你有 LESS 处理器，LESS 文件就可以在网站上使用，不是吗？我相信这就是我所拥有的：<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/1.7.0/less.min.js"></script>

【解决方案2】：

如果您提供一个带有演示代码的 jsfiddle 链接，那将会很有帮助。

但是，根据您提供的信息，我可能会改用 css 选择器：

.tag-load-bootstrap .bootstrap { /*css here*/ }

【讨论】：

代替创建演示代码，我编辑了原始问题，并带有指向可以看到问题的实时页面的链接。