我有一个现有的网站,其中有很多旧页面和表格,我正试图逐渐过渡到 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'),但这会花费很长时间,而且很容易错过样式。
编辑:如果这样的事情不可能,是否有免费工具可以从文件中提取所有样式,添加前缀,然后再将它们保存回来?
最佳答案
对于 Bootstrap 3,如果使用 less
会更容易:
下载 Bootstrap 源代码并制作一个 style.less
文件,如下所示:
.bootstrap {
@import "/path-to-bootstrap-less.less";
@import "/path-to-bootstrap-responsive-less.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.css
关于css - 仅将 CSS 样式应用于某些元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11831346/