标准控件如何添加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,效果是实现了,但效率不高,因为多写了一个控件。网友如果有更好的方法,还请留言,不胜感激。

 

posted @ 2013-10-31 14:42  KXIE  阅读(1263)  评论(0编辑  收藏  举报