Twitter bootstrap 限制引导样式的范围

如何将引导限制在div的范围内？我需要将引导样式表嵌套在一个ExtJS应用程序中，用于特定的div，两者都相互冲突，因为它们需要自己的body、ul、li、a等等

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

您可以重新创建和更改

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
  • 无网格
  • /混血儿/

如果你想限制引导的范围，你必须加入你的mystyles.less（正确的方式）：

我们必须导入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;
 }

.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的作用域样式：

去下载引导源代码

按照指南安装grunt。总结：

Bootstrap使用Grunt作为其构建系统，使用方便的方法 与框架合作。这就是我们如何编译代码，运行测试， 还有更多

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

然后，从命令行：使用

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'$前缀