Html Bootstrap 3 按钮组
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19246156/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap 3 Button Groups
提问by CodeGuru
**Bootstrap 3
**引导程序 3
I'm trying to make each set of button group unique but the different groups are interfering with each other
我试图使每组按钮组独一无二，但不同的组相互干扰
<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>How do i keep it unique in it's own group
我如何保持它在它自己的组中的独特性
回答by Zim
You may want to use the Bootstrap provided radio buttongroups (http://getbootstrap.com/javascript/#buttons), and then use the resetmethod to clear the other group..
您可能希望使用 Bootstrap 提供的单选按钮组 ( http://getbootstrap.com/javascript/#buttons)，然后使用该reset方法清除其他组..
HTML:
HTML：
<label>Payment Mode</label>
<div id="mode-group" class="btn-group" data-toggle="buttons">
<label class="btn btn-primary">
<input type="radio" name="mode" id="option1"> Cash / Cheque / Bank Transfer
</label>
<label class="btn btn-primary">
<input type="radio" name="mode" id="option2"> JobsBuddy Disbursement
</label>
</div>
<label>Payment Period</label>
<div id="period-group" class="btn-group" data-toggle="buttons">
<label class="btn btn-primary">
<input type="radio" name="period" id="period1"> Immediate
</label>
<label class="btn btn-primary">
<input type="radio" name="period" id="period2"> More Than 1 day
</label>
</div>
jQuery:
jQuery：
// unselect period when mode is selected
$("#mode-group .btn").on('click',function(){
$("#period-group").button('reset');
});
Demo: http://bootply.com/86422
回答by Bass Jobsen
Click the button in the btn-group doesn't set a (active) class. The button gets a different background-color cause it is focussed (:focus). Clicking a button in a different btn-group sets the focus to this button.
单击 btn-group 中的按钮不会设置（活动）类。按钮获得不同的背景颜色，因为它被聚焦 (:focus)。单击不同 btn-group 中的按钮会将焦点设置到此按钮。
Use something like this to set an active class per btn-group:
使用类似的方法为每个 btn-group 设置一个活动类：
$('.btn-group button').click(function()
{
$(this).parent().children().removeClass('active');
$(this).addClass('active');
});
回答by Ty Danielson
If you are using AngularJS the Angular UI bootstraphas a great solution.
如果您使用的是 AngularJS，Angular UI 引导程序有一个很好的解决方案。
Basically do the following using the btnRadio directive.
基本上使用 btnRadio 指令执行以下操作。
<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>
回答by Pete Considine
Just to simplify it for the next person to come looking, here's the solution code from the Bootstrap website:
只是为了让下一个人来简化它，这里是 Bootstrap 网站上的解决方案代码：
<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>
Basically, you style the labels as buttons and code the options as regular radio buttons to separate one set of options from the other.
基本上，您将标签设置为按钮的样式并将选项编码为常规单选按钮以将一组选项与另一组选项分开。
回答by Norbert Pisz
To keep unique button just don't use class="btn-group":
要保持独特的按钮，请不要使用class="btn-group"：
<label>Payment Mode</label>
<div>
<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>
<button type="button" class="btn btn-default">Immediate</button>
<button type="button" class="btn btn-default"> More Than 1 day</button>
</div>
This class is used for series of buttons. Check documentation of Buttons Group
此类用于一系列按钮。检查按钮组的文档
