标准控件如何添加Bootstrap3的icon样式
Bootstrap3提供了icon样式,这个其实是其他公司的产品,但对Bootstrap3免费,对比之前的,现在使用更加方便了,直接更改font-size就能实现icon的大小,不像之前要做多套不同大小的图,或者导入其他附加文件才能实现这个效果。记得Bootstrap2是用<i>,但无论是哪个版本,例子都是原始的HTML结构,如
<button><span class="glyphicon glyphicon-log-out"></span></button>
或
<a><span class="glyphicon glyphicon-log-out"></span></a>
,而VS中提供的标准控件无法直接使用这种样式,我试了用JS重构控件或者在OnPreRender事件中修改,最终都是无济于事,于是我只能用一种很笨的方法,把标准控件隐藏,再写一个符合Bootstrap的按钮,然后再用JS让它俩的事件捆绑一起:
$(function () { $("#Logout_c").click(function () { $(".btnLogout").click(); }); });
<asp:Button ID="Logout" CssClass="btnLogout btn btn-warning hidden" OnClick="Logout_Click" runat="server" /> <button id="Logout_c" class="btn btn-warning"><span class="glyphicon glyphicon-log-out"></span></button>
注意隐藏标准控件不能直接在上面添加visible=false,要用css,添加display为none,否则事件代理失效。
ok,效果是实现了,但效率不高,因为多写了一个控件。网友如果有更好的方法,还请留言,不胜感激。