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>
Antworten:
Sie können anstelle der Eingabe ein Schaltflächen-Tag verwenden
quelle
<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 SieCtrl+F5
, um den Cache zu leeren und zu aktualisieren, und sehen Sie das herrliche Symbol!onClick="submit();"
Ich denke, Sie können Etiketten-Tags für diesen Zweck verwenden. Hier ist ein Beispiel für die HTML-Navigationsleiste des Twitter-Bootstraps:
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.
quelle
Ich denke, Sie sollten dieses FontAwesome ausprobieren, das für die Verwendung mit Twitter Bootstrap entwickelt wurde.
quelle
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:
Ändern Sie es so:
... und dann die magische jQuery:
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.
quelle
Mit Bootstrap 3 gibt es eine neue Möglichkeit:
Es befindet sich auf der Bootstrap-Glyphenseite unter "Verwendung":
quelle
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:
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).
Und hier ist ein Link zum Screenshot des fertigen Ergebnisses: http://grab.by/cVXm
quelle
Es gibt einen Weg, wie man (Bootstraps) Glyphicons bekommt
input type="submit"
. Verwenden von CSS3 mehreren Hintergrund.HTML:
und CSS:
Wenn sich mehrere Hintergründe überlappen, befindet sich oben der erste Hintergrund in der
background:
Notation. Oben befindet sich also der Hintergrund, der16px
von links eingerückt ist (16px
ist die Breite eines einzelnen Glyphikons), unten ist er ganzglyphicons-halflings.png
und unten (deckt das gesamte Element ab) der gleiche Hintergrundgradient wie auf der oberen Ebene.-48px 0px
ist der Schnitt für das Suchsymbol (icon-search
), aber es ist einfach, jedes andere Symbol anzuzeigen.Wenn jemand einen
:hover
Effekt benötigt, muss der Hintergrund erneut in derselben Form eingegeben werden.quelle
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:
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:
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.
quelle
Ich denke, es ist eine Lösung für Ihr Problem
quelle
quelle
Verwenden Sie input-append mit Add-On-Klassen
quelle
Ich denke, dieser bessere Weg funktioniert gut für mich.
quelle