Die Schaltfläche wird im KAPITEL BITTRAP -Taste eingeführt. Mit dem Taste -Plugin können Sie einige Interaktionen hinzufügen, z. B. das Steuern des Schaltflächenstatus oder das Erstellen von Schaltflächengruppen für andere Komponenten wie Symbolleisten.
Wenn Sie auf die Funktionalität des Plugins separat verweisen möchten, müssen Sie die Taste.js referenzieren. Oder, wie im Kapitel "Bootstrap Plugin" erwähnt, können Sie unter Bootstrap.js oder komprimierten Versionen von Bootstrap.min.js verweisen.
1. Ladestatus
Um der Schaltfläche zum Ladenstatus hinzuzufügen, fügen Sie einfach Datenladungs-Text = "Laden ..." dem Schaltflächenelement als Attribut hinzu, wie im folgenden Beispiel gezeigt:
<button id = "fat-btn" data-loading-text = "laden ..." type = "button"> laden status </button> <skript> $ (function () {$ (". btn"). click (function () {$ (this) .button ('laden'). }); }); </script>2. Single Switch
Um den Schalter einer einzelnen Taste zu aktivieren (d. H. Um den normalen Status der Taste in den Status des Drückens zu ändern und umgekehrt), fügen Sie einfach daten-toggle = "Taste" zum Schaltflächenelement als Attribut hinzu, wie im folgenden Beispiel gezeigt:
Kopieren Sie den Code wie folgt: <Taste data-toggle = "button" autocplete = "off"> einzelner Switch </button>
Hinweis: Wenn die Firefox -Seite mehrfach geladen wird, kann die Schaltfläche das Formular deaktiviert oder ausgewählt halten. Die Lösung lautet: AutoComplete = "Off" hinzufügen.
3. Optionsknöpfe
In ähnlicher Weise können Sie eine Optionsknopfgruppe erstellen und einen Umschalter für die Optionsschaltbuchgruppe hinzufügen, indem Sie die Datenattributdaten-Toggle = "Schaltflächen" zur BTN-Gruppe hinzufügen.
<div data-toggle = "buttons"> <label für = ""> <input type = "radio" name = "sex" autocplete = "off" geprüft> männlich </label> <label für = ""> <Eingabe type = "radio" name = "sex" autocplete = "Off"> weibliche </label> </div> </div> </div> </div> </div> </div> </div>
4. Überprüfen Sie die Taste
Sie können eine Checkbox-Gruppe erstellen und der Checkbox-Gruppe einen Umschalter hinzufügen, indem Sie die Datenattributdaten-Toggle = "Schaltflächen" zur BTN-Gruppe hinzufügen.
<div data-toggle = "buttons"> <label für = ""> <Eingabe type = "pechbox" name = "fa" autocpromplete = "off" geprüft> Musik </label> <label für = ""> <Eingabe type = "Checkbox" name = "fa" fa "autocpromplete =" us OFF "> sports </label </label </label up upbox ="> </"> </"> </"> </" agr. " <Label für = ""> <Eingabe type = "Kontrollkästchen" name = "fa" autocplete = "off"> Computer </label> </div>
In der Taste-Methode befinden sich drei Parameter im Taste-Plug-In: Umschalten, Zurücksetzen und Zeichenfolge (z. B. Laden, vollständig).
// Es kann data-toggle = "button" $ ('schaltet') ersetzen. On ('klick', function () {$ (this) .button ('Toggle');})Hier sind einige nützliche Methoden in Button -Plugins:
Das obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, es wird für das Lernen aller hilfreich sein. Weitere Informationen zu Bootstrap finden Sie unter dem Thema: Bootstrap -Lern -Tutorial