我有一个现有的网站,其中包含大量旧页面和表格,我正在尝试逐步过渡到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'),但这需要很长时间,并且很容易错过样式。
编辑:如果无法做到这一点,是否有免费工具可以从文件中提取所有样式,添加前缀然后再将其保存回来?
答案 0 :(得分:45)
对于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
答案 1 :(得分:26)
最后的修复是使用SASS(由异地人推荐),因为它允许您嵌套元素然后自动生成最终的CSS。这个过程一步一步是:
bootstrap.css
和bootstrap-responsive.css
)连接到bootstrap-all.css
。bootstrap-all.scss
创建新的SASS文件div.bootstrap {
。bootstrap-all.css
附加到bootstrap-all.scss
。div.bootstrap
追加到}
,关闭bootstrap-all.scss
选择器。bootstrap-all.scss
上运行SASS以生成最终的CSS文件。<div class="bootstrap"></div>
中包装我想要应用的样式。答案 2 :(得分:15)
如果由于工作/其他原因无法使用LESS / SASS,我想出了一个CSS解决方案。
示例:
.bootstrap @media (min-width:768px){.lead{font-size:21px}}
需要更换为
@media (min-width:768px){.bootstrap .lead{font-size:21px}}
一种蛮力方法,所以一定要先尝试上面的LESS / SASS方法。
<div>
No Bootstrap
</div>
<div class="bootstrap">
Yes Bootstrap
</div>
答案 3 :(得分:4)
我对这些答案中的任何一个都不满意。使用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样式。
答案 4 :(得分:3)
这很难。你不能Apply different css stylesheet for different parts of the same web page。
我怀疑这样做的唯一方法是为你的内容创建一个单独的文件来获取引导样式,然后将它构建到页面中,如下所示:
<iframe src="/content-to-take-bootstrap-styles.html" ></iframe>
然后在content-to-take-bootstrap-styles.html
引用标题中的bootstrap样式表。但是你有iframe的所有复杂性 - 例如:iframe元素不会增长以适应你的内容的长度。
答案 5 :(得分:3)
我有一个简单的解决方案。
将bootstrap css内容复制到此(http://css2sass.herokuapp.com/)在线css到scss / sass转换器。
将您的代码信息(例如div.bootstrap{
)添加到scss内容的开头,并在结尾处关闭代码。
将整个scss内容复制到此scss转换为css转换器(https://www.sassmeister.com/)并将其转换为:)
答案 6 :(得分:0)
您可以使用随时可用的隔离css for Bootstrap 4.1(使用LESS编译) -
https://github.com/cryptoapi/Isolate-Bootstrap-4.1-CSS-Themes
它有主题的隔离css -
要使用Bootstrap CSS,只需将HTML包装在带有bootstrapiso类的div中,如下所示:
<div class="bootstrapiso">
<!-- Any HTML here will be styled with Bootstrap CSS -->
</div>
并使用文件夹css4.1中的任何css样式,如下所示:
<head>
<link rel="stylesheet" href="css4.1/bootstrapcustom.min.css" crossorigin="anonymous">
...
</head>
// https://github.com/cryptoapi/Isolate-Bootstrap-4.1-CSS-Themes
完成!