ASP 中的 Twitter 引导按钮显示答案

【问题标题】：Twitter Bootstrap Button Display In ASPASP 中的 Twitter 引导按钮显示
【发布时间】：2013-04-03 21:40:48
【问题描述】：

我注意到 Twitter Bootstrap 的 ASP 页面中的按钮存在问题。似乎唯一正确显示的类是“btn”类。如果我想使用“btn btn-primary”，我的蓝色按钮上会出现一个灰色渐变。当我将鼠标悬停在按钮上时，它的一半变为蓝色。我已经尝试过使用其他按钮样式，并且得到了相同的结果。

我希望下面的代码是正确的：

<asp:button type="button" id="btnSearch" runat="server" CssClass="btn btn-primary" Text="Search"></asp:button>

完整的 HTML

<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="header.aspx.vb" Inherits="Backend.header" %>

<!DOCTYPE html>

<html>
<head runat="server">
<title></title>


<link rel="stylesheet" href="css/bootstrap.css" />
<link rel="stylesheet" href="css/bootstrap-responsive.css" />
<link rel="stylesheet" href="css/custom.css" />

</head>
<body>
<form id="masterSearch" runat="server">
    <div class="navbar navbar-inverse navbar-fixed-top">
      <div class="navbar-inner">
          <div class="container">
              <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
                  <span class="icon-bar"></span>
                  <span class="icon-bar"></span>
                  <span class="icon-bar"></span>
              </a>

              <a class="brand" href="#">Company Name</a>

              <div class="nav-collapse collapse">
                  <ul class="nav">
                      <li><a href="cart.aspx">
                          <asp:Label ID="Label1" runat="server" Text="Cart"> </asp:Label></a></li>
                      <li class="dropdown">
                          <a href="#" class="dropdown-toggle" data-toggle="dropdown">History <b class="caret"></b></a>
                          <ul class="dropdown-menu">
                              <li><a href="#">New Order</a></li>
                              <li><a href="#">Order History</a></li>
                          </ul>
                      </li>
                      <li><a href="#">Invoices</a></li>
                      <li class="dropdown">
                          <a href="#" class="dropdown-toggle" data-toggle="dropdown">Returns <b class="caret"></b></a>
                          <ul class="dropdown-menu">
                              <li><a href="#">Return Previous Order</a></li>
                              <li><a href="#">Return Policy</a></li>
                          </ul>
                      </li>
                      <li><a href="#">Rewards Balance</a></li>
                      <li><a href="#">Help</a></li>
                      <li><a href="#">Log Out</a></li>
                  </ul>
              </div>
          </div>
      </div>
    </div>

    <div id="wrap">
            <div class="row-fluid">

         <div class="container">

             <div class="span12">
                 <asp:Label ID="Label1" class="pull-right" runat="server" Text="Label"></asp:Label>
              </div>

       </div> <!--/container-->
   </div> <!--/row-->

    <hr />

    <div class="container">
        <div class="row-fluid">
            <div class="span2">Left Column</div><!--/left sidebar-->

            <div class="span8">
                <h5 class="pagination-centered">Search By...</h5>
                <div class="span12">

                        <input type="text" id="txtSearch1" placeholder="NDC#, Item#, Item Name..." runat="server" />
                        <asp:button type="button" id="btnSearch" runat="server" CssClass="btn btn-primary" Text="Search"></asp:button>       


                </div> <!--/search-->

                <div class="searchResults">
                    <table ID="tblSearchResults" class="table table-bordered">
                        <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False">
                             <Columns>


                                       <asp:BoundField HeaderText="Generic" DataField="ItemDesc" />
                                       <asp:BoundField HeaderText="Brand" DataField="BrandName" />
                                        <asp:BoundField HeaderText="Item Number" DataField="ItemNumber" />
                                        <asp:BoundField HeaderText="NDC" DataField="NDC" />
                                       <asp:BoundField HeaderText="Class" DataField="ControlLevel" />
                                        <asp:BoundField HeaderText="Price" DataField="Price" />
                                        <asp:TemplateField HeaderText="Qty">




                    <ItemTemplate>
                        <asp:PlaceHolder ID="PlaceHolder1" runat="server"></asp:PlaceHolder>
                    </ItemTemplate>
                </asp:TemplateField>
                             </Columns>
        </asp:GridView> 


                </table>

                </div>


            </div><!--/main content -->

            <div class="span2">Right Column</div><!--/right sidebar-->
        </div><!--/row-->

    </div> <!--/container -->












     <asp:button type="button" id="btnAdd" class=" btn btn-danger" runat="server" Text="Add to Cart"></asp:button> 
&nbsp;&nbsp;
    <asp:Button ID="btnCheckOut" runat="server" Text="Check Out" />






    </form>
   </body>
  </html>

【问题讨论】：

能把那个asp页面生成的html加进去吗？
帖子已更新完整代码。
twitter bootstrap 与 asp 没有任何关系。他们只是从你给元素的类中应用了css。试试萤火虫，它会工作的。
F1beta 谢谢。这个问题似乎只出现在 IE9 和 IE10 中。我会从那里弄清楚。
奇怪的是，你所做的没有用。我也做了同样的事情，而且效果和你预期的一样。

标签： asp.net css twitter-bootstrap

【解决方案1】：

我不一定记得 100%，但在想了更多之后，我想我遇到了和你一样的事情。在查看我的一些旧代码时，我通过使用链接按钮而不是按钮控件来解决这个问题。

<asp:LinkButton CssClass="btn btn-small" runat="server" ID="m_ReportButton" OnClick="OnReportClick" Text="Report" />
<asp:LinkButton CssClass="btn btn-small" runat="server" ID="m_DeleteButton" OnClick="OnDeleteClick" Text="Delete" />
<asp:LinkButton CssClass="btn btn-small" runat="server" ID="m_EditButton" OnClick="OnEditClick" Text="Edit" />
<asp:LinkButton CssClass="btn btn-small" runat="server" ID="m_QuoteButton" OnClick="OnQuoteClick" Text="Quote" />
<asp:LinkButton CssClass="btn btn-small" runat="server" ID="m_ReplyButton" OnClick="OnReplyClick" Text="Reply" />

回想起来，我几乎可以肯定我做出这个改变只是为了应用更多的东西，而不仅仅是 btn 引导类。

【讨论】：

蒂莫西谢谢你。我会在今天的某个时候尝试将其添加到我的代码中，然后我会告诉你结果。
@NinaMorena 所以？现在是七月，发生了什么？