仅将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>我希望所有其他表单保持不变，因为我不能同时更改所有表单。有没有简单的方法可以做到这一点？我可以遍历Bootstrap CSS中的每个样式并添加一个父选择器(例如，'p‘将变成'div.bootstrap p')，但这将花费很长时间，并且很容易遗漏样式。
编辑:如果这样的事情是不可能的，有没有一个免费的工具，可以从一个文件中提取所有的样式，添加一个前缀，然后再次保存它们？
回答 2
Stack Overflow用户
发布于 2013-02-27 22:55:15
对于Bootstrap 3，如果使用less会更容易
下载Bootstrap源代码并生成style.less文件，如下所示：
.bootstrap {
@import "/path-to-bootstrap-less.less";
@import "/path-to-bootstrap-responsive-less.less";
}最后，您必须编译较少的文件；有许多替代方案
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.cssStack Overflow用户
发布于 2012-08-06 23:46:49
这很难。你不能Apply different css stylesheet for different parts of the same web page。
我想唯一的办法就是为你的内容创建一个单独的文件来采用bootstrap样式，并像这样将它i-frame到页面中：
<iframe src="/content-to-take-bootstrap-styles.html" ></iframe>然后在content-to-take-bootstrap-styles.html中引用标题中的引导样式表。但是你有iframe的所有复杂性--例如:iframe元素不能适应你的内容的长度。
https://stackoverflow.com/questions/11831346
复制相似问题
腾讯云开发者
