CSS Twitter Bootstrap 收音机/复选框 - 如何放置字形
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/23793737/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Twitter Bootstrap radio/checkbox - how to put glyphicon
提问by StackOverflowNewbie
Using TB, is it possible to style the radio or checkbox so that it shows a glyphicon instead of the default style for radio or checkbox? I want to use a glyphicon glyphicon-star
to indicate unchecked, then glyphicon glyphicon-star-empty
to indicate checked.
使用 TB,是否可以设置单选框或复选框的样式,使其显示字形而不是单选框或复选框的默认样式?我想用 aglyphicon glyphicon-star
表示未选中,然后glyphicon glyphicon-star-empty
表示选中。
采纳答案by david
On the official website, the javascript section has examples of styling groups of checkboxes and radio buttons as buttons groups. It's under the buttons section here.
在官方网站上,javascript 部分有将复选框和单选按钮的样式组作为按钮组的示例。它位于此处的按钮部分下方。
Instead of having text inside the button that reads "Option 1", you would place your glyphicon instead. If you wanted only one checkbox, I suppose you could eliminate the button group and just go with a single button.
与其在按钮内放置“选项 1”的文本,不如放置您的字形图标。如果你只想要一个复选框,我想你可以去掉按钮组,只用一个按钮。
To remove the button appearance and only show your icon, use the "btn-link" class.
要删除按钮外观并仅显示您的图标,请使用“btn-link”类。
I haven't tried this myself, but I see no reason for it to not work.
我自己没有尝试过这个,但我认为没有理由不工作。
回答by Crystal
Without javascript you could modify the style... Its kind of a hack in my opinion but it was interesting because I realized that boostrap uses an icon font #newb.
如果没有 javascript,您可以修改样式...在我看来,这有点像 hack,但很有趣,因为我意识到 boostrap 使用图标字体 #newb。
HTML
HTML
<input type="checkbox" class="glyphicon glyphicon-star-empty" >
CSS
CSS
.glyphicon:before {
visibility: visible;
}
.glyphicon.glyphicon-star-empty:checked:before {
content: "\e006";
}
input[type=checkbox].glyphicon{
visibility: hidden;
}
Try it out HERE
在这里尝试一下
回答by muri
Just for those, having the same problem and came from Google (I didn't find any convenient answer).
对于那些遇到同样问题并且来自谷歌的人(我没有找到任何方便的答案)。
I tinkered something like this and tested it in the current Chrome, Firefox and IE. With this method, you also can use everything else you want as checkbox. Just give the classes "checked" and "unchecked".
我修改了这样的东西并在当前的 Chrome、Firefox 和 IE 中对其进行了测试。使用此方法,您还可以使用其他所有内容作为复选框。只需将课程“选中”和“未选中”即可。
For every checkbox do this:
对于每个复选框,请执行以下操作:
<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>
And add to your CSS:
并添加到您的 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}
回答by Dan
Here is a pure angular solution to toggling between to glyphicon to conditionally show content on the page. I found the CSS solution to fail in IE.
这是一个纯角度的解决方案,用于在 glyphicon 之间切换以有条件地在页面上显示内容。我发现 CSS 解决方案在 IE 中失败。
This does more than your question, but I thought the toggling of something on the screen is useful.
这不仅仅是您的问题,但我认为在屏幕上切换某些内容很有用。
<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>