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

Posted 2023-03-06

【中文标题】Twitter Bootstrap 单选框/复选框 - 如何放置 glyphicon

【英文标题】：Twitter Bootstrap radio/checkbox - how to put glyphicon

【发布时间】：2014-07-10 17:14:27

【问题描述】：

使用 TB，是否可以设置单选框或复选框的样式，使其显示字形而不是单选框或复选框的默认样式？我想用glyphicon glyphicon-star 表示未选中，然后glyphicon glyphicon-star-empty 表示已选中。

【问题讨论】：

没有“官方”BS 方法可以做到这一点，但您可以使用 JS 隐藏复选框，替换为另一个元素并将字形图标状态附加到该元素（在后台切换复选框）。

glyphicon glyphicon-star-empty 表示未选中，然后 glyphicon glyphicon-star-empty 表示已选中？是同一个图标吗？

@Crystal - 感谢您注意到错误。我已经修好了。

【参考方案1】：

如果没有 javascript，您可以修改样式...在我看来这是一种 hack，但它很有趣，因为我意识到 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;        

试试看HERE

【讨论】：

你能检查一下你的小提琴吗？它似乎对我不起作用。谢谢。

@***Newbie 我查过了；它有效，但是当你检查它时会发生什么？

@***Newbie 我更新了它以使用你想要的图标。

::before 对输入元素无效。这适用于 Chrome，但不适用于 IE、Firefox。更多解释here

【参考方案2】：

仅针对那些遇到同样问题并来自 Google 的人（我没有找到任何方便的答案）。

我修改了类似的东西，并在当前的 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-checkboxdisplay:none
input[type='checkbox'].icon-checkbox+label .uncheckeddisplay:inline
input[type='checkbox'].icon-checkbox+label .checkeddisplay:none
input[type='checkbox']:checked.icon-checkboxdisplay:none
input[type='checkbox']:checked.icon-checkbox+label .uncheckeddisplay:none
input[type='checkbox']:checked.icon-checkbox+label .checkeddisplay:inline

【讨论】：

这对我帮助很大！我几乎把它粘贴进去了，它起作用了！

【参考方案3】：

在官方网站上，javascript 部分有将复选框和单选按钮设置为按钮组的样式示例。它在按钮部分下方here。

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

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

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

【参考方案4】：

这是一个纯粹的角度解决方案，用于在字形图标之间切换以有条件地在页面上显示内容。我发现 CSS 解决方案在 IE 中失败。

这不仅仅是您的问题，但我认为在屏幕上切换某些内容很有用。

<p ng-init="toggle = false" ng-click="toggle = !toggle" title="@Resources.Label_HideShowCustBiller" style="cursor:pointer" class="glyphicon" ng-class="true: 'glyphicon-chevron-up', false: 'glyphicon-chevron-down'[toggle]"></p>

<div ng-show="toggle">
    //what you want to show here
</div>