Umfassende Analyse der Verwendung von Bootstrap-Formularen (Formularsteuerelementen)_Javascript-Kenntnissen

1. Eingabefeldeingabe

Einzeiliges Eingabefeld, ein allgemeines Texteingabefeld, dh der Typattributwert der Eingabe ist Text.

Wenn Sie Eingaben in Bootstrap verwenden, müssen Sie auch den Typtyp hinzufügen. Wenn der Typtyp nicht angegeben ist, können Sie nicht den richtigen Stil erhalten, da das Bootstrap-Framework Eingabe[type="?"]

(wobei ? den Typtyp darstellt, z. B. den Texttyp, der input[type="text"] entspricht), um den Stil zu definieren.

Damit der Steuerelementstil in verschiedenen Formularstilen korrekt ist, müssen Sie den Klassennamen „.form-control“ hinzufügen.

<form role="form">
<div class="form-group">
<input type="email" class="form-control" placeholder="Enter email">
</div>
</form>

2. Dropdown-Auswahlfeld auswählen

Die Verwendung des Dropdown-Auswahlfelds im Bootstrap-Framework stimmt mit dem Original überein. Legen Sie für die mehrzeilige Auswahl den Wert des Mehrfachattributs auf „Mehrfach“ fest.

<form role="form">
<div class="form-group">
 <select class="form-control">
 <option>1</option>
 <option>2</option>
 <option>3</option>
 <option>4</option>
 <option>5</option>
 </select>
 </div>
 <div class="form-group">
 <select multiple class="form-control">
 <option>1</option>
 <option>2</option>
 <option>3</option>
 <option>4</option>
 <option>5</option>
 </select>
</div>
</form>

3. Textbereich

Das Textfeld wird auf die gleiche Weise wie das Originalfeld verwendet. Mit Einstellungszeilen kann die Höhe festgelegt werden, mit Einstellungsspalten kann die Breite festgelegt werden.

Wenn dem Textarea-Element jedoch der Klassenname „.form-control“ hinzugefügt wird, muss das cols-Attribut nicht festgelegt werden.

Weil die Breite des Formularsteuerelements im „form-control“-Stil im Bootstrap-Framework 100 % oder automatisch ist.

 <form role="form">
 <div class="form-group">
 <textarea class="form-control" rows="3"></textarea>
 </div>
 </form>

4. Kontrollkästchen und Optionsfeld

1. Sowohl das Kontrollkästchen als auch das Optionsfeld sind mit Etiketten versehen

2. Das Kontrollkästchen und die Beschriftung werden in einem Container mit dem Namen „.checkbox“
platziert 3. Das Radio und das Label-Tag werden in einem Container mit dem Namen „.radio“
abgelegt

<form role="form">
<div class="checkbox">
<label>
<input type="checkbox" value="">
记住密码
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios1" value="love" checked>
喜欢
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios2" value="hate">
不喜欢
</label>
</div>
</form>

5. Kontrollkästchen und Optionsfelder horizontal angeordnet
1. Wenn Kontrollkästchen horizontal angeordnet werden müssen, fügen Sie einfach den Klassennamen „.checkbox-inline“ zur Beschriftung hinzu 2. Wenn das Radio horizontal angeordnet werden muss, müssen Sie der Beschriftung
nur den Klassennamen „.radio-inline“ hinzufügen

<form role="form">
 <div class="form-group">
 <label class="checkbox-inline">
 <input type="checkbox" value="option1">游戏
 </label>
 <label class="checkbox-inline">
 <input type="checkbox" value="option2">摄影
 </label>
 <label class="checkbox-inline">
 <input type="checkbox" value="option3">旅游
 </label>
 </div>
 <div class="form-group">
 <label class="radio-inline">
 <input type="radio" value="option1" name="sex">男性
 </label>
 <label class="radio-inline">
 <input type="radio" value="option2" name="sex">女性
 </label>
 <label class="radio-inline">
 <input type="radio" value="option3" name="sex">中性
 </label>
 </div>
</form>

6. Formularkontrollgröße
Das Bootstrap-Framework bietet außerdem zwei verschiedene Klassennamen zur Steuerung der Höhe von Formularsteuerelementen. Diese beiden Klassennamen sind: 1. input-sm: Machen Sie das Steuerelement kleiner als normal
2. input-lg: Machen Sie das Steuerelement größer als normal
Diese beiden Klassen eignen sich für Eingabe-, Textbereichs- und Auswahlsteuerelemente in Formularen.

<input class="form-control input-lg" type="text" placeholder="添加.input-lg，控件变大">
<input class="form-control" type="text" placeholder="正常大小">
<input class="form-control input-sm" type="text" placeholder="添加.input-sm，控件变小">

Im Folgenden erfahren Sie, wie Sie Bootstrap-Formularsteuerelemente verwenden. Ich hoffe, dass Sie weiterhin darauf achten.