6

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

我想为所有选择器添加前缀，以便我可以逐渐添加引导样式的内容，如下所示：<div class="bootstrap"><!-- bootstrap styled stuff here --></div>

因为我才刚刚开始学习，所以我真的不知道less. 我已经手动完成了选择器前缀，但我很好奇是否有办法做到这一点，less以便我可以通过修改引导程序来学习它，同时仍将它隔离在所需的引导程序容器中。

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

感谢您的任何建议！

4

3 回答 3

20

为了避免 periklis 的回答中提到的问题：创建自己的prefixed-bootstrap.less重新编译编译 bootstrap.css的：

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

那么就不需要sed命令了。Lars Nielsen 的回答中提到的观察结果当然仍然有效。

于 2013-11-06T13:04:33.803 回答
15

您可以编辑文件 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& {
        [...]
    }
}

上述代码的编译最终会得到语义错误且没有以 .bootstrap 为前缀的规则：

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;
}
于 2012-06-22T07:29:07.560 回答
11

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

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

另一个问题是，在您的自定义 CSS 中，您将一些样式定义为 Bootstrap 类，如“.dropdown”或“.table”。您可能会定义 Bootstrap 未定义的样式的各个方面，并且您可能会覆盖 Bootstrap 样式或将它们弄乱。例如，如果Bootstrap在“.table”类上定义了padding，而你在自己的“.table”类上定义了margin，那么它们在页面渲染时会按照CSS优先级规则进行组合。即使你在 Bootstrap 的 ".table" 类前面放了一个特定的自定义选择器类，在你自己的 ".table" 类前面放了一个不同的选择器类，它们仍然会组合和交互。

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

于 2013-06-06T09:44:42.037 回答