In diesem Artikel wird zunächst mit Ihnen die Verwendung von Schaltflächengruppen mitgeteilt. Der spezifische Inhalt ist wie folgt
1. Knopfgruppen
1. Einzelknopfgruppe
Verwenden Sie .BTN-Gruppe, um mehrere <buttons> mit .BTN zu verkapulieren
<Div> <taste> 1 </button> <taste> 2 </button> <taste> 3 </button> </div>
2. Mehrere Tastengruppen
Setzen Sie mehrere <Div> in <div> ein.
<div> <div> ... </div> <div> ... </div> </div> </div>
3. vertikale Knopfgruppe
Fügen Sie .BTN-Gruppen-vertikal zu .BTN-Gruppen.
<div> ... </div>
2. Pulldown-Taste (Taste Dropdowns)
Beispiel
<div> <a data-toggle = "Dropdown" href = "#"> Aktion <span> </span> </a> <ul> <!-Dropdown-Menü Links-> </ul> </div>
1. Kontrolle der Größe
Verwenden Sie auch .BTN-Large, .BTN-Small und .BTN-Mini, um die Größe zu kontrollieren.
2. Taste Taste Taste Taste
<Div> <taste> Aktion </button> <button data-toggle = "Dropdown"> <span> </span> </button> <ul> <!-Dropdown-Menü Links-> </ul> </div>
3. Das Menü, das nach oben erscheint
<Div> <taste> Dropup </button> <button data-toggle = "Dropdown"> <span> </span> </button> <ul> <!-Dropdown-Menü Links-> </ul> </div>
3.. JavaScript
Beispiel
Ladestatus. Fügen Sie datenlading-text = "Laden ..." hinzu.
Kopieren Sie den Code wie folgt: <Schaltfläche type = "Taste" Datenladung-Text = "Laden ..."> Ladezustand </button>
Status umschalten. Fügen Sie data toggle = "button" hinzu.
Kopieren Sie den Code wie folgt: <Taste type = "Taste" data-toggle = "button"> einzelne Schaltfläche </schaltet>
Kontrollkästchen. Fügen Sie data-toggle = "buttons-Checkbox" nach der BTN-Gruppe hinzu.
<div data-toggle = "buttons-Checkbox"> <Schaltfläche type = "button"> links </button> <button type = "button"> midd </button> <button type = "button"> rechts </button> </div>
Einzelauswahl. Fügen Sie daten-toggle = "buttons-radio" nach BTN-Gruppen hinzu.
<div data-toggle = "buttons-radio"> <button type = "button"> links </button> <button type = "button"> midd </button> <button type = "button"> rechts </button> </div>
Verwendung
JavaScript Code löst den Switch -Status aus.
$ (). Taste ("Toggle")
Sie können das Data-Toggle-Attribut auch hinzufügen, um automatisch auszulösen.
<schaltetyp = "button" data-toggle = "button">… </button>
Verwenden Sie den JavaScript-Code, um den Ladezustand auszulösen, und die Schaltfläche zeigt den von der Datenlading-Text-Eigenschaft angegebenen Wert an.
$ (). Taste ("Laden")
<button type = "button" data-loading-text = "Laden ..."> ... </button>
Hinweis: Firefox hält die Schaltfläche ungültig, wenn die Seite geladen wird. Die Problemumgehung besteht darin, autocomplete = "Aus" auf der Taste anzuwenden.
Verwenden Sie den JavaScript -Code, um den Schaltflächenstatus zurückzusetzen.
$ (). Taste ("Reset")
Setzt den Schaltflächenstatus zurück und verwandelt den Schaltflächentext in den angegebenen Text. Das vollständige im folgende Beispiel ist nur ein Beispiel und kann ersetzt werden.
<Tastendaten-Complete-Text = "Fertig!" > ... </button> <script> $ ('. Btn'). Button ('komplett') </script>Das Obige dreht sich alles um diesen Artikel, ich hoffe, es wird für das Lernen aller hilfreich sein.