Twitter bootstrap 限制引导样式的范围
如何将引导限制在div的范围内?我需要将引导样式表嵌套在一个ExtJS应用程序中,用于特定的div,两者都相互冲突,因为它们需要自己的body、ul、li、a等等 我试图避免手动编辑bootstrap.css(或将其保持在最小值),以便可以轻松更新它 您可以重新创建和更改Twitter bootstrap 限制引导样式的范围,twitter-bootstrap,Twitter Bootstrap,如何将引导限制在div的范围内?我需要将引导样式表嵌套在一个ExtJS应用程序中,用于特定的div,两者都相互冲突,因为它们需要自己的body、ul、li、a等等 我试图避免手动编辑bootstrap.css(或将其保持在最小值),以便可以轻松更新它 您可以重新创建和更改bootstrap.less以包装引导样式: .bootstrap-scope { //put bootstrap @includes in here } 然后,在bootstrap项目的根目录中,运行make生成bo
bootstrap.less
以包装引导样式:
.bootstrap-scope {
//put bootstrap @includes in here
}
然后,在bootstrap项目的根目录中,运行make
生成bootstrap.css
文件
您将丢失引导程序分配给body和html标记的全局样式,但您可能不需要它们
然后,在你的应用程序中,给你想要的容器提供
.bootstrap scope
类。有一种更简单的方法来实现这个合法的要求:替换}换行符,换行符使用以前的值和你的类范围。很容易进入,例如,升华:
- 选择}\r\n
- Alt+F3(选择所有引用)
- 替换为}\r\n.bootstrap-scope
- 选择\r\n
- Alt+F3(选择所有引用)
- 替换为\r\n.bootstrap-scope
就这样!这将是相当容易的更新,因为更换需要大约一分钟。希望我的回答能有所帮助。由于修改less/bootstrap.less的结果对我来说不够好(请参阅本文底部的原因),我最终过滤了bootstrap.css:
var css = require('css'), fs = require('fs');
var prefix = '.bootstrap-scope';
var inFile = 'bootstrap.css';
var cssAst = css.parse(fs.readFileSync(inFile, 'utf8'));
prefixNode(cssAst);
console.log(css.stringify(cssAst));
function prefixSelector(sel){
if (sel.match(/^@/)) return sel;
var m = sel.match(/(^| )(body|html)($|\W.*)/i);
if (m)
return m[1] + prefix + m[3];
else
return prefix + ' ' + sel;
}
function prefixNode(node) {
if (node.selectors) {
node.selectors = node.selectors.map(prefixSelector);
} else if (node.stylesheet) {
node.stylesheet.rules.forEach(prefixNode);
} else if (node.rules) {
node.rules.forEach(prefixNode);
}
}
由于bootstrap.css是生成的,所以也可以盲目地执行(解决方案类似于Alexey的,但也处理一些极端情况):
至于修改less/bootstrap.css并调用grunt生成dist/css/bootstrap.css(Andrew Homeyer的解决方案),在某些情况下(至少在bootstrap 3中)似乎效果不佳:
- 各种mixin,如.make网格列(来自less/mixins.xml)的前缀都不正确。例如:
.bootstrap-scope .col-sm-1, .col-sm-2, .col-sm-3,
- 其使用受到限制:
变成.caret { .btn-default & {
而不是我们想要的:.btn-default .bootstrap-scope .caret {
.bootstrap-scope .btn-default .caret {
- mystyles.less
- mystyles.css
- /引导/
- 无引导
- bootstrap.css
- 无网格
- /混血儿/
.your-class-to-limit-bootstrap-scope .col-xs-1,
.your-class-to-limit-bootstrap-scope .col-sm-1,
.your-class-to-limit-bootstrap-scope ...
.your-class-to-limit-bootstrap-scope .col-lg-12 {
position: relative;
min-height: 1px;
padding-left: 7px;
padding-right: 7px;
}
.your-class-to-limit-bootstrap-scope .col-xs-1,
.col-sm-1,
.col-md-1,
...
.col-lg-12 {
position: relative;
min-height: 1px;
padding-left: 15px;
padding-right: 15px;
}
但是,如果导入无引导文件,则会得到范围不正确的css(错误方式):
.your-class-to-limit-bootstrap-scope{
@import (less) "bootstrap/bootstrap.css";
}
.your-class-to-limit-bootstrap-scope{
@import "bootstrap/bootstrap.less";
}
因此,您将得到不正确的范围css,例如:
.your-class-to-limit-bootstrap-scope .col-xs-1,
.your-class-to-limit-bootstrap-scope .col-sm-1,
.your-class-to-limit-bootstrap-scope ...
.your-class-to-limit-bootstrap-scope .col-lg-12 {
position: relative;
min-height: 1px;
padding-left: 7px;
padding-right: 7px;
}
.your-class-to-limit-bootstrap-scope .col-xs-1,
.col-sm-1,
.col-md-1,
...
.col-lg-12 {
position: relative;
min-height: 1px;
padding-left: 15px;
padding-right: 15px;
}
扩展@Andrew Homeyer答案: 通过执行以下操作,我在Reactjs应用程序中获得了boostrap的作用域样式:
npm安装-g grunt cli
。导航到root/bootstrap/目录,然后运行npm安装
。npm将查看package.json文件并
自动安装此处列出的必要的本地依赖项。
完成后,您将能够运行各种Grunt命令
从命令行提供
less/bootstrap.less
从下载的源代码编辑为以下内容:.bootstrap作用域{…将所有@imports粘贴到此处…}
grunt dist
并将新的dist文件夹复制到我的项目中在App.js
import./style/bootstrap/css/bootstrap.min.css'中代码>
类似的讨论在@jtlindsey答案上展开。如果你想使用Bootstrap4,你必须做一些小的改变 不要编辑
less/bootstrap.less
您必须编辑scss/bootstrap.scss
然后您必须按顺序执行此命令:
gem install bundler
bundle install
npm run dist
新的bootstrap.min.css将在dist文件夹中生成
您可以在此处获得更多信息:
无需分叉/编辑原始引导。 只需像这样将其导入包装到您的文件中(在我的示例中为sass): 我创建了文件“bootstrap scope limit.scss”(在需要引导的地方导入): 重要注意事项强> 请记住,bootstrap有一些在使用这种方法时不会应用的身体样式。但是,如果某些动态内容必须使用bootstrap或不使用bootstrap,它可以通过向元素添加“bootstrap inside”类来启用或禁用整个页面的bootstrap,从而使您能够使用JS控制引导 您应该注意的另一个问题是:一些覆盖引导样式的插件可能会出现问题,因为带有新类包装的引导样式变得更强大(更具体),并且不能被未包装的插件覆盖
对于webpack案例,我建议使用此加载程序:包装整个包,您可以稍后将其作为应用程序(div?)的一部分使用我所知道的唯一比此脚本更糟糕的是引导程序本身,但这可能仍然是一段时间内最好的答案:
prefix=“#bs431”;cat bootstrap.css |而IFS=''read-r行;如果echo“$line”| egrep-i'({124;,)$”| egrep-iv“\@media”| wc-l | egrep-iq“^0$”;那么echo“$line”;否则echo“$line”| perl-pe的s/^(\s+)/\1'$前缀