如何使用Bootstrap单选按钮?

sbo*_*sky 9 css twitter-bootstrap

我正在使用Bootstrap 2.3.2,我似乎无法开始radio buttons工作.我正在使用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>
Run Code Online (Sandbox Code Playgroud)

从这里我需要做什么?有了这个,我得到3个按钮,但点击它们不会将它们更改为活动状态,并且它们看起来不像是被点击了.

编辑:

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

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

为该组生成此标记:

<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>
Run Code Online (Sandbox Code Playgroud)

与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>
Run Code Online (Sandbox Code Playgroud)

不知道为什么它在这里有所不同.

zes*_*ssx 7

查看Bootstrap 2.3.2 doc(请参阅用法部分),您需要初始化按钮:

$('.btn-group').button();
Run Code Online (Sandbox Code Playgroud)

基于您的代码的工作示例

  • 这不是必需的.尝试从你的小提琴中删除它,你会发现它全部由css和包括处理.我相信OP可能没有正确包含一些文件,如下面提到的海报. (4认同)