扩展Bootstrap 3 LESS .btn-group不起作用

问题描述

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

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>

我有以下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>

我在一个导入了Bootstrap 3的LESS文件中拥有这个

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

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

在按钮上添加.btn和.btn-default时，效果很好.但是将.btn-group添加到包装器".filter"不起作用.我不知道我在做什么错.如果我将类.btn-group手动添加到

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"

，则可以正常工作.

推荐答案

已编辑

虽然我想不出一种完全完成您想要的方法的方法，但在@ seven-phases-max的帮助和启发下，我却能够适应该要点以获得所需的结果.

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.

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

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.

您可以通过扩展(在Less v1.4.0 +中提供)来完成此操作.这是less文件的简单示例:

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) {}

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

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.

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

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>

注意事项

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

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不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！