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

10-21 23:21