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

227

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>
AyKarsi
quelle
2
Ich habe es eine Weile ohne Erfolg versucht. Grundsätzlich können Sie dem Wert einer Schaltfläche keine HTML-Elemente hinzufügen.
John Goodman
@ JohnGoodman Das sollte eine Antwort sein, kein Kommentar. Die akzeptierte Antwort ist eine Umgehung und keine direkte Antwort auf die Frage.
Cartbeforehorse

Antworten:

394

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>
Simon Cunningham
quelle
12
Dies funktioniert jedoch unter w3schools.com/tags/tag_button.asp. Weitere Informationen dazu, wofür das Button-Tag bestimmt ist und welchen Cross-Browser-Effekt es hat. Verwenden Sie dies mit Vorsicht, insbesondere bei Formularen.
Matenia Rossides
10
Ich habe dies in Chrome, Firefox, Safari (auf win7) und IE8 in einem <form> -Tag als
Mr Bell
4
Das einzige Problem, das ich bei diesem Ansatz hatte, ist, wenn das Formular andere Schaltflächen enthält, wird Ihr Formular beim Drücken der Eingabetaste auf der Tastatur nicht gesendet, da eine der anderen Schaltflächen Vorrang hat. Bekannte Problemumgehungen?
Jeshurun
2
Genau das habe ich getan. Das Symbol wurde jedoch nicht angezeigt, nachdem ich es dem <i>Tag hinzugefügt habe . Es war extrem verrückt, bis ich herausfand, dass ich den Cache leeren musste. Wenn Sie auf das gleiche Problem stoßen, drücken Sie Ctrl+F5, um den Cache zu leeren und zu aktualisieren, und sehen Sie das herrliche Symbol!
Aditya MP
2
Ich musste hinzufügenonClick="submit();"
TimP
67

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.

Christian Michael
quelle
9
Das ist für mich das Beste aus beiden Welten. Sie erhalten den gewünschten Stil und verwenden keinen Link oder kein Javascript.
AaronLS
1
Dies wendet zwar das Styling an und sieht gut aus, verhindert jedoch, dass das Formular gesendet wird, wenn der Benutzer die Eingabetaste in einem Eingabefeld drückt. (Nur auf FF17 getestet)
Richard
1
Klar die beste Lösung für mich. Prost!
Armel Larcier
14

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>
pengemizt
quelle
11

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.

Sandor Bedo
quelle
Ich bitte Sie, meine Frage zu beantworten, wenn Sie eine Vorstellung davon haben. stackoverflow.com/questions/11295378/…
Krishnaprasad Varma
8

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":

Justin
quelle
7

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

Brett Sanders
quelle
2
Was passiert also, wenn eine Suchmaschine Ihre Website crawlt, einen Link namens "Löschen" sieht, entscheidet: "Oh, ich glaube, ich werde diesem Link folgen" und anfängt, mit Ihrer Datenbank herumzuspielen? Mir wurde immer gesagt, dass Änderungen aus diesem Grund immer mit Nicht-GET-Operationen durchgeführt werden sollten.
Asfand Qazi
Wahrscheinlich verwendet er die Autorisierung zum Löschen von Links, was die meisten Leute tun.
Noz
2
Off Topic, da das OP nicht nach Rails fragte, sondern ... Rails verwendet tatsächlich eine Löschmethode, wenn diese Art von Hyperlink über unauffälliges Javascript integriert wird. Wenn jemand diesen Link direkt anfordert, wird dieser Datensatz standardmäßig angezeigt und nicht gelöscht. Siehe diese Antwort für weitere Details: stackoverflow.com/a/2809412/252290
Levous
Hierbei handelt es sich speziell um eine Senden-Schaltfläche, nicht um ein Ankertag.
Pixelearth
6

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.

iiic
quelle
Dies mag zwar funktionieren, ist aber sicherlich nicht so elegant wie die Verwendung von <button type = "submit"> und wird schwieriger zu warten sein.
Richard
4

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.

Moeri
quelle
1

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>
Naveen
quelle
1

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  
    <button type="button" class="btn btn-info">
      <span class="glyphicon glyphicon-search"></span> Search
    </button>
  </p>
 
    <a href="#" class="btn btn-success btn-lg">
      <span class="glyphicon glyphicon-print"></span> Print 
    </a>
  </p> 
</div>

</body>
</html>

Ganesh Putta
quelle
1
Frage war über einreichen
Grigory Kislin
Dies ist Bootstrap 3 - die Frage betraf das Bootstrap 2-Format, das ein anderes Format für die Anzeige der Symbole verwendet.
Calaelen
-1

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>
Livia
quelle