Jquery 使用btn primary的Twitter boostrap按钮组

如前所述，我想定义一个

btn组

（

按钮单选

模式，即单选样式），但我想使用

btn主

，而不是为所选按钮使用

active

类，以便所选按钮更清晰可见

---

我的问题是：我是否需要实现自定义javascript/jQuery来实现这一点，或者我是否可以告诉bootstrap对所选按钮使用

btn primary

而不是

active

。 更改以下代码（请在bootstrap button.js中找到）：

具体如下：

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

---

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

具体如下：

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

---

我不建议更改任何引导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>

---

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

我不建议更改任何引导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>

---

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

我同意darkless，不要修改现有的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>

---

我同意darkless，不要修改现有的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>

---

嗯，我认为“点击”就足够了。但事实并非如此。如果必须在JS（$（'#button'）.toggle（）中使用切换按钮的方法，“on click”触发器将不会触发。所以这就是为什么我要重写这个方法。很好，在我的情况下，我不会使用

.toggle（）

，所以我不需要担心这个问题，但是记住这一点很好。我认为“点击”就足够了。但事实并非如此。如果必须在JS（$（'#button'）.toggle（）中使用切换按钮的方法，“on click”触发器将不会触发。这就是为什么我要重写这个方法。很好，在我的情况下，我不会使用

.toggle（）

，所以我不需要担心这个问题，但是记住这一点很好。