引導3按鈕組

Question

**引導3

我試圖讓每一組按鈕組獨一無二的，但不同羣體相互

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

如何幹擾我把它獨特之處它自己的組

Answer 1

爲了保持獨特的按鈕，只是不使用類= 「BTN-組」：

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

該類用於一系列按鈕。檢查文檔Buttons Group

Answer 2

單擊btn-group中的按鈕不會設置（活動）類。該按鈕會獲得不同的背景顏色，因此會聚焦（：focus）。點擊不同btn組中的按鈕將焦點設置爲該按鈕。

使用這樣的設置每BTN-團的活動類：

$('.btn-group button').click(function() 
{ 
    $(this).parent().children().removeClass('active'); 
    $(this).addClass('active'); 
}); 

Answer 3

您可能需要使用引導程序提供單選按鈕組（http://getbootstrap.com/javascript/#buttons），然後使用reset方法清除另一組..

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：

// unselect period when mode is selected 
$("#mode-group .btn").on('click',function(){ 

    $("#period-group").button('reset'); 

}); 

演示：http://bootply.com/86422

Answer 4

如果您正在使用AngularJS的Angular UI bootstrap有一個很好的解決方案。

基本上使用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> 

Answer 5

只是爲了簡化它旁邊的人就過來找，這裏是從引導網站解決方案代碼：

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

基本上，你的風格標籤按鈕和代碼選擇爲定時廣播按鈕將一組選項與另一組選項分開。