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

1. Grundform

 <form >
 <div class="form-group">
 <label>邮箱：</label>
 <input type="email" class="form-control" placeholder="请输入您的邮箱地址">
 </div>
 <div class="form-group">
 <label >密码</label>
 <input type="password" class="form-control" placeholder="请输入您的邮箱密码">
 </div>
 <div class="checkbox">
 <label>
 <input type="checkbox"> 记住密码
 </label>
 </div>
 <button type="submit" class="btn btn-default">进入邮箱</button>
 </form>

Zusätzlich zu diesen Elementen verfügt das Formular auch über Eingabe-, Auswahl- und Textbereichselemente. Im Bootstrap-Framework wird ein Klassenname „form-control“ verwendet. Das heißt, wenn diese Elemente den Klassennamen verwenden „form-control“ erzielt einige Designanpassungseffekte.

1. Die Breite wird 100 %

2. Legen Sie einen hellgrauen (#ccc) Rand fest

3. Abgerundete Ecken mit 4px

4. Stellen Sie den Schatteneffekt ein. Wenn das Element den Fokus erhält, ändern sich die Schatten- und Randeffekte

5. Setzen Sie die Platzhalterfarbe auf #999

2. Horizontale Form
Das Standardformular des Bootstrap-Frameworks ist ein vertikaler Anzeigestil, aber oft benötigen wir einen horizontalen Formularstil (Beschriftungen links, Formularsteuerelemente rechts).

<form class="form-horizontal" role="form">
 <div class="form-group">
 <label for="inputEmail3" class="col-sm-2 control-label">邮箱:</label>
 <div class="col-sm-4">
 <input type="email" class="form-control" id="inputEmail3" placeholder="请输入您的邮箱地址">
 </div>
 </div>
 <div class="form-group">
 <label for="inputPassword3" class="col-sm-2 control-label">密码:</label>
 <div class="col-sm-4">
 <input type="password" class="form-control" id="inputPassword3" placeholder="请输入您的邮箱密码">
 </div>
 </div>
 </form>

Um horizontale Formeffekte im Bootstrap-Framework zu erzielen, müssen die folgenden zwei Bedingungen erfüllt sein:
1. Verwenden Sie im Element

den Klassennamen ".form-horizontal".
2. Grid-System, das mit dem Bootstrap-Framework zusammenarbeitet.

Die Verwendung des Klassennamens .form-horizontal“ im -Element hat hauptsächlich die folgenden Funktionen:
1. Legen Sie die Füll- und Randwerte des Formularsteuerelements fest.
2. Ändern Sie den Ausdruck von „form-group“ so, dass er dem „row“ des Rastersystems ähnelt.

3. Inline-Formular
Manchmal müssen wir alle Formularsteuerelemente in einer Zeile anzeigen

 <form class="form-inline" role="form">
 <div class="form-group">
 <label class="sr-only" for="exampleInputEmail2">邮箱</label>
 <input type="email" class="form-control" id="exampleInputEmail2" placeholder="请输入你的邮箱地址">
 </div>
 <div class="form-group">
 <label class="sr-only" for="exampleInputPassword2">密码</label>
 <input type="password" class="form-control" id="exampleInputPassword2" placeholder="请输入你的邮箱密码">
 </div>
 <button type="submit" class="btn btn-default">进入邮箱</button>
 </form>

Es ist einfach, einen solchen Formulareffekt im Bootstrap-Framework zu implementieren. Sie müssen lediglich den Klassennamen „.form-inline“ zum hinzufügen.

Wenn Sie vor der Eingabe eine Beschriftung hinzufügen, wird die Eingabe in eine andere Zeile umgebrochen. Wenn Sie eine solche Beschriftung hinzufügen müssen und nicht möchten, dass die Eingabe umbrochen wird, müssen Sie die Beschriftung auch im Container „form-group“ platzieren.

Der obige Artikel ist der erste Artikel einer umfassenden Analyse zur Verwendung von Bootstrap-Formularen. Ich hoffe, dass Sie weiterhin darauf achten.