限制引导程序样式的范围

Question

如何将Bootstrap限制为div的范围？我需要将ExtstS应用程序中的Bootstrap样式表嵌套到特定的div中,并且两者都发生冲突,因为它们需要自己的主体,ul,li,a等.

我试图避免手动编辑bootstrap.css(或将其保持在最低限度),以便可以轻松更新.

Answer 1

您可以分叉引导程序 repo并更改bootstrap.less以包装引导程序样式:

.bootstrap-scope {
    //put bootstrap @includes in here
}

然后,在引导项目的根目录中,运行make以生成该bootstrap.css文件.

你将丢失全局样式bootstrap分配给body和html标签,但你可能不想要它们.

然后,在您的应用中,为您提供您想要的.bootstrap-scope课程容器.

Answer 2

由于修改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的,但也处理一些极端情况):

perl -lpe 'BEGIN { $prefix = ".bootstrap-scope" } if (($indent, $s, $sep) = /^(\s*)([^@\s].*?)(\s*[,{])$/) { $s =~ /^(from|to)*$/ or $s =~ s/(^| )(body|html)($|\W.*)/$1$prefix$3/i or $s = "$prefix $s"; $_ = "$indent$s$sep" }' bootstrap.css

至于修改less/bootstrap.css并调用grunt来生成dist/css/bootstrap.css(Andrew Homeyer的解决方案),对于某些情况,它似乎不能很好地工作(至少在bootstrap 3中):

• 像.make-grid-columns这样的各种mixins(来自less/mixins.xml)最终得到了严重的前缀.例:

  .bootstrap-scope .col-sm-1,
    .col-sm-2,
    .col-sm-3,
  

• 在LESS中使用"&"是有限的:

  .caret {
    .btn-default & {
  

  变

   .btn-default .bootstrap-scope .caret {
  

  而不是我们想要的:

   .bootstrap-scope .btn-default .caret {
  

Answer 3

有更简单的方法来实现这个合法的要求:用以前的值和你的类范围替换} NEWLINE和NEWLINE.在Sublime中很容易:

• 选择}\r \n

• Alt + F3(选择所有出现次数)

• 替换为}\r \n.bootstrap-scope

• 选择,\ r \n

• Alt + F3(选择所有出现次数)

• 替换为\ r \n.bootstrap-scope

而已!由于更换大约需要一分钟,因此可以很容易地更新它.希望我的回答有所帮助

Answer 4

如果您具有以下文件结构:

• mystyles.less
• mystyles.css
• /引导/
  • bootstrap.less
  • bootstrap.css
  • grid.less
  • ...
  • /混入/

并且你想限制引导程序的范围,你必须放入你的mystyles.less(正确的方式):

.your-class-to-limit-bootstrap-scope{
    @import (less) "bootstrap/bootstrap.css";
}

我们必须导入bootstrap.css文件而不是bootstrap.less,但是使用(less)@import选项将文件视为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;
 }

但是如果你导入bootstrap less文件,你将得到一个错误的作用域css(错误的方式):

.your-class-to-limit-bootstrap-scope{
    @import "bootstrap/bootstrap.less";
}

因此,您将获得不正确的作用域css,例如:

.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;
}

Answer 5

扩展@Andrew Homeyer回答:

我通过执行以下操作在我的Reactjs应用程序中使用了defrap样式的boostrap:

1. 来到这里并下载引导源
2. 按照这里的指南安装grunt.摘要:

Bootstrap使用Grunt作为其构建系统,使用方便的方法来使用框架.这是我们编译代码,运行测试等的方法.

安装Grunt:要安装Grunt,必须先下载并安装node.js(包括npm).npm代表节点打包模块,是一种通过node.js管理开发依赖关系的方法.

然后,从命令行:全局安装grunt-cli npm install -g grunt-cli.导航到root/bootstrap /目录,然后运行npm install.npm将查看package.json文件并自动安装那里列出的必要的本地依赖项.完成后,您将能够运行命令行提供的各种Grunt命令.

3. less/bootstrap.less从下载的源代码编辑文件到以下内容:

.bootstrap-scope {...pasted all @imports here...}

4. 冉grunt dist和复制的新文件夹DIST到我的项目
   中App.js import './styling/bootstrap/css/bootstrap.min.css';.

这里类似的讨论

Answer 6

无需分叉/编辑原始引导程序。只需将其导入包装在您的文件中，如下所示（在我的情况下为 sass）：我创建了文件“bootstrap-scope-limit.scss”（我将其导入到需要 bootstrap 的位置）：

.bootstrap-inside {
  @import "~bootstrap-sass/assets/stylesheets/_bootstrap.scss";
  @import "~bootstrap-sass/assets/stylesheets/bootstrap/_theme.scss";
}

重要通知！

请记住，引导程序有一些主体样式在使用这种方法时不会应用。但它使您能够通过向元素添加“bootstrap-inside”类来使用 JS 控制引导程序，以便在某些动态内容必须使用或不使用引导程序时启用或禁用整个页面的引导程序。

您应该注意的另一个问题：一些覆盖引导样式的插件可能会出现问题，因为带有新类包装器的引导样式变得更强（更具体）并且不能被未包装的插件覆盖。

对于 webpack 情况，我建议使用此加载器：https://www.npmjs.com/package/wrap-css-loader来包装整个包，您稍后可以将其用作应用程序（div？）的一部分