如何使用Bootstrap單選按鈕？

我正在使用Bootstrap 2.3.2，我似乎無法使radio buttons正常工作。我正在使用Bootstrap網站的代碼：如何使用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>

與此相比在自舉網址：

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

不知道爲什麼它在這裏工作不同。

來源

2013-10-29 sbonkosky

您是否包含了所需的JavaScript文件以支持該功能？ –

@StevenV是的，我包括boostrap.js，它看起來具有所有組件的所有JS。我需要在JS中初始化它們嗎？因爲現在我所擁有的就是上面的內容。 – sbonkosky

是的。你需要使用'$（'。btn-group'）。button（）'來啓動這個功能。 –

展望Bootstrap 2.3.2 doc（見用法部分），你需要初始化你的按鈕：

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

Working example based on your code

來源

2013-10-29 13:41:56 zessx

這不是必需的。嘗試從你的小提琴中刪除這個，你會發現它都是由CSS和包含處理。我相信OP可能沒有像下面的海報中提到的那樣正確地包含一些文件。 – jezzipin

工作小提琴+ 1的好例子 – SpringLearner

<div class="radio"> 
<label> 
<input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked> 
Option one is this and that&mdash;be sure to include why it's great 
</label> 
</div>

確保incluse正確的類名和附加樣式表頭

來源

2013-10-29 13:44:07

如何使用Bootstrap單選按鈕？

回答

相關問題