我有一个现有的网站与许多旧网页和表格布局,我正试图逐步过渡到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'),但这将花费很长时间,并且很容易遗漏样式。
编辑:如果这样的事情是不可能的,有没有一个免费的工具,可以从一个文件中提取所有的样式,添加一个前缀,然后再次保存它们?
发布于 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.css
发布于 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
复制相似问题