Symbol zum Senden der Schaltfläche in Twitter Bootstrap 2 hinzufügen

Ich möchte die Twitter-Bootstrap-Symbole auf den Senden-Schaltflächen meiner Formulareingabe verwenden.

Die Beispiele auf http://twitter.github.com/bootstrap/base-css.html#icons zeigen hauptsächlich gestaltete Hyperlinks.

Am nächsten kommt mir das Symbol neben der Schaltfläche, aber nicht im Inneren.

<div class="input-prepend">
   <span class="add-on"><i class="icon-user icon-white"></i></span>
   <input type="submit" class="btn-primary" value="Login" >
</div>

Sie können anstelle der Eingabe ein Schaltflächen-Tag verwenden

<button type="submit" class="btn btn-primary">
  <i class="icon-user icon-white"></i> Sign in
</button>

Ich denke, Sie können Etiketten-Tags für diesen Zweck verwenden. Hier ist ein Beispiel für die HTML-Navigationsleiste des Twitter-Bootstraps:

<form class="navbar-search">
    <input type="text" class="search-query" placeholder="Search here" />        
    <label for="mySubmit" class="btn"><i class="icon-search icon-white"></i> Search me</label>
    <input id="mySubmit" type="submit" value="Go" class="hidden" />
</form>

Grundsätzlich erhalten Sie ein Beschriftungselement für die Eingabe (Typ = Senden) und verbergen dann die tatsächliche Eingabe Senden. Benutzer können auf das Beschriftungselement klicken und trotzdem mit der Formularübermittlung fertig werden.

Ich denke, Sie sollten dieses FontAwesome ausprobieren, das für die Verwendung mit Twitter Bootstrap entwickelt wurde.

<button class="btn btn-primary icon-save">Button With Icon</button>

Sie können irgendwo ein <a/> mit dem Symbol hinzufügen und eine JavaScrit-Aktion daran binden, die das Formular sendet. Falls erforderlich, können der Name und der Wert des Namens + Werts der ursprünglichen Senden-Schaltfläche in einem ausgeblendeten Attribut enthalten sein. Mit jQuery ist das ganz einfach. Bitte erlauben Sie mir, die reine JavaScript-Version zu vermeiden.

Angenommen, dies ist die ursprüngliche Form:

<form method="post" id="myFavoriteForm>
   ...other fields...
   <input class="btn btn-primary" type="submit" name="login" value="Let me in" />
</form>

Ändern Sie es so:

<form method="post" id="myFavoriteForm">
   ...other fields...
   <a href="#" class="btn btn-primary" id="myFavoriteFormSubmitButton">
      <i class="icon-user icon-white"></i>&nbsp;Let me in
   </a>
</form>

... und dann die magische jQuery:

$("#myFavoriteFormSubmitButton").bind('click', function(event) {
   $("#myFavoriteForm").submit();
});

Oder wenn Sie sicherstellen möchten, dass der Benutzer das Formular immer senden kann - das würde ich in Ihren Schuhen tun -, können Sie die normale Schaltfläche zum Senden im Formular belassen und mit jQuery .hide () ausblenden. Es stellt sicher, dass die Anmeldung weiterhin ohne JavaScript und jQuery gemäß der normalen Senden-Schaltfläche funktioniert (es gibt Personen, die Links, w3m und ähnliche Browser verwenden), bietet jedoch nach Möglichkeit eine ausgefallene Schaltfläche mit Symbol.

Mit Bootstrap 3 gibt es eine neue Möglichkeit:

<button type="button" class="btn btn-default btn-lg">
  <span class="glyphicon glyphicon-star"></span> Star
</button>

Es befindet sich auf der Bootstrap-Glyphenseite unter "Verwendung":

Ich wollte die Twitter Bootstrap-Symbole zu einem einfachen Rails-Formular machen und bin auf diesen Beitrag gestoßen. Nachdem ich ein bisschen gesucht hatte, fand ich einen einfachen Weg, dies zu tun. Ich bin mir nicht sicher, ob Sie Rails verwenden, aber hier ist der Code. Der Schlüssel bestand darin, einen Block an den link_to view-Helfer zu übergeben:

<tbody>
    <% @products.each do |product| %>
      <tr>
        <td><%= product.id %></td>
        <td><%= link_to product.name, product_path(product) %></td>
        <td><%= product.created_at %></td>
        <td>
          <%= link_to(edit_product_path(product), :class => 'btn btn-mini') do %>
          Edit <i class="icon-pencil"></i>
          <% end %>

          <%= link_to(product_path(product), :method => :delete, :confirm => 'Are you sure?', :class => 'btn btn-mini btn-danger') do %>
          Delete <i class="icon-trash icon-white"></i>
          <% end %>
        </td>
      </tr>
    <% end %>
  </tbody>
</table>

<%= link_to(new_product_path, :class => 'btn btn-primary') do %>
    New <i class="icon-plus icon-white"></i>
<% end %>

Falls Sie Rails nicht verwenden, finden Sie hier den Ausgabe-HTML-Code für die Links mit Symbolen (für Schaltflächen zum Bearbeiten, Löschen und neuen Senden).

# Edit
<a href="/products/1/edit" class="btn btn-mini">Edit <i class="icon-pencil"></i></a>

# Delete
<a href="/products/1" class="btn btn-mini btn-danger" data-confirm="Are you sure?" data-method="delete" rel="nofollow"> Delete <i class="icon-trash icon-white"></i></a>

# New
<a href="/products/new" class="btn btn-primary">New <i class="icon-plus icon-white"></i></a>

Und hier ist ein Link zum Screenshot des fertigen Ergebnisses: http://grab.by/cVXm

Es gibt einen Weg, wie man (Bootstraps) Glyphicons bekommt input type="submit". Verwenden von CSS3 mehreren Hintergrund.

HTML:

<form class="form-search">
   …
   <input type="submit" value="Search">
</form>

und CSS:

.form-search input[type="submit"] {
    padding-left:16px; /* space for only one glyphicon */
    background:-moz-linear-gradient(top,#fff 0%,#eee 100%) no-repeat 16px top,
        url(../images/glyphicons-halflings.png) no-repeat -48px 0,
        -moz-linear-gradient(top,#fff 0%,#eee 100%); /* FF hack */
    /* another hacks here  */
    background:linear-gradient(to bottom,#fff 0%,#eee 100%) no-repeat 16px top,
        url(../images/glyphicons-halflings.png) no-repeat -48px 0,
        linear-gradient(to bottom,#fff 0%,#eee 100%); /* Standard way */
}

Wenn sich mehrere Hintergründe überlappen, befindet sich oben der erste Hintergrund in der background:Notation. Oben befindet sich also der Hintergrund, der 16pxvon links eingerückt ist ( 16pxist die Breite eines einzelnen Glyphikons), unten ist er ganz glyphicons-halflings.pngund unten (deckt das gesamte Element ab) der gleiche Hintergrundgradient wie auf der oberen Ebene.

-48px 0pxist der Schnitt für das Suchsymbol ( icon-search), aber es ist einfach, jedes andere Symbol anzuzeigen.

Wenn jemand einen :hoverEffekt benötigt, muss der Hintergrund erneut in derselben Form eingegeben werden.

Ich habe das zum Laufen gebracht, aber es gibt ein paar Einschränkungen, die ich noch nicht gelöst habe.

Wie auch immer, so wird es gemacht:

Nehmen Sie Ihre durchschnittliche Eingabetaste:

<input type="submit" class="btn btn-success" value="Save">

Schneiden Sie das gewünschte Symbol für Ihre Senden-Schaltflächen aus der Glyphicons-Sprite-Datei aus und stellen Sie sicher, dass es sich um ein 14 x 14 Pixel großes Bild handelt. Ja, unter idealen Umständen können Sie das Sprite wiederverwenden, und wenn jemand das herausfindet, bin ich froh zu hören, wie es gemacht wird. :-)

Sobald Sie das getan haben, können Sie CSS für Ihre Eingabeschaltfläche wie folgt schreiben:

input[type='submit'] {
    background-image: url('../images/submit-icon.png'), #62C462; /* fallback color if gradients are not supported */
    background-image: url('../images/submit-icon.png'), -webkit-linear-gradient(top, #62C462, #51A351);
    background-image: url('../images/submit-icon.png'),    -moz-linear-gradient(top, #62C462, #51A351); /* For Fx 3.6 to Fx 15 */
    background-image: url('../images/submit-icon.png'),     -ms-linear-gradient(top, #62C462, #51A351); /* For IE 10 Platform Previews and Consumer Preview */
    background-image: url('../images/submit-icon.png'),      -o-linear-gradient(top, #62C462, #51A351); /* For Opera 11.1 to 12.0 */
    background-image: url('../images/submit-icon.png'),         linear-gradient(top, #62C462, #51A351); /* Standard syntax; must be the last statement */
    background-repeat: no-repeat;
    background-position: 5px 50%, 0cm 0cm;
    padding-left: 25px;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
}

input[type='submit']:hover {
    background-image: url('../images/submit-icon.png'), #51A351; /* fallback color if gradients are not supported */
    background-image: url('../images/submit-icon.png'), -webkit-linear-gradient(top, #51A351, #51A351);
    background-image: url('../images/submit-icon.png'),    -moz-linear-gradient(top, #51A351, #51A351); /* For Fx 3.6 to Fx 15 */
    background-image: url('../images/submit-icon.png'),     -ms-linear-gradient(top, #51A351, #51A351); /* For IE 10 Platform Previews and Consumer Preview */
    background-image: url('../images/submit-icon.png'),      -o-linear-gradient(top, #51A351, #51A351); /* For Opera 11.1 to 12.0 */
    background-image: url('../images/submit-icon.png'),         linear-gradient(top, #51A351, #51A351); /* Standard syntax; must be the last statement */
    background-position: 5px 50%, 0cm 0cm;
    padding-left: 25px;
}

Funktioniert in Firefox 14, Chrome 21

Funktioniert nicht in IE 9

tl; dr: Mit ein bisschen CSS können Sie Symbole automatisch auf Ihre Senden-Schaltflächen setzen, aber Sie müssen das Symbol in einer separaten Datei ablegen, damit es in Internet Explorer nicht funktioniert.

Ich denke, es ist eine Lösung für Ihr Problem

<input type="text" placeholder="search here" />
<button type="submit"><i class="glyphicon glyphicon-search"></button>

Verwenden Sie input-append mit Add-On-Klassen

<div class="input-append">
  <input class="span2" id="appendedPrependedInput" type="text">
  <span class="add-on">.00</span>
</div>

Ich denke, dieser bessere Weg funktioniert gut für mich.

<form name="myform">
<!-- form fields -->
   <a href="#" class="btn btn-success" onclick="document.myform.submit();">
     Submit <i class="icon-plus"></i>&nbsp; Icon
   </a>
</form>