首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >Bootstrap 3按钮组

Bootstrap 3按钮组
EN

Stack Overflow用户
提问于 2013-10-08 19:10:38
回答 3查看 30.5K关注 0票数 13

**自举3

我试图使每一组按钮组都是唯一的,但不同的组相互干扰

代码语言:javascript
复制
<label>Payment Mode</label>
<div class="btn-group">
  <button type="button" class="btn btn-default">Cash / Cheque / Bank Transfer </button>
  <button type="button" class="btn btn-default">JobsBuddy Disbursement</button>
</div>

<label>Payment Period</label>
<div class="btn-group">
  <button type="button" class="btn btn-default">Immediate</button>
  <button type="button" class="btn btn-default"> More Than 1 day</button>
</div>

我如何保持它在自己的组中的唯一性

EN

回答 3

Stack Overflow用户

发布于 2013-10-09 00:55:47

单击btn-group doesn't set a (active) class中的按钮。该按钮获得不同的背景颜色,因为它是聚焦的(:焦点)。单击不同btn组中的按钮会将焦点设置到此按钮。

使用类似下面的代码为每个btn组设置一个活动类:

代码语言:javascript
复制
$('.btn-group button').click(function()
{
    $(this).parent().children().removeClass('active');
    $(this).addClass('active');
});
票数 4
EN

Stack Overflow用户

发布于 2014-09-26 22:01:33

如果你使用的是AngularJS,Angular UI bootstrap有一个很好的解决方案。

基本上可以使用btnRadio指令执行以下操作。

代码语言:javascript
复制
<div class="btn-group">
    <label class="btn btn-primary" ng-model="radioModel" btn-radio="'Left'">Left</label>
    <label class="btn btn-primary" ng-model="radioModel" btn-radio="'Middle'">Middle</label>
    <label class="btn btn-primary" ng-model="radioModel" btn-radio="'Right'">Right</label>
</div>
票数 0
EN

Stack Overflow用户

发布于 2016-02-16 05:24:01

为了简化它,以便下一位查看的人,这里有Bootstrap网站上的解决方案代码:

代码语言:javascript
复制
<div class="btn-group" data-toggle="buttons">
  <label class="btn btn-primary active">
    <input type="radio" name="options" id="option1" autocomplete="off" checked> Radio 1 (preselected)
  </label>
  <label class="btn btn-primary">
    <input type="radio" name="options" id="option2" autocomplete="off"> Radio 2
  </label>
  <label class="btn btn-primary">
    <input type="radio" name="options" id="option3" autocomplete="off"> Radio 3
  </label>
</div>

基本上,您将标签样式设置为按钮,并将选项编码为常规单选按钮,以将一组选项与另一组选项分开。

票数 -1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/19246156

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档