仅将CSS样式应用于某些元素
我有一个现有的网站，有很多旧的页面和表格，我试图逐步过渡到CSS。 我想使用Twitter Bootstrap样式表 – 特别是表单的样式 – 但只能在我明确要求的页面部分。 例如，我可能会将整个表单包含在div中，如下所示：
<div class="bootstrap"> <!-- everything in here should have the Bootstrap CSS applied --> <form> <p><label for="text_input">Label</label><input type="text" id="text_input" /></p> </form> </div> 我希望所有其他forms保持与现在一样，因为我不能同时改变它们。 有一个简单的方法来做到这一点？ 我可以通过Bootstrap CSS中的每一种风格，并添加一个父select器（例如'p'将变成'div.bootstrap p'），但是这将花费很长时间，并且很容易错过样式。
编辑：如果这样的事情是不可能的，是否有一个免费的工具，可以从文件中提取所有样式，添加一个前缀，然后再保存回来？
对于Bootstrap 3，如果使用less ，则更容易：
下载Bootstrap源代码并制作一个style.less文件，如下所示：
.bootstrap { @import "/path-to-bootstrap-less.less"; @import "/path-to-bootstrap-responsive-less.less"; }
最后，你必须编译less文件; 有很多select
https://github.com/cloudhead/less.js/wiki/Command-Line-use-of-LESS https://github.com/cloudhead/less.js/wiki/GUI-compilers-that-use-LESS .js文件
或者使用npm安装less然后将style.less文件编译到style.css ：
npm install -g less lessc style.less style.css
最后的解决方法是使用SASS （由某个人推荐），因为这样可以嵌套元素，然后自动生成最终的CSS。 一步一步的过程是：
- 将两个Bootstrap文件（
bootstrap.css和bootstrap-responsive.css）连接到bootstrap-all.css。 - 用内容
div.bootstrap {创build一个新的SASS文件bootstrap-all.scss。 - 将
bootstrap-all.css附加到bootstrap-all.scss。 - 通过在
bootstrap-all.scss追加}来closuresdiv.bootstrapselect器。 - 在
bootstrap-all.scss上运行SASS生成最终的CSS文件。 - 在最终文件上运行YUI Compressor以生成最小化版本。
- 将最小化版本添加到head元素，并将所有样式包裹在
<div class="bootstrap"></div>。
如果因为工作/其他原因不能使用LESS / SASS，我想出了一个CSS解决scheme。
- 我使用这个网站， http://www.css-prefix.com/ ，并复制/粘贴bootstrap.min.css到那里。 我设置了prefix ='。bootstrap'和spacer =''。 除了不完美之外，它将以.bootstrap为前缀。
- 如果你为'.bootstrap @media'做了一个grep，你会发现右括号的第一个类没有.bootstrap作为父类。 添加.bootstrap到所有这些事件，约68我。
- 然后用'@media'replace所有'.bootstrap @media'。
- 最后一步是用“@”代替所有'.bootstrap @'（应该是大约5次出现）。
例：
.bootstrap @media (min-width:768px){.lead{font-size:21px}}
需要被replace
@media (min-width:768px){.bootstrap .lead{font-size:21px}}
一种暴力方法，所以一定要先尝试上面的LESS / SASS方法。
<div> No Bootstrap </div> <div class="bootstrap"> Yes Bootstrap </div>
这很难。 你不能为同一个网页的不同部分应用不同的CSS样式表 。
我怀疑要做到这一点的唯一方法是为您的内容制作一个单独的文件，以采取引导样式，并我这样框架到页面中：
<iframe src="/content-to-take-bootstrap-styles.html" ></iframe>
然后在content-to-take-bootstrap-styles.html引用标题中的引导样式表。 但是，你有所有iframes的复杂性 – 例如：iframe元素将不会增长以适应你的内容的长度。
我对这些答案中的任何一个都不满意。 用较less的范围来规定各种缺陷。 例如，Clearfix都搞砸了。 和像button.close规则成为button.bootstrap close而不是我真正想要的： .bootstrap button.close 。
我采取了不同的方法。 我正在使用PostCSS来处理Bootstrap随附的开箱即用CSS。 我正在使用Scopify插件来用.bootstrap范围来规定每个规则。
这大部分到达那里。 当然，也有html和body规则成为.bootstrap html和.bootstrap body ，变得不合理。 不用担心…我可以写一个PostCSS转换来清理它们：
var elevateGlobalsPlugin = postcss.plugin('elevateGlobals', function(opts) { return function(css, result) { css.walkRules(function(rule) { rule.selector = rule.selector.replace('.bootstrap html', '.bootstrap'); rule.selector = rule.selector.replace('.bootstrap body', '.bootstrap'); }); } });
现在，我可以通过在顶层添加class="bootstrap"来隔离所有的Bootstrap样式。
