Umfassende Analyse der Verwendung von Bootstrap-Formularen (Formularschaltflächen)_Javascript-Kenntnissen

1. Multi-Tag-Unterstützung

Zusätzlich zur Verwendung des -Tag-Elements können Sie beim Erstellen von Schaltflächen auch die Tags verwenden.

In ähnlicher Weise können Sie beim Erstellen von Schaltflächen im Bootstrap-Framework diese zusätzlich zu den gerade erwähnten Beschriftungselementen auch für andere Beschriftungselemente verwenden. Das Einzige, worauf Sie achten müssen, ist das Hinzufügen einer Klasse zum Beschriftungselement Geben Sie beim Erstellen der Schaltfläche den Namen „.btn“ ein.

<button class="btn btn-default" type="button">button标签按钮</button>
<input type="submit" class="btn btn-default" value="input标签按钮"/>
<a href="##" class="btn btn-default">a标签按钮</a>
<span class="btn btn-default">span标签按钮</span>
<div class="btn btn-default">div标签按钮</div>

2. Individueller Stil

Verschiedene Schaltflächenstile im Bootstrap-Framework werden durch unterschiedliche Klassennamen implementiert.

<button class="btn" type="button">基础按钮.btn</button>
<button class="btn btn-default" type="button">默认按钮.btn-default</button>
<button class="btn btn-primary" type="button">主要按钮.btn-primary</button>
<button class="btn btn-success" type="button">成功按钮.btn-success</button>
<button class="btn btn-warning" type="button">警告按钮.btn-warning</button>
<button class="btn btn-danger" type="button">危险按钮.btn-danger</button>
<button class="btn btn-link" type="button">链接按钮.btn-link</button>

3. Knopfgröße

Im Bootstrap-Framework kann auch die Größe der Schaltflächen angepasst werden. ​

Im Bootstrap-Framework werden drei Klassennamen bereitgestellt, um die Schaltflächengröße zu steuern:

<button class="btn btn-primary btn-lg" type="button">大型按钮.btn-lg</button>
<button class="btn btn-primary" type="button">正常按钮</button>
<button class="btn btn-primary btn-sm" type="button">小型按钮.btn-sm</button>

4. Schaltflächen blockieren

Das Bootstrap-Framework stellt einen Klassennamen „.btn-block“ bereit. Wenn Sie diesen Klassennamen für eine Schaltfläche verwenden, kann die Schaltfläche den gesamten Container ausfüllen, und die Schaltfläche weist keine Füll- oder Randwerte auf. In der Praxis wird diese Art von Schaltfläche oft als Blockschaltfläche bezeichnet.

<button class="btn btn-primary btn-lg btn-block" type="button">大型按钮.btn-lg</button>
<button class="btn btn-primary btn-block" type="button">正常按钮</button>
<button class="btn btn-primary btn-sm btn-block" type="button">小型按钮.btn-sm</button>
<button class="btn btn-primary btn-xs btn-block" type="button">超小型按钮.btn-xs</button>

5. Schaltfläche deaktivierter Zustand

Im Bootstrap-Framework gibt es zwei Möglichkeiten, Schaltflächen zu deaktivieren:

　Methode 1: Fügen Sie das deaktivierte Attribut im Tag hinzu

　Methode 2: Fügen Sie den Klassennamen „disabled“ im Element-Tag hinzu

　Der Hauptunterschied zwischen den beiden ist:

Der Stil „.disabled“ deaktiviert nicht das Standardverhalten der Schaltfläche, wie z. B. das Senden- und Zurücksetzen-Verhalten.

Durch Hinzufügen des Attributs „disabled“ zum Element-Tag kann das Standardverhalten des Elements deaktiviert werden.

<button class="btn btn-primary btn-lg btn-block" type="button" disabled="disabled">通过disabled属性禁用按钮</button>
<button class="btn btn-primary btn-block disabled" type="button">通过添加类名disabled禁用按钮</button>

Heute werde ich einige neue Erkenntnisse für Sie hinzufügen: Informationen zur Bootstrap-Formularaufforderung

Normalerweise sollten bei der Formularüberprüfung unterschiedliche Eingabeaufforderungsinformationen angegeben werden. Dieser Effekt wird auch im Bootstrap-Framework bereitgestellt. Ein „Hilfeblock“-Stil wird verwendet, um die Eingabeaufforderungsinformationen in einem Block und am unteren Rand des Steuerelements anzuzeigen.

<form role="form">
 <div class="form-group has-success has-feedback">
 <label class="control-label" for="inputSuccess1">成功状态</label>
 <input type="text" class="form-control" id="inputSuccess1" placeholder="成功状态" >
 <span class="help-block">你输入的信息是正确的</span>
 <span class="glyphicon glyphicon-ok form-control-feedback"></span>
 </div>
 <div class="form-group has-warning has-feedback">
 <label class="control-label" for="inputWarning1">警告状态</label>
 <input type="text" class="form-control" id="inputWarning1" placeholder="警告状态">
 <span class="help-block">请输入正确信息</span>
 <span class="glyphicon glyphicon-warning-sign form-control-feedback"></span>
 </div>
 <div class="form-group has-error has-feedback">
 <label class="control-label" for="inputError1">错误状态</label>
 <input type="text" class="form-control" id="inputError1" placeholder="错误状态">

 <span class="glyphicon glyphicon-remove form-control-feedback"></span>
 </div>
</form>

Das Obige ist eine detaillierte Einführung in die Bootstrap-Formularschaltflächen. Ich hoffe, dass Sie weiterhin darauf achten.