限制引导程序样式的范围

Posted 2021-04-30

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

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

答案

您可以fork the bootstrap repo并更改bootstrap.less以包装引导样式：

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

然后，在bootstrap项目的根目录中，运行make以生成bootstrap.css文件。

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

然后，在您的应用程序中，为您想要.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的，但也处理一些极端情况）：

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,
• "&" in LESS的用途有限： .caret { .btn-default & { 变 .btn-default .bootstrap-scope .caret { 而不是我们想要的： .bootstrap-scope .btn-default .caret {

另一答案

有更简单的方法来实现这个合法的要求：用以前的值和你的类范围替换} NEWLINE和NEWLINE。它很容易在例如升华：

• 选择} r n
• Alt + F3（选择所有出现次数）
• 替换为} r n.bootstrap-scope
• 选择， r n
• Alt + F3（选择所有出现次数）
• 替换为 r n.bootstrap-scope

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

另一答案

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

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

另一答案

扩展@Andrew Homeyer回答：

通过执行以下操作，我在我的Reactjs应用程序中获得了引导程序的作用域样式：

1. 去了here并下载了bootstrap源代码
2. 按照指南here安装grunt。摘要：

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

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

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

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

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

4. Ran grunt dist并将新的dist文件夹复制到我的项目中 在App.js import './styling/bootstrap/css/bootstrap.min.css';。

类似的讨论here

另一答案

无需分叉/编辑原始引导程序。只需将其导入包装在您的文件中就像这样（在我的情况下是sass）：我创建了文件“bootstrap-scope-limit.scss”（我在需要bootstrap的地方导入）：

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

重要通知！

请记住，bootstrap有一些使用这种方法时不会应用的体型。但它通过向元素添加“bootstrap-inside”类来为您提供控制bootstrap的能力，如果某些动态内容必须使用bootstrap，则启用或禁用整个页面的bootstrap。

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

---

对于webpack案例，我建议使用这个加载器：https://www.npmjs.com/package/wrap-css-loader来包装整个包，你可以将它作为你的应用程序的一部分使用（div？）以后

另一答案

扩展@jtlindsey答案。如果你想使用bootstrap 4，你必须做一些小改动。

而不是编辑less/bootstrap.less你必须编辑scss/bootstrap.scss

然后你必须按顺序执行这个命令：

gem install bundler
bundle install
npm run dist

并且在dist文件夹中生成新的bootstrap.min.css。

在这里您可以获得更多信息：https://getbootstrap.com/docs/4.0/getting-started/build-tools/

另一答案

我唯一知道的是肯定比这个脚本更糟糕的是bootstrap本身，但这可能仍然是一段时间内最好的答案：

prefix="#bs431"; cat bootstrap.css | while IFS='' read -r line; do if echo "$line" | egrep -i '({|,)$' | egrep -iv '@media' | wc -l | egrep -iq '^0$'; then echo "$line"; else echo "$line" | perl -pe 's/^(s+)?/1'"$prefix"' /g' | perl -pe 's/, (.|#|[|[a-zA-Z]{1})/, '"$prefix"' 1/g'; fi; done | perl -pe 's/'"$prefix"' :root/'"$prefix"'/g' > bootstrap.scoped.css