Twitter bootstrap 以较少的时间为twitter引导的所有选择器添加前缀

我想开始学习Twitter引导并将其合并到我的站点（从表单元素开始），但如果我按原样包含它，它会破坏站点的其余部分

我想为所有选择器添加前缀，这样我就可以逐渐添加引导样式的内容：

因为我才刚刚开始学习，我真的不知道用

less

可以做什么。我已经手动完成了选择器前缀，但我很好奇是否有办法使用

less

来实现这一点，这样我就可以通过修改引导来学习它，同时仍然将它隔离在所需的引导容器中

现在，我必须在编译较少的文件后的第二步中添加前缀

---

谢谢你的建议

您可以编辑bootstrap.less文件，并将所有内容封装在如下内容中：

.bootstrap {
    // CSS Reset
    @import "reset.less";

    // Core variables and mixins
    @import "variables.less"; // Modify this for custom colors, font-sizes, etc

    [...]

}

更新：

由于引导文件使用less&运算符，例如：

// list-group.less (bootstrap 3.0.0)
.list-group-item {
    [...]
    a& {
        [...]
    }
}

以上代码的编译将以语义错误且没有前缀的规则结束。引导：

a.bootstrap .list-group-item {
  color: #555555;
}
a.bootstrap .list-group-item .list-group-item-heading {
  color: #333333;
}
a.bootstrap .list-group-item:hover,
a.bootstrap .list-group-item:focus {
  text-decoration: none;
  background-color: #ecf0f1;
}

$ lessc bootstrap.less | sed -e 's/\(.\+\).bootstrap \(.\+\)/.bootstrap \1\2/g' > output.css

要修复此问题，请使用以下方法编译引导：

a.bootstrap .list-group-item {
  color: #555555;
}
a.bootstrap .list-group-item .list-group-item-heading {
  color: #333333;
}
a.bootstrap .list-group-item:hover,
a.bootstrap .list-group-item:focus {
  text-decoration: none;
  background-color: #ecf0f1;
}

$ lessc bootstrap.less | sed -e 's/\(.\+\).bootstrap \(.\+\)/.bootstrap \1\2/g' > output.css

现在，上述行将编译为：

.bootstrap a .list-group-item {
  color: #555555;
}
.bootstrap a .list-group-item .list-group-item-heading {
  color: #333333;
}
.bootstrap a .list-group-item:hover,
.bootstrap a .list-group-item:focus {
  text-decoration: none;
  background-color: #f5f5f5;
}

---

这并没有真正解决命名冲突的问题。它将一个特定的类作为选择器放在所有引导CSS类之前。因此，要使用它们，您必须将HTML包装在具有特定名称的类的容器（如DIV）中，然后引导CSS将仅应用于该DIV中。这有一些问题

一个问题是引导CSS包含BODY和HTML的定义，如果在它们前面放置选择器，这些定义将无法应用

另一个问题是，在自定义CSS中，您在引导类中定义了一些样式，如“.dropdown”或“.table”。您可能会定义引导未定义的样式方面，您可能会覆盖引导样式或将其弄乱。例如，如果引导在“.table”类上定义了填充，而您在自己的“.table”类上定义了边距，那么在呈现页面时，它们将根据CSS优先级规则进行组合。即使您将特定的自定义选择器类放在引导程序的“.table”类前面，并将不同的选择器类放在您自己的“.table”类前面，它们仍然会合并并交互

---

使用这样的选择器类并不是真正意义上的“名称空间”，也不能完全隔离CSS。实现真正隔离的最佳方法是在每个类名前面加上唯一的前缀字符串。

为了避免periklis回答中提到的问题：创建自己的

前缀引导。更少的
重新编译编译后的
引导。css
在：

.bootstrap {
  @import (less) 'dist/css/bootstrap.css';
  @import (less) 'dist/css/bootstrap-theme.css'; /* optional */
}

那么就不需要
sed
命令了。拉尔斯·尼尔森的回答中提到的观察结果当然仍然有效。
哈，我就知道这会非常棒！谢谢佩里克利斯。啊，天才。这是一种非常简单的方法。但是前缀意味着引导javascript将不再工作。“实现真正隔离的最佳方法是在每个类名前面加上唯一的前缀字符串。”+2