我有一个现有的网站,上面有很多用表格布置的旧页面和表格,我正尝试逐步过渡到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’),但这会花费很长时间,而且容易遗漏样式。
编辑:如果不可能,是否有免费的工具可以从文件中提取所有样式,添加前缀,然后再次保存?
最终的解决方法是使用SASS(有人在异地推荐),因为它允许您嵌套元素,然后自动生成最终的CSS。逐步的过程是:
bootstrap.css
bootstrap-responsive.css
bootstrap-all.css
bootstrap-all.scss
div.bootstrap {
div.bootstrap
}
<div class="bootstrap"></div>