twitter-bootstrap 如何制作看起来不像按钮的 Glyphicon 按钮
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/26917039/
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
How do I make Glyphicon buttons that don't look like buttons
提问by Craig Walker
I'm adding some controls to my HTML/Javascript application. When the user clicks on them, they're supposed to perform an action. While I could bind the clickevent to any element, semantically, a <button>element seems like the right choice. Not only does it indicate an element that's supposedto be clicked, but it also gives default behaviour (ex: cursor: pointerin CSS) that is desirable; I'd like to avoid re-engineering that.
我正在向我的 HTML/Javascript 应用程序添加一些控件。当用户点击它们时，它们应该执行一个操作。虽然我可以将click事件绑定到任何元素，但从语义上讲，<button>元素似乎是正确的选择。它不仅指示应该单击的元素，而且还提供了cursor: pointer理想的默认行为（例如：在 CSS 中）；我想避免重新设计它。
However, I want my controls to not looklike typical buttons. Specifically, I want to use glyphicons (via Bootstrap) to set the appearance.
但是，我希望我的控件看起来不像典型的按钮。具体来说，我想使用字形（通过 Bootstrap）来设置外观。
Adding a glyphicon to a button is simple enough:
向按钮添加字形很简单：
<button type="button"><span class="glyphicon glyphicon-plus-sign"></span></button>
But that just wraps the glyphicon in a standard button appearance:
但这只是将字形包装在标准按钮外观中：
(This a screen capture from Chrome for OS X)
（这是 OS X 版 Chrome 的屏幕截图）
I can attach the glyphicon classes directly to the button:
我可以将字形类直接附加到按钮上：
<button type="button" class="glyphicon glyphicon-plus-sign"></button>
...but that just looks worse:
...但这看起来更糟：
I'm sure I could try stripping away the various borders, backgrounds, etc in CSS, but that doesn't seem very cross-platform or reliable.
我确定我可以尝试去除 CSS 中的各种边框、背景等，但这似乎不太跨平台或不可靠。
What's the best way to de-buttonize a button?
取消按钮的最佳方法是什么？
回答by Drazzah
This is easy to do. Just apply the following CSS styles to your button:
这很容易做到。只需将以下 CSS 样式应用于您的button:
.icon-button {
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
outline: none;
border: 0;
background: transparent;
}<link href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet"/>
<button class="icon-button"><span class="glyphicon glyphicon-plus-sign"></span></button>And your button should be looking wonderfully bland.
你的按钮应该看起来非常平淡。
JSFiddle Here.
JSFiddle在这里。
回答by WPDRUPAL
Here's a simple way to do this without CSS
这是一种无需 CSS 即可完成此操作的简单方法
Use <spanand use role="button"
使用<span和使用role="button"
Example:
例子：
<span class="glyphicon glyphicon-camera" data-toggle="modal" role="button" aria-hidden="true"></span>