Twitter Bootstrap电台/复选框 - 如何放置glyphicon

Question

使用TB,是否可以设置收音机或复选框的样式,以便它显示一个字形而不是默认的收音机或复选框样式？我想使用a glyphicon glyphicon-star表示未选中,然后glyphicon glyphicon-star-empty表示已选中.

Answer 1

没有javascript你可以修改样式...在我看来它是一种黑客,但它很有趣,因为我意识到boostrap使用图标字体#newb.

HTML

<input type="checkbox" class="glyphicon glyphicon-star-empty" >

CSS

.glyphicon:before {
     visibility: visible;
}
.glyphicon.glyphicon-star-empty:checked:before {
    content: "\e006";
}
input[type=checkbox].glyphicon{
     visibility: hidden;        
}

在这里尝试一下

Answer 2

只是为了那些,有同样的问题,来自谷歌(我没有找到任何方便的答案).

我修改了这样的东西并在当前的Chrome,Firefox和IE中进行了测试.使用此方法,您还可以使用其他所需的复选框.只需给出"已选中"和"未选中"的课程.

对于每个复选框,请执

<input id="checkbox1" class="icon-checkbox" type="checkbox" />
<label for="checkbox1">
  <span class='glyphicon glyphicon-unchecked unchecked'></span>
  <span class='glyphicon glyphicon-check checked'></span>
  Checkbox 1
</label>

并添加到您的CSS:

input[type='checkbox'].icon-checkbox{display:none}
input[type='checkbox'].icon-checkbox+label .unchecked{display:inline}
input[type='checkbox'].icon-checkbox+label .checked{display:none}
input[type='checkbox']:checked.icon-checkbox{display:none}
input[type='checkbox']:checked.icon-checkbox+label .unchecked{display:none}
input[type='checkbox']:checked.icon-checkbox+label .checked{display:inline}

Answer 3

在官方网站上，javascript 部分提供了将复选框和单选按钮组样式化为按钮组的示例。它位于此处的按钮部分下方。

您可以放置​​字形图标，而不是在按钮内放置显示“选项 1”的文本。如果您只想要一个复选框，我想您可以消除按钮组并只使用一个按钮。

要删除按钮外观并仅显示图标，请使用“btn-link”类。

我自己没有尝试过，但我认为它没有理由不起作用。