如何使用引导单选按钮?

I'm using Bootstrap 2.3.2 and I can't seem to get radio buttons to work. I'm using the code from Bootstrap's website:

我使用的是Bootstrap 2.3.2，我似乎无法让单选按钮工作。我正在使用Bootstrap网站的代码:

<div class="btn-group" data-toggle="buttons-radio">
  <button type="button" class="btn btn-primary">Left</button>
  <button type="button" class="btn btn-primary">Middle</button>
  <button type="button" class="btn btn-primary">Right</button>
</div>

What do I need to do from here? With this I get 3 buttons, but clicking them doesn't change them to active and they don't look like they've been clicked.

从这里我需要做什么?有了这个，我得到了3个按钮，但是点击它们并不会使它们变成活动的，它们看起来不像是被点击过的。

EDIT:

编辑:

If I initialize the buttons in JS like so:

如果我像这样初始化JS中的按钮:

$('.btn-group').button();

$(' .btn-group ').button();

This markup is generated for the group:

此标记为组生成:

<div class="btn-group ui-button ui-widget ui-state-default ui-corner-all 
            ui-button-text-only" data-toggle="buttons-checkbox" 
            role="button" aria-disabled="false">
   <span class="ui-button-text">
        <button type="button" class="btn btn-primary">Left</button>
        <button type="button" class="btn btn-primary">Middle</button>
        <button type="button" class="btn btn-primary">Right</button>
   </span>
</div>

Compared to this on the bootstrap website:

与bootstrap网站上的数据相比:

<div class="btn-group" data-toggle="buttons-radio">
    <button type="button" class="btn btn-primary">Left</button>
    <button type="button" class="btn btn-primary">Middle</button>
    <button type="button" class="btn btn-primary active">Right</button>
</div>

Not sure why it's working different here.

不知道为什么会有不同。

2 个解决方案

#1

Looking in Bootstrap 2.3.2 doc (see Usage section), you need to initialize your buttons :

查看Bootstrap 2.3.2 doc(参见使用部分)，您需要初始化您的按钮:

$('.btn-group').button();

Working example based on your code

基于代码的工作示例

#2

<div class="radio">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
Option one is this and that&mdash;be sure to include why it's great
</label>
</div>

Make sure to incluse the right class names and attach the stylesheet in the header

确保在标题中包含正确的类名和样式表。

#1