如何在 ASP.Net 中的 asp:Button 中放置 Bootstrap Glyphicon？

Posted 2023-03-05

【中文标题】如何在 ASP.Net 中的 asp:Button 中放置 Bootstrap Glyphicon？

【英文标题】：How do I put a Bootstrap Glyphicon inside an asp:Button in ASP.Net?

【发布时间】：2014-08-08 18:00:15

【问题描述】：

我在我的项目中使用 Bootstrap 3，我想在 ASP.net 按钮中使用 Bootstrap Glyphicons。

这是我使用的代码，虽然没有成功（我得到了一个使用 Twitter Bootstrap <span> 标签而不是 <i> 标签的示例）：

<asp:Button ID="btnRandom"
    runat="server"
    Text="<span aria-hidden='true'
        class='glyphicon glyphicon-refresh'>
        </span>"
    onclick="btnRandom_Click" />

也许应该做一些额外的事情。

我怎样才能让它工作？提前感谢您的回复。

【问题讨论】：

你可以继承它并覆盖渲染方法。

我不明白你的意思丹尼尔，你能发个链接或示例代码吗？

【参考方案1】：

它的工作适用于 Asp:Button 字形图标样式：

<div class="btn btn-primary glyphicon glyphicon-search">
    <asp:Button ID="Button1" runat="server" Text="Search" BackColor="Transparent" BorderWidth="0" OnClick="Button1_Click" />
                    </div>

【参考方案2】：

你可以像这样使用 linkBut​​ton 代替 button 或 asp:Button；

<linkbutton runat="server"><a class="btn btn-info btn-md"> <span 
 class="glyphicon glyphicon-plus" style="font-size: x-large; font-weight: 
 bolder"></span> </a></linkbutton>

【参考方案3】：

试试这个

<button id="btnSubSearch" runat="server" type="submit" class="btn btn-default" onserverclick="btnSubSearch_Click">
<span aria-hidden="true" class="glyphicon glyphicon-search">
</span>
</button>

【参考方案4】：

ASP Server 控制在html 服务器控制中的真正用途是什么：

您可以通过设置 runat="server" 属性将 HTML 元素转换为服务器控件。

<button runat="server" >
<span aria-hidden="true" class="glyphicon glyphicon-refresh"></span>Refresh
</button>

【讨论】：

你能让服务器端 OnClick 触发吗？

通过使用 onserverclick 事件：msdn.microsoft.com/en-us/library/…

Souregi：谢谢你，太酷了！每天学习新东西。

不客气 :) 如果此解决方案适合您，请点击 绿色 按钮

好吧，我还使用 LinkBut​​ton 发布了一个答案。但我也喜欢你的方法，由开发人员在 HTML-Button 或 ASP:Link/Button 之间进行选择

【参考方案5】：

你必须使用 asp:LinkBut​​ton 而不是 asp:Button，下面是我使用Bootstrap 3 的方法一个 ASP.NET 网络应用程序：

从您的代码中，您可以进行以下工作：

<asp:LinkButton ID="btnRandom" 
            runat="server" 
            CssClass="btn btn-primary"    
            OnClick="btnRandom_Click">
    <span aria-hidden="true" class="glyphicon glyphicon-refresh"></span>
</asp:LinkButton>

下面是我使用带有文本“提交”的提交按钮的示例：

<asp:LinkButton ID="SubmitBtn" 
                runat="server" 
                CssClass="btn btn-primary"    
                OnClick="SubmitBtn_Click">
    <span aria-hidden="true" class="glyphicon glyphicon-ok"></span>Submit
</asp:LinkButton>

【讨论】：

为什么使用 标签而不是通常的 标签？

@skia.heliou：使用 标签也可以，我相信在这种情况下 比 更好。 标签建议进行视觉更改，但由于没有文本，因此未应用。 标签很快就会被弃用。我已经更新了我的答案，谢谢！