クリック毎に２つの状態を交互に切り換えるボタン ≪ ボタン ≪ JavaScript ≪ Bootstrap3日本語リファレンス

ポイントは２つ。

状態を保持するボタンは、button要素にdata-toggle属性にbuttonを指定する。
Firefox対策として、button要素のautocomplete属性にoffを指定する。

これにより、１度目のクリックでアクティブになり、２度目のクリックでアクティブでなくなる。

サンプル

ソースコード

<button type="button" id="sampleButtonSingleToggle" class="btn btn-default" data-toggle="button" autocomplete="off">
	default
</button>
<button type="button" id="sampleButtonSingleToggle" class="btn btn-primary" data-toggle="button" autocomplete="off">
	primary
</button>
<button type="button" id="sampleButtonSingleToggle" class="btn btn-success" data-toggle="button" autocomplete="off">
	success
</button>
<button type="button" id="sampleButtonSingleToggle" class="btn btn-info" data-toggle="button" autocomplete="off">
	info
</button>
<button type="button" id="sampleButtonSingleToggle" class="btn btn-warning" data-toggle="button" autocomplete="off">
	warning
</button>
<button type="button" id="sampleButtonSingleToggle" class="btn btn-danger" data-toggle="button" autocomplete="off">
	danger
</button>