Mit TB, ist es möglich, das Radio oder Kontrollkästchen so zu stylen, dass es ein Glyphon anstelle des Standardstils für Radio oder Checkbox zeigt? Ich möchte eine glyphicon glyphicon-star
verwenden, um nicht markiert, dann glyphicon glyphicon-star-empty
zu markieren, markiert.Twitter Bootstrap Radio/Checkbox - wie man glyphicon
Antwort
Auf der offiziellen Website finden Sie im JavaScript-Abschnitt Beispiele für die Gestaltung von Gruppen von Kontrollkästchen und Optionsfeldern als Schaltflächengruppen. Es ist unter den Tasten Abschnitt here.
Anstatt Text in der Schaltfläche "Option 1" zu haben, würden Sie stattdessen Ihr Glyphon platzieren. Wenn Sie nur ein Kontrollkästchen wollten, könnten Sie die Schaltflächengruppe eliminieren und einfach mit einem einzigen Knopf gehen.
Um die Darstellung der Schaltfläche zu entfernen und nur Ihr Symbol anzuzeigen, verwenden Sie die Klasse "btn-link".
Ich habe das selbst nicht versucht, aber ich sehe keinen Grund dafür, dass es nicht funktioniert.
Ohne Javascript könnten Sie den Stil ändern ... Seine Art von einem Hack meiner Meinung nach, aber es war interessant, weil ich erkannte, dass BoostRap eine Symbolschriftart #newb verwendet.
HTML
<input type="checkbox" class="glyphicon glyphicon-star-empty" >
CSS
.glyphicon:before {
visibility: visible;
}
.glyphicon.glyphicon-star-empty:checked:before {
content: "\e006";
}
input[type=checkbox].glyphicon{
visibility: hidden;
}
Ausprobieren HERE
Können Sie bitte Ihre Geige überprüfen? Es scheint nicht für mich zu funktionieren. Vielen Dank. – StackOverflowNewbie
@StackOverflowNewbie Ich habe es überprüft; es funktioniert, aber was passiert, wenn Sie es überprüfen? – Crystal
@StackOverflowNewbie Ich habe es aktualisiert, um die gewünschten Symbole zu verwenden. – Crystal
Hier out ist eine reine Winkel Lösung zwischen zu Makeln bedingt glyphicon Inhalt auf der Seite zu zeigen. Ich fand die CSS-Lösung in IE fehlschlagen.
Dies ist mehr als Ihre Frage, aber ich dachte, das Umschalten von etwas auf dem Bildschirm ist nützlich.
<p ng-init="toggle = false" ng-click="toggle = !toggle" title="@Resources.Label_HideShowCustBiller" style="cursor:pointer" class="glyphicon" ng-class="{true: 'glyphicon-chevron-up', false: 'glyphicon-chevron-down'}[toggle]"></p>
<div ng-show="toggle">
//what you want to show here
</div>
Nur für diejenigen, mit dem gleichen Problem und kam von Google (Ich habe keine praktische Antwort gefunden).
Ich bastelte so etwas und testete es im aktuellen Chrome, Firefox und IE. Mit dieser Methode können Sie auch alles andere als Kontrollkästchen verwenden. Gib den Klassen einfach "checked" und "unchecked".
Für jede Option dies zu tun:
<input id="checkbox1" class="icon-checkbox" type="checkbox" />
<label for="checkbox1">
<span class='glyphicon glyphicon-unchecked unchecked'></span>
<span class='glyphicon glyphicon-check checked'></span>
Checkbox 1
</label>
Und fügen Sie zu Ihrem CSS: dass
input[type='checkbox'].icon-checkbox{display:none}
input[type='checkbox'].icon-checkbox+label .unchecked{display:inline}
input[type='checkbox'].icon-checkbox+label .checked{display:none}
input[type='checkbox']:checked.icon-checkbox{display:none}
input[type='checkbox']:checked.icon-checkbox+label .unchecked{display:none}
input[type='checkbox']:checked.icon-checkbox+label .checked{display:inline}
Das hat mir geholfen wesentlich! Ich habe es ziemlich genau eingefügt und es hat funktioniert! – Evildonald
Es gibt keine ‚offizielle‘ BS Art und Weise zu tun, aber Sie können JS verwenden Sie das Kontrollkästchen zu verstecken, ersetzen Mit einem anderen Element verbinden Sie die Glyphicon-Zustände mit diesem Element (indem Sie das Kontrollkästchen im Hintergrund aktivieren). – Will
glyphicon glyphicon-star-empty zum Ankreuzen, dann glyphicon glyphicon-star-empty zum Ankreuzen? Das sind die gleichen Symbole? – Crystal
@Crystal - Danke, dass Sie den Fehler bemerkt haben. Ich habe es behoben. – StackOverflowNewbie