css - 如何使用 Bootstrap 单选按钮?

标签 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>

我需要从这里做什么?有了这个,我得到了 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>

与 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>

不确定为什么它在这里工作不同。

最佳答案

正在寻找Bootstrap 2.3.2 doc (见用法部分),你需要初始化你的按钮:

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

Working example based on your code

关于css - 如何使用 Bootstrap 单选按钮?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19659607/

相关文章:

javascript - 将两个 div 并排对齐,然后将两个 div 水平和垂直居中

html - 为什么我的宽度是 100%?

javascript - 单击事件到自动事件图像在 Jquery 中更改

jquery - 下拉菜单不起作用(选项卡焦点)

html - 如何制作标签列适合最大标签的 Bootstrap 表格?

css - Bootstrap v3,全宽列的反向堆叠顺序

python - 使用 Django 1.5 的 Twitter Bootstrap

html - 如何让一行图片成为纵横居中的div?

html - CSS三 Angular 形边框

jquery - Twitter Bootstrap 流体容器侧边栏切换