Stil bootstrap Checkboxen als Tasten ohne btn-group

Ich versuche, eine Liste der Elemente, die aus meiner Datenbank, wo jedes aufgelistete Element ist gekoppelt mit einem frei wählbaren Taste "löschen" in der Bootstrap-alert Stil. Wenn der Nutzer mit einem "ausgewählte löschen" - button am unteren Rand der Seite, werden alle Einträge ausgewählt wurden, werden aus der Datenbank entfernt.

Nun, Bootstrap ist Dokumentation nur erklärt, wie Sie die Stil-Kontrollkästchen Schaltflächen in einem btn-group div, die Gruppen, Sie alle zusammen in eine Zeile. Ich arbeite mit einer Liste, so dass ich nicht wollen, dass die checkbox-buttons in einer Gruppe: ich brauche Sie pro Zeile ein, und eindeutig im Zusammenhang mit der Beschriftung des Eintrages sind Sie zu löschen. Aber ich kann nicht scheinen, um die Kontrollkästchen, um Stil Knöpfe, ohne, dass btn-group div. Es scheint ziemlich willkürlich zu sein, und ich Frage mich, ob es eine einfache Möglichkeit, dies zu tun in der bootstrap-styling, ohne dass von hand schreiben eine Reihe von javascript-onclick-Ereignisse über den normalen bootstrap-button geben, ohne Checkboxen.

Hier ist, was ich jetzt haben, wo ich nur setzen Sie alle Kontrollkästchen, indem Sie sich selbst in Ihrer eigenen kleinen btn-group, aber es Formate alle komisch und autoselects die Tasten standardmäßig:

@foreach ($data['entries'] as $entry) <!-- blade template stuff -->
            <div class="btn-group" data-toggle="buttons">
                    Label of the database entry
                    <label class="btn btn-danger active">
                        <input type="checkbox" autocomplete="off"> Delete
                    </label>
            </div>
            </br>
            </br>
@endforeach

Ist es ein guter Weg, dies zu tun in der Bootstrap -, oder bin ich stuck zu schreiben es mich in js?

  • getbootstrap.com/css/#checkboxes-and-radios Ist das nicht das, was du suchst?
  • Ich möchte style der Checkboxen erscheinen als bootstrap-Tasten.
  • Wie in, wenn es nach unten gedrückt, es ist ausgewählt und wenn es nicht, es ist nicht aktiviert? Sie konnten zeigen, etwas ähnlich zu dem, was Sie versuchen zu erreichen?
  • Sicher finden Sie in der Dokumentation von bootstrap vor, unter den einzelnen toggle-oder checkbox/radio Abschnitte. Ich möchte es zu schauen, wie die single wechseln, sondern werden im HTML-Code definiert als ein Feld, um mein Formular zu erleichtern. Die checkbox/radio-Sektion scheint das zu tun, besteht aber darauf, dass die Kontrollkästchen müssen gruppiert werden. Ich Frage mich, ob ich es tun kann, ohne sich um Sie zu gruppieren.
  • Ich denke ich bekomme Sie jetzt. So Sie wollen einfach nur ein paar Knöpfe, gestapelt, im Gegensatz zu side-by-side, die toggleable?
InformationsquelleAutor Luciasar | 2015-07-07
  1. 6
    @foreach ($data['entries'] as $entry) <!-- blade template stuff -->
  <div data-toggle="buttons">
    Label of the database entry

    <label class="btn btn-danger">
      <input type="checkbox" autocomplete="off"> Delete
    </label>
  </div>
@endforeach

    Diese Arbeit sollte so einfach sein wie das entfernen der btn-group Klasse

    • Das sieht schon besser aus, aber die Tasten sind noch alle standardmäßig aktiviert sind, obwohl Sie das Markierungsfeld "input" enthält nicht die checked Attribut. Irgendwelche Ideen?
    • Ich geändert, der code, entfernen Sie einfach die active Klasse aus der <label>
    • Ja, das war es! Vielen Dank für den Hinweis.
    InformationsquelleAutor Dan Gamble
Schreibe einen Kommentar