Question

我想定义一个btn-group（buttons-radio模式，即无线电样式），如here所述，但不是使用active类来实现选中的按钮，我想使用btn-primary，以便更清晰地看到所选按钮。

我的问题是：我是否需要实现自定义javascript / jQuery来实现这一点，或者我可以告诉bootstrap使用btn-primary代替active来选择按钮吗？

Answer 1

我不建议更改任何bootstrap JS。最好创建自定义onclick事件和“回收”引导代码。

就我而言，我的HTML就像：

<div id="bar" class="btn-group" data-toggle="buttons-radio">
    <button type="button" class="btn btn-large btn-success active">First</button>
    <button type="button" class="btn btn-large">Second</button>
    <button type="button" class="btn btn-large">Third</button>
</div>

修改我来了如何覆盖切换功能

$.fn.button.Constructor.prototype.oldtoggle = $.fn.button.Constructor.prototype.toggle $.fn.button.Constructor.prototype.toggle = function(){ var $parent = this.$element.parent('[data-toggle="buttons-radio"]') $parent && $parent .find('.btn-success') .removeClass('btn-success') this.$element.toggleClass('btn-success') this.oldtoggle() }

这允许您仅设置所需的btn组样式。

Answer 2

您需要做的就是修改js库。更改以下代码（请在bootstrap-button.js中找到它们）：

  Button.prototype.toggle = function () {
    var $parent = this.$element.parent('[data-toggle="buttons-radio"]')

    $parent && $parent
      .find('.active')
      .removeClass('active')

    this.$element.toggleClass('active')
  }

如下：

  Button.prototype.toggle = function () {
    var $parent = this.$element.parent('[data-toggle="buttons-radio"]')

    $parent && $parent
      .find('.btn-primary')
      .removeClass('btn-primary')

    this.$element.toggleClass('btn-primary')
  }

Answer 3

我同意无心，不要修改现有的javascript。

我做了一些事情：

HTML：

<div class="my-parent-row">
    <div class="btn-group" data-toggle="buttons-radio" data-selected-class="btn-success">
        <button class="btn btn-success active">First option</button>
        <button class="btn">Other option</button>                
    </div>
</div>

使用Javascript：

$(".my-parent-row .btn-group .btn").on("click", function () {
    var selectedClass = $(this).parent().data("selected-class");
    $(this).siblings("." + selectedClass).removeClass(selectedClass);
    $(this).addClass(selectedClass);
});

Twitter引导按钮组使用btn-primary

3 个答案: