扩展 Bootstrap 3 LESS .btn-group 不起作用 [英] Extending Bootstrap 3 LESS .btn-group not working

问题描述

最终，我正在尝试用 LESS 完成以下样式.

<button class="btn btn-default" type="button" data-filter="*">显示全部</button><button class="btn btn-default" type="button" data-filter=".cd">CD</button><button class="btn btn-default" type="button" data-filter=".vinyl">乙烯基</button>

我有以下 HTML

<button type="button" data-filter="*">显示全部</button><button type="button" data-filter=".cd">CD</button><button type="button" data-filter=".vinyl">乙烯基</button>

我在一个 LESS 文件中导入了 Bootstrap 3

.filter {.btn-组；按钮 {.btn;.btn-默认；}}

将 .btn 和 .btn-default 添加到按钮时效果很好.但是将 .btn-group 添加到包装器.filter"不起作用.我无法弄清楚我做错了什么.如果我将类 .btn-group 手动添加到

class="filter btn-group"

它可以工作.

解决方案

已编辑

虽然我想不出完全实现您想要的方法，但在@seven-phases-max 的帮助和启发下，我能够调整该要点以获得您想要的结果.

要了解其工作原理，步骤"是:首先，将按钮选择器视为 .btn.btn-default.其次，找到 .btn-group 选择器的所有实例并将其替换为 .filter.然后，最后，在 .filter 中找到 .btn 的所有实例并将它们替换为按钮.

您可以通过扩展(在 Less v1.4.0+ 中可用)来完成此操作.下面是一个less文件的简单例子:

@import "bootstrap.less";按钮 {.btn-default();&:extend(.btn, .btn.btn-default all);}.filter:extend(.btn-group all) {}.filter >按钮:扩展(.btn-group > .btn all){}.filter button + button:extend(.btn-group .btn + .btn all) {}

您需要确保任何扩展都放置在其他导入之后，因为扩展的所有行为都类似于(非破坏性)搜索 &代替.因此，例如，上面的第一个扩展在任何规则选择器中查找 .btn 的所有实例，并制作选择器的副本，用按钮替换 .btn.

结果输出允许将以下样式设置为 btn-group:

<button type="button">BUTTON ONLY</button><button type="button">BUTTON ONLY</button><button type="button">BUTTON ONLY</button>

注意事项

1. 正如 Seven-phases-max 在几条评论中指出的那样，这将为您的输出增加相当多的额外权重，因为它是一种非破坏性的搜索和替换.它为未缩小/未压缩的输出增加了大约 9Kb.
2. 您不能使用这种类型的扩展带有 data-toggle="buttons" 属性的复选框或单选按钮的标签，因为 button.js 中的 BUTTON DATA-API 正在专门寻找该类.btn 与寻找按钮元素.

Ultimately I'm trying to accomplish the following styles with LESS.

<div class="filter btn-group">
    <button class="btn btn-default" type="button" data-filter="*">show all</button>
    <button class="btn btn-default" type="button" data-filter=".cd">CD</button>
    <button class="btn btn-default" type="button" data-filter=".vinyl">Vinyl</button>    
</div>

I have the following HTML

<div class="filter">
    <button type="button" data-filter="*">show all</button>
    <button type="button" data-filter=".cd">CD</button>
    <button type="button" data-filter=".vinyl">Vinyl</button>
</div>

And I have this in a LESS file with imports of Bootstrap 3

.filter {
    .btn-group;
    button {
        .btn;
        .btn-default;
    }
}

When adding .btn and .btn-default to the button works just fine. But adding .btn-group to the wrapper ".filter" doesn't work. I can't figure out what I'm doing wrong. If I add the class .btn-group manually to the

class="filter btn-group"

It works.

解决方案

EDITED

While I couldn't think of a way to fully accomplish what you wanted, with some help and inspiration from @seven-phases-max, I was able to adapt that gist to get your desired result.

To get a picture of how it works, the 'steps' are: First, treat the button selector as .btn.btn-default. Second, find all instances of the .btn-group selector and replace it with .filter. Then, finally, find all instances of .btn within the .filter and replace those with button.

You can accomplish this with extend (available in Less v1.4.0+). Here is a simple example of the less file:

@import "bootstrap.less";
button {
    .btn-default();
    &:extend(.btn, .btn.btn-default all);
}
.filter:extend(.btn-group all) {}
.filter > button:extend(.btn-group > .btn all) {}
.filter button + button:extend(.btn-group .btn + .btn all) {}

You need to make sure that any extend is placed after your other imports because the extend all acts like (a non-destructive) search & replace. So, the first extend above, for example, finds all instances of .btn within any rule selector and makes a copy of the selector, replacing .btn with button.

The resulting output allows the following to be styled like a btn-group:

<div class="filter">
  <button type="button">BUTTON ONLY</button>
  <button type="button">BUTTON ONLY</button>
  <button type="button">BUTTON ONLY</button>
</div>

CAVEATS

1. As pointed out in several comments by seven-phases-max, this is going to add a fair bit of additional weight to your output because it's a non-destructive search and replace. It adds about 9Kb to the unminified/uncompressed output.
2. You cannot use this type of extend the labels for checkboxes or radio buttons with the data-toggle="buttons" attribute as the BUTTON DATA-API inside button.js is looking specifically for the class .btn versus looking for a button element.

这篇关于扩展 Bootstrap 3 LESS .btn-group 不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！