在ASP.NET中如何将 Bootstrap 标志图标放入asp:Button中?

cwxwcias  于 2022-12-25  发布在  Bootstrap
关注(0)|答案(5)|浏览(312)

我在我的项目中使用Bootstrap 3,并且我想在www.example.com按钮中使用Bootstrap GlyphiconASP.net。
下面是我使用的代码,虽然它没有工作(我得到了一个使用Twitter Bootstrap <span>标签而不是<i>标签的示例):

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

也许应该做些额外的事情。
我怎样才能让它工作?

cunj1qz1

cunj1qz11#

您必须使用asp:LinkButton*而不是 * aasp:Button,下面是我在ASP.NET Web应用程序中使用Bootstrap 3的工作方式:
从您的代码中,可以执行以下操作:

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

下面是一个示例,我使用它来创建带有文本“Submit”的Submit Button

<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>
dly7yett

dly7yett2#

当您可以在HTML服务器控件中执行此操作时,ASP Server控件的真实的用途是什么:
可以通过设置runat=“server”属性将HTML元素转换为服务器控件。

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

xqkwcwgp3#

试试这个

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

vfh0ocws4#

您可以使用linkButton代替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>
rjee0c15

rjee0c155#

其工作用于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>

相关问题