2013-10-29 9 views
9

私はBootstrap 2.3.2を使用しており、radio buttonsを動作させることはできません。私はブートストラップのウェブサイトのコードを使用しています:ブートストラップラジオボタンの使い方は?

<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つのボタンが得られますが、クリックするとアクティブに変わらず、クリックされたように見えません。

EDIT:

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

このマークアップは、グループのために生成されます:私はそうのようなJSのボタンを初期化する場合は

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

なぜ違うのか分かりません。

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

Working example based on your code

+0

機能をサポートするために必要なjavascriptファイルが含まれていますか? –

+0

@StevenVはい、私はboostrap.jsを含んでいて、すべてのコンポーネントに対してすべてのJSを持つように見えます。私はJSでそれらを初期化する必要がありますか?今、私が持っているものはすべて上記のものです。 – sbonkosky

+0

はい。機能を開始するには '$( '.btn-group')。button()'を使う必要があります。 –

答えて

7

(使用法セクションを参照してください)、あなたは、ボタンを初期化する必要がBootstrap 2.3.2 docで見ます

+4

これは必須ではありません。これをあなたのフィドルから削除してみてください。あなたはそれがcssによってすべて処理されていることがわかります。私は、以下のようなポスターが登場すると、OPにはいくつかのファイルが正しく含まれていない可能性があると思います。 – jezzipin

+1

作業フィーリングの良い例、+ 1 – SpringLearner

0
<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し、ヘッダーにスタイルシートを添付していることを確認してください:

関連する問題