2017-03-03 18 views
2

私はブートストラップでトグル機能を使用しようとしていますが、デフォルトのボタンをイメージに置き換えたいと考えています。イメージには「This week」というテキストがあります。そのすぐ隣にあるボタンは、「すべての時間」と表示される画像になります。これを行う方法に関するアイデア?あなたがWebページがここにレイアウト見ることができます画像をブートストラップのボタンとして使用できますか?

http://matthewtbrown.com/test/imageasbutton/

<div class="btn-group" data-toggle="buttons"> 
<label class="btn btn-primary active thisweek"> 
<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> 

</div> 

rightcolumn .btn-group .btn .btn-primary .active .thisweek { 
background-image: url(../images/callout.png); 
background-color: transparent; 
} 

答えて

1

あなたがはいラジオボタンとして画像をしたい意味しますか?

希望は、このことができます:

<style> 
/*input[type=radio] { 
    display: none; 
}*/ 
</style> 

<div class="btn-group" data-toggle="buttons"> 
<label class="btn btn-primary active thisweek"> 
<input type="radio" name="options" id="option1" autocomplete="off" checked><img src="https://placehold.it/200x200"> 
</label> 
<label class="btn btn-primary"> 
<input type="radio" name="options" id="option2" autocomplete="off"><img src="https://placehold.it/150x150"> 
</label> 

コメントを解除したスタイルは、ラジオボタンのグラフィックを非表示にする:)

関連する問題