我正在尝试使用 Bootstrap 中的切换功能,但想用图像替换默认按钮。该图像的文字为“本周”。旁边的按钮将是一个显示“All Time”的图像。关于如何做到这一点有什么想法吗?
您可以在此处查看网页: 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;
}
最佳答案
您的意思是您希望将图像作为单选按钮,是吗?
希望,这有帮助:
<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>
取消注释样式以隐藏单选按钮图形:)
关于css - 我可以在 Bootstrap 中使用图像作为按钮吗?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42588373/