Twitter Bootstrap radio/checkbox - wie glyphicon

Mit TB, ist es möglich, Stil -, radio-oder checkbox, so dass es zeigt ein glyphicon anstelle der Standard-style für radio-oder checkbox? Ich möchte an einem glyphicon glyphicon-star angeben deaktiviert, dann glyphicon glyphicon-star-empty um anzuzeigen, überprüft.

Es gibt keine "offizielle" BS Weg, das zu tun, aber Sie verwenden können, JS ausblenden das Kontrollkästchen ersetzen durch ein anderes element und befestigen Sie die glyphicon Staaten Elemente (ein-und ausschalten der Kontrollkästchen in den hintergrund).
glyphicon glyphicon-star-leer, um anzuzeigen, nicht aktiviert, dann glyphicon glyphicon-star-leer, um anzugeben, überprüft? das sind die gleichen Symbole?
vielen Dank für bemerken den Fehler. Ich habe es behoben.

InformationsquelleAutor StackOverflowNewbie | 2014-05-21

  1. 2

    Auf der offiziellen website, die javascript-Abschnitt gibt es Beispiele für styling Gruppen von Checkboxen und radio-buttons, als buttons Gruppen. Es ist unter den Tasten, Abschnitt hier.

    Anstatt text innerhalb der Schaltfläche, die liest "Option 1", Sie würde Ihre glyphicon statt. Wenn Sie wollte nur eine checkbox, ich nehme an, man könnte beseitigen die Schaltfläche Gruppe und gehe einfach mit einer einzigen Taste.

    Entfernen-Taste Aussehen und nur zeigen Sie Ihre Symbol, verwenden Sie die "btn-link" - Klasse.

    Ich habe nicht versucht, diese selbst, aber ich sehe keinen Grund es nicht zu funktionieren.

    InformationsquelleAutor david

  2. 13

    Ohne javascript könnte man ändern Sie den Stil... es ist eine Art hack meiner Meinung nach, aber es war interessant, weil ich merkte, dass boostrap verwendet eine icon-font #newb.

    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;        
}

    Probieren Sie es aus HIER

    Können Sie bitte überprüfen Sie Ihre Geige? Es scheint nicht zu funktionieren für mich. Danke.
    Ich habe es; es funktioniert, aber was passiert, wenn Sie es überprüfen?
    Ich aktualisierte es, verwenden Sie die Symbole, die Sie wollten.
    Funktioniert nicht mit FF32 (Aurora-Kanal)
    ::before ist nicht gültig für input-Elemente. Dies funktioniert für Chrome, aber nicht für IE, Firefox. Mehr Erklärung here

    InformationsquelleAutor Crystal

  3. 9

    Nur für diejenigen, die mit dem gleichen problem und kam von Google (ich fand keine bequeme Antwort).

    Ich gebastelt, so etwas wie dieses und es getestet in der aktuellen Chrome, Firefox und IE. Mit dieser Methode können Sie auch verwenden alles, was Sie wollen als checkbox. So geben Sie die Klassen "checked" und "unchecked".

    Für jede checkbox machen:

    <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 Ihre CSS:

    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 half mir erheblich! Ich ziemlich viel einfach nur eingefügt und es hat funktioniert!

    InformationsquelleAutor muri

  4. 2

    Hier ist eine Reine eckige Lösung für das Umschalten zwischen glyphicon bedingt zeigen Sie Inhalte auf der Seite. Ich fand die CSS-Lösung ein Fehler in IE.

    Diese nicht mehr als deine Frage, aber ich dachte, dass die Umschaltung etwas auf dem Bildschirm nützlich ist. 

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

    InformationsquelleAutor Dan

Schreibe einen Kommentar